在 Eleventy 博客模板中编写文章以 fourthpost.md 为例解析 Front Matter、标签体系与布局渲染链路【免费下载链接】examplesEnjoy our curated collection of examples and solutions. Use these patterns to build your own robust and scalable applications.项目地址: https://gitcode.com/GitHub_Trending/examples1/examplesEleventy11ty是一个以零配置起步、模板引擎自由组合著称的静态站点生成器。本仓库 framework-boilerplates/eleventy 是基于官方eleventy-base-blog模板改造的博客脚手架而fourthpost.md正是其中一篇结构完整的示例文章集中展示了博客文章在 front matter、标签集合与 Nunjucks 布局三层体系下的编写规范。读完本文你将掌握在该模板中新建一篇文章所需的全部知识front matter 每个字段的语义与写法、标签如何驱动归档与分页、Markdown 内容如何经布局链渲染成最终 HTML以及如何在本仓库中直接构建、调试与部署整站。一、fourthpost.md一篇 Eleventy 博客文章的完整形态在 posts/fourthpost.md 中整篇文章只有两部分位于文件顶部的 YAML front matter以及紧随其后的 Markdown 正文。--- title: This is my fourth post. description: This is a post on My Blog about touchpoints and circling wagons. date: 2018-09-30 tags: second tag layout: layouts/post.njk ---正文部分则是一段示例性质的占位文案placeholder copy并带有一个## Section Header二级标题。这段占位文本说明正文就是标准 MarkdownEleventy 会原样解析并注入布局模板的{{ content | safe }}插槽中见下文第三节。当你实际使用该模板时只需把占位文本替换成自己的真实内容即可。需要特别指出的是front matter 才是这篇文章的技术骨架——它决定了文章的标题、描述、发布日期、所属标签和使用的布局是整篇文档最有价值的部分下面逐字段拆解。二、Front Matter 逐字段解析标题、描述、日期、标签与布局Eleventy 会把 Markdown 文件顶部---包裹的 YAML 解析为该页面的数据对象这些字段既可在模板中通过{{ title }}、{{ description }}等形式访问也会被布局层与集合系统消费。字段示例值作用与说明titleThis is my fourth post.文章标题渲染为布局中的h1同时用于导航、归档列表与 RSS 订阅源descriptionThis is a post on My Blog about touchpoints and circling wagons.页面描述写入meta namedescription对 SEO 与社交分享摘要友好date2018-09-30文章发布日期驱动归档列表的时间排序与time标签渲染tagssecond tag文章所属标签。可写单个字符串也可写 YAML 列表多标签layoutlayouts/post.njk指定布局模板路径相对于_includes目录2.1 布局字段显式指定与继承约定fourthpost.md显式声明了layout: layouts/post.njk指向 layouts/post.njk。该模板本身又通过自身的 front matter 声明了layout: layouts/base.njk形成文章 → post 布局 → base 布局的链式嵌套详见第三节。这种显式声明的好处是灵活——你可以在_includes/layouts/下新增其他布局如首页用的layouts/home.njk并按文章类型自由切换。2.2 标签字段单标签与多标签两种写法对比本仓库的几篇示例文章可以确认标签字段的两种合法形态单标签字符串fourthpost.md与firstpost.mdtags: another tag采用tags: second tag这种字符串写法多标签列表thirdpost.mdtags: [second tag, posts with two tags]采用 YAML 列表写法secondpost.mdtags: [number 2]同理。注意标签名允许包含空格如second tagEleventy 会在生成/tags/归档页时通过slug过滤器把空格转换为 URL 友好的形式。second tag同时出现在第四篇与第三篇文章中这正是模板演示同标签文章聚合的方式。2.3 目录级默认数据posts.json 与全局标签在fourthpost.md所在的 posts/ 目录下还藏着一个关键文件 posts.json{ tags: [ posts ] }这是 Eleventy 的**目录数据文件directory data file**机制posts/下所有文件包括第四篇文章都会自动继承这个posts标签无需在每篇文章里重复声明。正是这个全局标签把所有文章聚合进collections.posts集合供首页最新文章列表、归档页与上一篇/下一篇导航使用。README 也明确说明文章可以放在任意目录只需保证带有post标签即可进入该集合。而文章自身声明的second tag等个性化标签则用于构建/tags/专题页。三、布局渲染链路Markdown 正文如何变成完整 HTML 页面fourthpost.md声明使用layouts/post.njk其完整实现位于 _includes/layouts/post.njk--- layout: layouts/base.njk templateClass: tmpl-post --- h1{{ title }}/h1 time datetime{{ page.date | htmlDateString }}{{ page.date | readableDate }}/time {%- for tag in tags | filterTagList -%} {%- set tagUrl %}/tags/{{ tag | slug }}/{% endset -%} a href{{ tagUrl | url }} classpost-tag{{ tag }}/a {%- endfor %} {{ content | safe }}可以看到front matter 中的title、date、tags在这里被逐一消费标题渲染为h1日期经htmlDateString/readableDate过滤器输出为规范化的time标签每个标签生成一个指向/tags/归档页的链接最后{{ content | safe }}将 Markdown 解析后的正文注入页面。post.njk再通过自己的 front matter 嵌套进 _includes/layouts/base.njk。base.njk是整站最外层的 HTML 骨架提供head元信息title/description、CSS、Atom 与 JSON Feed 的link relalternate、顶部导航栏与main内容区并通过{{ content | safe }}接收内层布局的输出。因此一篇文章的完整渲染流水线是fourthpost.mdfront matter Markdown 正文 ↓ markdown-it 解析 layouts/post.njk文章专属结构标题/日期/标签/正文 ↓ 嵌套 layouts/base.njk全局 HTML 骨架head/导航/页脚 ↓ 输出为 /posts/fourthpost/ 目录下的 index.html除了正文流水线post.njk末尾还利用collections.posts集合与getNextCollectionItem/getPreviousCollectionItem过滤器自动生成上一篇 / 下一篇文章链接这是集合数据驱动导航的典型用法。四、标签如何驱动归档、标签页与首页最新列表标签体系是理解fourthpost.md中tags: second tag一文价值的关键仓库中有多处实现相互印证归档页 archive.njk基于collections.posts输出全部文章的倒序列表标签分页模板 tags.njk通过pagination遍历collections把all、nav、post、posts、tagList之外的每个标签生成一个/tags/标签名/分页页面页内通过collections[ tag ]取出该标签下的全部文章标签索引 tags-list.njk汇总站内所有标签可复用组件 _includes/postslist.njk以postslist为输入渲染文章列表标题 日期 标签链接首页、归档页、标签页均复用它首页 index.njk通过collections.posts | head(-3)取最新 3 篇文章并传入postslist.njk渲染。这意味着你只需在文章 front matter 中声明标签Eleventy 构建时就会自动为second tag这类标签生成独立的归档页面无需手工维护任何列表——这正是静态博客数据驱动生成的典型范式。五、从示例文章到整站发布构建、调试与部署本仓库的 README.md 提供了完整的启动流程与 package.json 中预置的脚本一一对应命令package.json 脚本用途npm install—安装依赖11ty/eleventy、11ty/eleventy-navigation、11ty/eleventy-plugin-rss、luxon、markdown-it等npx eleventy/npm run buildbuild: eleventy一次构建输出静态站点npx eleventy --serve/npm run serveserve: eleventy --serve本地开发服务器带热重载npx eleventy --watch/npm run watchwatch: eleventy --watch模板变更时自动重新构建DEBUG* npx eleventy/npm run debugdebug: DEBUG* eleventy调试模式输出详细构建日志按照 README 的步骤克隆仓库后依次执行npm install→ 编辑 _data/metadata.json替换站点标题、URL、作者等全局元数据RSS 与 JSON Feed 路径均从此读取→npx eleventy --serve即可在本地预览。metadata.json中的全局数据与每篇文章 front matter 的局部数据共同构成了模板的数据层base.njk中{{ title or metadata.title }}、{{ description or metadata.description }}这种写法正是页面数据优先、全局数据兜底的合并策略。需要留意的是base.njk第 2736 行包含一段.warning引导提示提醒你编辑metadata.json、可选配置.eleventy.js并删除该提示正式发布前建议按注释移除。此外当前模板的构建产物由11ty/eleventy^1.0.0生成命令执行前提是本地 Node.js 环境已就绪且依赖安装成功。六、基于 fourthpost.md 的二次创作清单结合以上分析在fourthpost.md的基础上编写你自己的文章只需完成四步复制文件将fourthpost.md复制为posts/你的文章名.md文件会因目录数据文件自动获得posts标签无需额外声明重写 front matter按第二节的字段表替换title、description、date按需保留或修改tags多标签用 YAML 列表layout: layouts/post.njk通常保持不变替换正文把占位文本替换为真实 Markdown 内容可用##组织小节若需展示代码可参照firstpost.md/thirdpost.md中js/2/4这类语法高亮围栏的写法对应11ty/eleventy-plugin-syntaxhighlight插件构建预览执行npx eleventy --serve访问本地开发服务器确认文章出现在首页最新列表、归档页与对应标签页中且上一篇/下一篇导航正确衔接其他文章。七、小结fourthpost.md虽然只是一篇示例文章却是理解整个 Eleventy 博客模板的绝佳切片front matter 承载页面数据posts.json目录数据文件提供集合入口tags字段经tags.njk分页驱动标签归档Markdown 正文经post.njk→base.njk两级布局渲染为完整页面。掌握这条从写一篇文章到生成整个静态站点的链路你就能在此基础上搭建完全属于自己的博客——这也是本仓库作为 boilerplate 的核心价值所在。【免费下载链接】examplesEnjoy our curated collection of examples and solutions. Use these patterns to build your own robust and scalable applications.项目地址: https://gitcode.com/GitHub_Trending/examples1/examples创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考