深入解析 Vercel Eleventy 示例博客的文章组织以 secondpost.md 为例【免费下载链接】vercelDevelop. Preview. Ship.项目地址: https://gitcode.com/gh_mirrors/ve/vercel本指南以当前仓库 examples/eleventy 示例站点中的博文 secondpost.md 为骨架逐层拆解 Eleventy11ty静态博客在 Vercel 上的文章组织方式从 Front Matter 元数据、内容集合Collections与标签分页到 Nunjucks 布局模板的渲染链路。读完本文你将掌握如何在 Vercel 零配置部署的 Eleventy 项目中编写、串联并发布一篇结构完整、带元数据与站内导航的博客文章。一、secondpost.md 的整体结构secondpost.md是 Eleventy 示例博客的一篇占位博文位于 examples/eleventy/posts/secondpost.md全文由两部分组成Front Matter文件顶部的 YAML 元数据块以---包裹Markdown 正文包含普通段落、二级标题## Section Header以及两个指向其他文章的站内链接。1. Front Matter 元数据块--- title: This is my second post. description: This is a post on My Blog about leveraging agile frameworks. date: 2018-07-04 tags: - number 2 layout: layouts/post.njk ---这段元数据定义了文章的五个核心属性它们直接决定文章在站点中的呈现方式与归类方式字段值示例作用titleThis is my second post.文章标题被布局模板渲染为h1也用于文章列表、归档页的标题展示description一段英文描述文章摘要/描述可用于 SEO 与 RSS/JSON Feed 输出date2018-07-04文章发布日期被post.njk布局格式化为time标签tagsnumber 2文章标签驱动标签页分页与文章归类layoutlayouts/post.njk指定文章使用的布局模板路径相对于_includes目录从仓库中另外几篇博文如 firstpost.md、thirdpost.md、fourthpost.md可以看出这套 Front Matter 是每篇文章的通用模板firstpost.md的tags为another tagthirdpost.md同时声明了second tag与posts with two tags两个标签而fourthpost.md使用 YAML 流式写法tags: second tag。这说明tags字段既支持列表形式也支持单值字符串形式Eleventy 会将其归一化处理。2. Markdown 正文与站内链接正文部分包含普通段落、一个## Section Header二级标题以及两个带 Nunjucks 模板语法的站内链接a href{{ /posts/firstpost/ | url }}First post/a a href{{ /posts/thirdpost/ | url }}Third post/a这里使用了 Eleventy 内置的url过滤器filter。它负责将站点根路径由_data/metadata.json中的url字段定义与文章路径正确拼接并自动处理路径前缀如部署在子路径时。这正是 Eleventy 中内容与路径分离的体现文章作者只需写出逻辑路径/posts/firstpost/具体的基础 URL 由构建配置决定。二、集合Collections机制文章如何被自动收集secondpost.md中声明的tags并不只是展示标签它同时把文章纳入了 Eleventy 的**内容集合Collections**体系。关键在于 posts/posts.json 这个目录级数据文件{ tags: [ posts ] }Eleventy 会为posts/目录下的所有文件自动合并该 JSON 中的 Front Matter 数据。因此secondpost.md实际拥有两个标签来自posts.json的posts以及来自自身 Front Matter 的number 2。前者是集合标记后者是展示标签。这正是 Eleventy 官方推荐的集合与展示标签分离的实践——README.md中也明确指出posts/目录中的文章只需要post标签即可被加入该集合示例中集合名为posts。一旦文章被打上posts标签它就会出现在collections.posts集合中供模板遍历index.njk 首页通过collections.posts | head(-3)取最新 3 篇archive.njk 归档页permalink: /posts/遍历整个collections.posts输出全部文章tags.njk 标签页通过pagination.data: collections对每个标签生成/tags/{{ tag | slug }}/分页页面并用filter排除all、nav、post、posts、tagList等内部集合。三、布局模板渲染链路从 Markdown 到 HTMLsecondpost.md的layout: layouts/post.njk指向 examples/eleventy/_includes/layouts/post.njk。该模板是文章渲染的核心其工作流程如下标题渲染h1{{ title }}/h1输出 Front Matter 中的title日期格式化time datetime{{ page.date | htmlDateString }}{{ page.date | readableDate }}/time调用htmlDateString与readableDate两个过滤器由luxon日期库提供输出标准datetime属性与人类可读日期标签循环tags | filterTagList过滤掉内部标签如posts后为每个标签生成指向/tags/{{ tag | slug }}/的链接slug过滤器把标签文本转为 URL 友好的 slug正文注入{{ content | safe }}把 Markdown 正文含## Section Header与站内链接经 markdown-it 解析后的 HTML 原样注入上一篇/下一篇导航借助collections.posts | getNextCollectionItem(page)与getPreviousCollectionItem(page)过滤器自动生成文章间的 Next/Previous 导航。布局是嵌套的post.njk自身的 Front Matter 声明layout: layouts/base.njk即文章模板会被包裹进 base.njk 提供的最外层 HTML 结构html、head、导航等。这与README.md中描述的三层布局体系一致base.njk顶层结构→home.njk/post.njk页面模板→ 具体内容。四、全局数据与站点元信息文章中的description等字段可以与全局数据配合使用。站点的全局元信息定义在 _data/metadata.json{ title: Your Blog Name, url: https://example.com/, language: en, description: I am writing about my experiences as a naval navel-gazer., feed: { subtitle: I am writing about my experiences as a naval navel-gazer., filename: feed.xml, path: /feed/feed.xml, id: https://example.com/ }, jsonfeed: { path: /feed/feed.json, url: https://example.com/feed/feed.json }, author: { name: Your Name Here, email: youremailaddressexample.com, url: https://example.com/about-me/ } }_data/目录下的 JSON 文件会自动注入到模板的全局数据命名空间这里即metadata变量。例如 feed/feed.njk 与feed/json.njk就引用metadata.feed、metadata.jsonfeed与metadata.author生成 RSS Feed 与 JSON Feed这正是 README 中提到的全局数据文件用法。url字段同时被url过滤器用作路径基准——secondpost.md中{{ /posts/firstpost/ | url }}的最终输出地址正是基于该字段计算得出的。五、构建命令与 Vercel 零配置部署将secondpost.md这样的文章从源码变为线上页面构建过程由 examples/eleventy/package.json 中的 scripts 驱动scripts: { build: eleventy, watch: eleventy --watch, serve: eleventy --serve, start: eleventy --serve, debug: DEBUG* eleventy }README 中给出了完整的本地工作流npm install安装依赖 → 编辑_data/metadata.json配置站点信息 → 使用npx eleventy执行构建或通过npx eleventy --serve启动本地开发服务器、npx eleventy --watch在模板变更时自动重建、DEBUG* npx eleventy进入调试模式。该示例仓库被设计为可直接部署到 VercelREADME.md明确说明这是一个zero configuration零配置部署的 Eleventy 站点。Vercel 会自动检测到该项目的 Eleventy 构建配置基于package.json中的build脚本与输出目录约定执行构建后发布为静态站点本地预览时--serve提供的开发服务器与线上产物行为一致。这也意味着secondpost.md中## Section Header这类 Markdown 结构、Nunjucks 链接与 Front Matter 元数据在 Vercel 的构建环境中都会被 Eleventy 完整解析并输出为静态 HTML无需额外的服务端运行时配置。六、实战要点小结写新文章在 examples/eleventy/posts 目录下新建.md文件复制secondpost.md的 Front Matter 骨架填写title、description、date、tags与layout进入归档文章无需手动登记只要它位于posts/目录经 posts.json 自动获得posts标签就会自动出现在 index.njk 首页、archive.njk 归档页和 tags.njk 标签页中站内互链使用{{ /posts/xxx/ | url }}形式生成带基础路径前缀的链接而不是硬编码绝对 URL文章导航上一篇/下一篇由post.njk布局基于collections.posts自动生成无需手写上线npx eleventy本地验证构建产物后推送到 Git 仓库即可由 Vercel 零配置完成构建与发布。【免费下载链接】vercelDevelop. Preview. Ship.项目地址: https://gitcode.com/gh_mirrors/ve/vercel创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 深入解析 Vercel Eleventy 示例博客的文章组织：以 secondpost.md 为例
深入解析 Vercel Eleventy 示例博客的文章组织以 secondpost.md 为例【免费下载链接】vercelDevelop. Preview. Ship.项目地址: https://gitcode.com/gh_mirrors/ve/vercel本指南以当前仓库 examples/eleventy 示例站点中的博文 secondpost.md 为骨架逐层拆解 Eleventy11ty静态博客在 Vercel 上的文章组织方式从 Front Matter 元数据、内容集合Collections与标签分页到 Nunjucks 布局模板的渲染链路。读完本文你将掌握如何在 Vercel 零配置部署的 Eleventy 项目中编写、串联并发布一篇结构完整、带元数据与站内导航的博客文章。一、secondpost.md 的整体结构secondpost.md是 Eleventy 示例博客的一篇占位博文位于 examples/eleventy/posts/secondpost.md全文由两部分组成Front Matter文件顶部的 YAML 元数据块以---包裹Markdown 正文包含普通段落、二级标题## Section Header以及两个指向其他文章的站内链接。1. Front Matter 元数据块--- title: This is my second post. description: This is a post on My Blog about leveraging agile frameworks. date: 2018-07-04 tags: - number 2 layout: layouts/post.njk ---这段元数据定义了文章的五个核心属性它们直接决定文章在站点中的呈现方式与归类方式字段值示例作用titleThis is my second post.文章标题被布局模板渲染为h1也用于文章列表、归档页的标题展示description一段英文描述文章摘要/描述可用于 SEO 与 RSS/JSON Feed 输出date2018-07-04文章发布日期被post.njk布局格式化为time标签tagsnumber 2文章标签驱动标签页分页与文章归类layoutlayouts/post.njk指定文章使用的布局模板路径相对于_includes目录从仓库中另外几篇博文如 firstpost.md、thirdpost.md、fourthpost.md可以看出这套 Front Matter 是每篇文章的通用模板firstpost.md的tags为another tagthirdpost.md同时声明了second tag与posts with two tags两个标签而fourthpost.md使用 YAML 流式写法tags: second tag。这说明tags字段既支持列表形式也支持单值字符串形式Eleventy 会将其归一化处理。2. Markdown 正文与站内链接正文部分包含普通段落、一个## Section Header二级标题以及两个带 Nunjucks 模板语法的站内链接a href{{ /posts/firstpost/ | url }}First post/a a href{{ /posts/thirdpost/ | url }}Third post/a这里使用了 Eleventy 内置的url过滤器filter。它负责将站点根路径由_data/metadata.json中的url字段定义与文章路径正确拼接并自动处理路径前缀如部署在子路径时。这正是 Eleventy 中内容与路径分离的体现文章作者只需写出逻辑路径/posts/firstpost/具体的基础 URL 由构建配置决定。二、集合Collections机制文章如何被自动收集secondpost.md中声明的tags并不只是展示标签它同时把文章纳入了 Eleventy 的**内容集合Collections**体系。关键在于 posts/posts.json 这个目录级数据文件{ tags: [ posts ] }Eleventy 会为posts/目录下的所有文件自动合并该 JSON 中的 Front Matter 数据。因此secondpost.md实际拥有两个标签来自posts.json的posts以及来自自身 Front Matter 的number 2。前者是集合标记后者是展示标签。这正是 Eleventy 官方推荐的集合与展示标签分离的实践——README.md中也明确指出posts/目录中的文章只需要post标签即可被加入该集合示例中集合名为posts。一旦文章被打上posts标签它就会出现在collections.posts集合中供模板遍历index.njk 首页通过collections.posts | head(-3)取最新 3 篇archive.njk 归档页permalink: /posts/遍历整个collections.posts输出全部文章tags.njk 标签页通过pagination.data: collections对每个标签生成/tags/{{ tag | slug }}/分页页面并用filter排除all、nav、post、posts、tagList等内部集合。三、布局模板渲染链路从 Markdown 到 HTMLsecondpost.md的layout: layouts/post.njk指向 examples/eleventy/_includes/layouts/post.njk。该模板是文章渲染的核心其工作流程如下标题渲染h1{{ title }}/h1输出 Front Matter 中的title日期格式化time datetime{{ page.date | htmlDateString }}{{ page.date | readableDate }}/time调用htmlDateString与readableDate两个过滤器由luxon日期库提供输出标准datetime属性与人类可读日期标签循环tags | filterTagList过滤掉内部标签如posts后为每个标签生成指向/tags/{{ tag | slug }}/的链接slug过滤器把标签文本转为 URL 友好的 slug正文注入{{ content | safe }}把 Markdown 正文含## Section Header与站内链接经 markdown-it 解析后的 HTML 原样注入上一篇/下一篇导航借助collections.posts | getNextCollectionItem(page)与getPreviousCollectionItem(page)过滤器自动生成文章间的 Next/Previous 导航。布局是嵌套的post.njk自身的 Front Matter 声明layout: layouts/base.njk即文章模板会被包裹进 base.njk 提供的最外层 HTML 结构html、head、导航等。这与README.md中描述的三层布局体系一致base.njk顶层结构→home.njk/post.njk页面模板→ 具体内容。四、全局数据与站点元信息文章中的description等字段可以与全局数据配合使用。站点的全局元信息定义在 _data/metadata.json{ title: Your Blog Name, url: https://example.com/, language: en, description: I am writing about my experiences as a naval navel-gazer., feed: { subtitle: I am writing about my experiences as a naval navel-gazer., filename: feed.xml, path: /feed/feed.xml, id: https://example.com/ }, jsonfeed: { path: /feed/feed.json, url: https://example.com/feed/feed.json }, author: { name: Your Name Here, email: youremailaddressexample.com, url: https://example.com/about-me/ } }_data/目录下的 JSON 文件会自动注入到模板的全局数据命名空间这里即metadata变量。例如 feed/feed.njk 与feed/json.njk就引用metadata.feed、metadata.jsonfeed与metadata.author生成 RSS Feed 与 JSON Feed这正是 README 中提到的全局数据文件用法。url字段同时被url过滤器用作路径基准——secondpost.md中{{ /posts/firstpost/ | url }}的最终输出地址正是基于该字段计算得出的。五、构建命令与 Vercel 零配置部署将secondpost.md这样的文章从源码变为线上页面构建过程由 examples/eleventy/package.json 中的 scripts 驱动scripts: { build: eleventy, watch: eleventy --watch, serve: eleventy --serve, start: eleventy --serve, debug: DEBUG* eleventy }README 中给出了完整的本地工作流npm install安装依赖 → 编辑_data/metadata.json配置站点信息 → 使用npx eleventy执行构建或通过npx eleventy --serve启动本地开发服务器、npx eleventy --watch在模板变更时自动重建、DEBUG* npx eleventy进入调试模式。该示例仓库被设计为可直接部署到 VercelREADME.md明确说明这是一个zero configuration零配置部署的 Eleventy 站点。Vercel 会自动检测到该项目的 Eleventy 构建配置基于package.json中的build脚本与输出目录约定执行构建后发布为静态站点本地预览时--serve提供的开发服务器与线上产物行为一致。这也意味着secondpost.md中## Section Header这类 Markdown 结构、Nunjucks 链接与 Front Matter 元数据在 Vercel 的构建环境中都会被 Eleventy 完整解析并输出为静态 HTML无需额外的服务端运行时配置。六、实战要点小结写新文章在 examples/eleventy/posts 目录下新建.md文件复制secondpost.md的 Front Matter 骨架填写title、description、date、tags与layout进入归档文章无需手动登记只要它位于posts/目录经 posts.json 自动获得posts标签就会自动出现在 index.njk 首页、archive.njk 归档页和 tags.njk 标签页中站内互链使用{{ /posts/xxx/ | url }}形式生成带基础路径前缀的链接而不是硬编码绝对 URL文章导航上一篇/下一篇由post.njk布局基于collections.posts自动生成无需手写上线npx eleventy本地验证构建产物后推送到 Git 仓库即可由 Vercel 零配置完成构建与发布。【免费下载链接】vercelDevelop. Preview. Ship.项目地址: https://gitcode.com/gh_mirrors/ve/vercel创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考