稳定性好的视频生成模型可以推荐一下吗？火山引擎 Seedance 稳定可控，适合创作者
2026/9/18 16:59:14
在 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/examples
Eleventy（11ty）是一个以"零配置起步、模板引擎自由组合"著称的静态站点生成器。本仓库 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二级标题。这段占位文本说明：正文就是标准 Markdown，Eleventy 会原样解析并注入布局模板的{{ content | safe }}插槽中（见下文第三节）。当你实际使用该模板时，只需把占位文本替换成自己的真实内容即可。
需要特别指出的是，front matter 才是这篇文章的"技术骨架"——它决定了文章的标题、描述、发布日期、所属标签和使用的布局，是整篇文档最有价值的部分，下面逐字段拆解。
二、Front Matter 逐字段解析：标题、描述、日期、标签与布局
Eleventy 会把 Markdown 文件顶部---包裹的 YAML 解析为该页面的数据对象，这些字段既可在模板中通过{{ title }}、{{ description }}等形式访问，也会被布局层与集合系统消费。
| 字段 | 示例值 | 作用与说明 |
|---|---|---|
title | This is my fourth post. | 文章标题，渲染为布局中的<h1>，同时用于导航、归档列表与 RSS 订阅源 |
description | This is a post on My Blog about touchpoints and circling wagons. | 页面描述，写入<meta name="description">，对 SEO 与社交分享摘要友好 |
date | 2018-09-30 | 文章发布日期，驱动归档列表的时间排序与<time>标签渲染 |
tags | second tag | 文章所属标签。可写单个字符串，也可写 YAML 列表（多标签） |
layout | layouts/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.md（tags: another tag）采用tags: second tag这种字符串写法； - 多标签列表：
thirdpost.md（tags: [second tag, posts with two tags]）采用 YAML 列表写法，secondpost.md（tags: [number 2]）同理。
注意标签名允许包含空格（如second tag），Eleventy 会在生成/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 }}" class="post-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 rel="alternate">）、顶部导航栏与<main>内容区，并通过{{ content | safe }}接收内层布局的输出。
因此，一篇文章的完整渲染流水线是：
fourthpost.md（front 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 build | build: eleventy | 一次构建，输出静态站点 |
npx eleventy --serve/npm run serve | serve: eleventy --serve | 本地开发服务器，带热重载 |
npx eleventy --watch/npm run watch | watch: eleventy --watch | 模板变更时自动重新构建 |
DEBUG=* npx eleventy/npm run debug | debug: 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第 27～36 行包含一段.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），仅供参考