前端开发工具【免费下载链接】buildawesomeA simpler site generator. Transforms a directory of templates (of varying types) into HTML.项目地址https://gitcode.com/gh_mirrors/el/buildawesome点击查看免费下载本文以 buildawesomeEleventy 系静态站点生成器测试夹具 paged-cfg-tagged-permalink-apply-to-all.md 为核心样本讲解一个同时具备「分页 模板自身打标签 自定义渲染 permalink addAllPagesToCollections」四种特性的分页模板其 front matter 各字段的作用、底层集合归属逻辑TemplateMap.js以及测试用例如何验证其输出 URL。读完本文你将能准确预测这类组合配置下集合成员的 URL 与数量并能将其复用到自己的分页归档、标签页等场景。核心样本一份小而全的分页模板该文档是test/stubs/templateMapCollection/目录下的一组分页测试夹具之一全文是一个仅由 front matter 与一行模板内容构成的 Markdown 文件--- title: Paged Test tags: - haha pagination: data: collections.userCollection size: 1 alias: item addAllPagesToCollections: true permalink: /{{ item.data.title | slugify }}/goodbye/ --- # {{ title }}整份文档不足 15 行却浓缩了 buildawesome 分页体系中 6 个高频配置项是理解「分页模板如何参与集合构建」的最小可运行样本。下面逐一拆解。front matter 逐项拆解title 与 tags模板自身也是一个集合成员title: Paged Test tags: - haha普通模板被打上haha标签后会进入collections.haha标签集合。这里的特殊性在于该模板同时还是分页源。分页会把一个模板展开成多页那么集合里应该收录哪一页这正是addAllPagesToCollections要回答的问题见下文。pagination.data以集合为分页数据源pagination: data: collections.userCollectiondata指明分页遍历的目标。本样本消费的是用户自定义集合collections.userCollection而非内置的collections.all。在对应测试 TemplateMapTest.js 中该集合由配置回调注册cfg.addCollection(userCollection, function (collection) { let all collection.getFilteredByTag(dog); return all; });即先按dog标签过滤出所有模板再交给分页器逐条处理。在 Pagination.js 的_resolveItems中数据源若为数组则直接作为分页项若为对象则默认取键可通过resolve: values改为取值并支持before、reverse、filter等预处理。pagination.size 与 alias单页一条通过别名访问size: 1 alias: itemsize指定每页条目数这里为 1即一页一条全部数据将展开为 N 个页面。alias将当前页的条目注入模板数据供模板正文与 permalink 引用。在 Pagination.js 中pagedItems通过lodashChunk(target, size)将数据源切块size: 1即每条独立成块。addAllPagesToCollections决定分页产物如何进入集合addAllPagesToCollections: true这是本文样本与兄弟夹具最关键的差异点。它控制分页展开出的每一页是否都加入模板自身的标签集合此处即collections.haha。其底层实现在 TemplateMap.js 的#initDependencyMapEntry中let counter 0; for (let page of map._pages) { // ... if (counter 0 || map.data.pagination?.addAllPagesToCollections) { if (ResolveConfigurationData.getValue(map.data, buildawesomeExcludeFromCollections) ! true) { // is in *some* collections this.collection.add(page); } } counter; }逻辑非常直白counter 0分页的第一页无条件加入集合这是默认行为addAllPagesToCollections: true其余每一页也加入集合buildawesomeExcludeFromCollections顶层开关为true时整体排除出集合。permalink基于每页数据的渲染型固定路径permalink: /{{ item.data.title | slugify }}/goodbye/permalink 支持模板语法会在每一页各自的数据上下文中被渲染item当前页条目即alias注入的对象在这里是集合中的一个模板数据对象item.data.title取该条目的title字段| slugifybuildawesome 内置过滤器把标题规范化为 URL 安全的 slugslugify 过滤器有独立测试目录 slugify-filter 佐证最终固定后缀/goodbye/。这意味着输出 URL 完全由数据驱动分页源里每个条目的标题不同产物 URL 也就不同从而规避了默认分页 URL 的/页号/后缀。注意 TemplatePermalink.js 中的说明带模板语法的 permalink 在 Template.js 阶段完成渲染后再进入 URL 处理因此可以放心引用item.data.*。组合语义一个模板同时是分页源与集合成员把四个特性叠加后本夹具演示的核心问题是当分页模板自己带标签、又指定了自定义 permalink且开启 addAllPagesToCollections 时标签集合里会出现什么对应测试 TemplateMapTest.js 给出了权威答案。测试场景test1.md标题 Test Title与test4.md标题 Test Title 4都带dog标签test2.md不带userCollection按dog过滤后得到 2 个条目分页size: 1展开为 2 页。断言结果t.is(collections.haha.length, 2); t.is(collections.haha[0].url, /test-title/goodbye/); t.is(collections.haha[1].url, /test-title-4/goodbye/);即断言结果解释collections.dog.length2只有带dog标签的模板进入分页源collections.haha.length2addAllPagesToCollections: true两页都进集合haha[0].url/test-title/goodbye/第 1 页标题 Test Title slugify 为test-titlehaha[1].url/test-title-4/goodbye/第 2 页标题 Test Title 4 slugify 为test-title-4两个值得注意的细节URL 无页码后缀由于permalink是渲染型的每页 URL 由各自条目的标题决定因此集合中出现的不是/paged-.../、/1/这类默认分页路径首尾页均入集合若没有addAllPagesToCollectionshaha集合只会收录第一页URL 为/test-title/goodbye/第二页虽然被渲染输出却不会出现在标签集合里。与兄弟夹具的对比一个配置一个作用同目录下的系列夹具templateMapCollection通过逐步叠加配置把每个字段的独立作用暴露得非常清晰可视为本样本的变量对照实验夹具文件分页模板打标签自定义 permalinkaddAllPagesToCollections集合行为paged-cfg.md✅❌❌❌仅验证可对用户集合分页paged-cfg-permalink.md✅❌✅/hello/❌渲染型 permalink 生效all中产出/test-title/hello/paged-cfg-tagged.md✅✅haha❌❌haha仅含第一页L530-L567paged-cfg-tagged-apply-to-all.md✅✅haha❌✅haha含全部页URL 为/…/、/…/1/L569-L607paged-cfg-tagged-permalink.md✅✅haha✅/goodbye/❌haha仅含第一页URL/test-title/goodbye/L609-L644paged-cfg-tagged-permalink-apply-to-all.md本文✅✅haha✅/goodbye/✅haha含全部页URL 为/test-title/goodbye/与/test-title-4/goodbye/对比后可以提炼出三条可复用的经验规则渲染型 permalink决定集合成员 URL 的形状数据驱动、无页码addAllPagesToCollections决定集合成员 URL 的数量一页 or 全部页两者相互独立、可自由组合且都有对应的官方测试用例兜底。在自己的项目中复现与验证要把这套组合用到真实站点可按如下步骤准备分页源数据在配置文件中注册一个集合例如按标签过滤写法参考测试中的cfg.addCollection(userCollection, ...)见 TemplateMapTest.js或在 front matter 中直接使用collections.all/collections.标签名编写分页模板复制本夹具的 front matter 结构按需调整size每页条目数、alias条目别名与permalink可换成/{{ item.data.slug }}/等字段驱动写法确认集合归属若希望分页产物逐页出现在标签/集合页面中务必保留addAllPagesToCollections: true若只想保留第一页为代表删除该字段即可默认行为本地验证构建站点后检查输出目录如_site中的实际 URL或在页面模板中遍历collections.haha观察成员数量与 URL 是否符合预期。需要注意的是permalink中引用的字段必须存在于每个分页条目的数据中本样本依赖item.data.title否则对应页面将无法解析出唯一 URL这是构建期最常见的报错来源之一。借助 TemplateMapTest.js 中collections.haha的长度与 URL 断言你可以快速建立配置 → 集合输出的心智模型并把这套组合直接复用于标签归档、按月归档等需要每页一个漂亮 URL 全部进入集合的分页场景。赞分享前端开发工具【免费下载链接】buildawesomeA simpler site generator. Transforms a directory of templates (of varying types) into HTML.项目地址https://gitcode.com/gh_mirrors/el/buildawesome点击查看免费下载相关推荐react-icons组件设计模式复合组件、渲染属性与自定义Hooksreact icons组件设计模式复合组件、渲染属性与自定义Hooks 在现代前端开发中图标系统的设计质量直接影响用户体验与开发效率。react icons前端UI组件PDFPatcher 使用指南免费开源的 PDF 工具箱批量编辑书签、合并拆分文档与页面处理PDFPatcher 使用指南免费开源的 PDF 工具箱批量编辑书签、合并拆分文档与页面处理 PDF 补丁丁PDFPatcher是一款免费开源的 PDF桌面应用文档Hugo Pager.PageGroups 方法详解对分页集合按分组渲染Hugo Pager.PageGroups 方法详解对分页集合按分组渲染 PageGroups 是 Hugo 中 Pager 对象提供的方法用于在分页pa开发工具前端CLI创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考