Eleventy 2 博客文章模板实战：以 Vercel 静态构建测试夹具为例解析 Markdown 前置元数据与内容编排

Eleventy 2 博客文章模板实战以 Vercel 静态构建测试夹具为例解析 Markdown 前置元数据与内容编排【免费下载链接】vercelDevelop. Preview. Ship.项目地址: https://gitcode.com/gh_mirrors/ve/vercel本指南以 Vercel 开源仓库中packages/static-build的 Eleventy 2 测试夹具为对象深入讲解posts/secondpost.md这类博客文章如何通过 Front Matter前置元数据驱动 Eleventy 的布局、标签与日期体系并串联文章间互相链接、代码高亮与静态站点构建。读完本文你将掌握 Eleventy 博客文章的标准写作规范、与layouts/post.njk及集合collection机制的配合方式并能把同样模式直接复用于自己的 Eleventy 2 项目或在 Vercel 上部署的静态博客。背景这篇文章来自哪里本文讨论的文件位于当前仓库的静态构建测试夹具中夹具根目录packages/static-build/test/fixtures/eleventy-2目标文章posts/secondpost.md该目录是一个以 eleventy-base-blog 为蓝本的 Eleventy 博客示例被 Vercel 的static-build包用作构建测试素材。从 package.json 可以看到它依赖11ty/eleventy^2.0.0锁文件中对应 2.0.1、11ty/eleventy-plugin-rss、11ty/eleventy-plugin-syntaxhighlight等插件这决定了下文所有语法与行为均以 Eleventy 2.x 为基准。它既是一个可独立运行的真实博客站点也是验证静态构建器能否正确处理多页面、集合、标签与资源拷贝的最小化样本。文章的完整内容与结构secondpost.md全文如下含 YAML 前置元数据--- 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 --- Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. ## Section Header a href{{ /posts/firstpost/ | url }}First post/a a href{{ /posts/thirdpost/ | url }}Third post/a Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring. Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.结构拆解文章由三部分组成Front MatterYAML 前置元数据---之间声明title、description、date、tags和layout是 Eleventy 数据层data cascade中页面级数据的主要来源。Markdown 正文若干段落 一个## Section Header二级标题。Nunjucks 模板表达式正文内嵌的a href{{ /posts/firstpost/ | url }}与a href{{ /posts/thirdpost/ | url }}用于在页面间建立导航链接。逐字段解析前置元数据字段示例值作用titleThis is my second post.文章标题在post.njk中渲染为h1并被base.njk用作title与 feed 标题descriptionThis is a post on My Blog about leveraging agile frameworks.页面描述base.njk中回退链为renderData.description or description or metadata.descriptiondate2018-07-04发布日期用于文章排序与归档tagsnumber-2加入集合的标签结合 posts/posts.json 中的目录级标签postslayoutlayouts/post.njk指定内容包裹模板对应_includes/layouts/post.njktitle 与 description 的渲染链_includes/layouts/post.njk中h1{{ title }}/h1直接把title输出为一级标题文章被套入_includes/layouts/base.njk后title与meta nameDescription分别使用{{ renderData.title or title or metadata.title }}与{{ renderData.description or description or metadata.description }}。也就是说页面前置元数据优先其次才是全局_data/metadata.json这正是 Eleventy 数据级联data cascade的直观体现。date 与标签的作用date驱动文章在集合中的排序。eleventy-base-blog 约定博客文章放在posts/目录且 posts/posts.json 为整个目录统一注入了{tags: [posts]}因此secondpost.md实际携带两个标签来自目录级数据的posts与来自页面级数据的number-2。在标签页与归档页number-2这类业务标签会被 _11ty/getTagList.js 收集见下文而posts、post、nav、all属于“结构标签”在 getTagList.js 中被过滤不会出现在标签云中。布局系统从 post 到 base 的两级包裹文章声明的layout: layouts/post.njk指向packages/static-build/test/fixtures/eleventy-2/_includes/layouts/post.njk--- layout: layouts/base.njk templateClass: tmpl-post --- h1{{ title }}/h1 {{ content | safe }} pa href{{ / | url }}← Home/a/p要点布局可嵌套post.njk自身的前置元数据声明layout: layouts/base.njk所以实际渲染顺序是「Markdown 内容 → post.njk → base.njk」形成两级包裹。{{ content | safe }}Markdown 编译后的 HTML 通过该变量注入| safe关闭自动转义。templateClass: tmpl-post写入main classtmpl-post用于文章页专属样式。首页回链底部固定输出← Home链接借助{{ / | url }}生成根路径 URL。而最外层的 base.njk 负责完整 HTML 骨架head中的title、Descriptionmeta、两份 CSS/css/index.css与代码高亮用的prism-base16-monokai.dark.css、Atom feed 的link relalternate以及header中基于collections.nav渲染的顶部导航。集合机制文章如何被“发现”Eleventy 中带tags的内容会自动进入同名集合collection。结合本夹具secondpost.md会同时出现在collections.posts来自目录级数据 posts/posts.json 的posts标签。归档页 archive.njk 与首页 index.njk 即通过它列出全部文章。collections.number-2来自页面级tags: [number-2]。每个业务标签会在 tags.njk 下生成独立的/tags/tag/分页页面。collections.tagList由 getTagList.js 注册的集合遍历collection.getAll()汇总所有业务标签供 tags-list.njk 渲染标签云。由此可推断这篇示例文章是验证「同一内容同时归属多个集合、并被不同页面重复消费」的标准样本这正是 Eleventy 集合系统的核心用法。站内链接url filter 与 permalink 的配合secondpost.md正文中的两个链接使用了 Nunjucks 表达式a href{{ /posts/firstpost/ | url }}First post/a a href{{ /posts/thirdpost/ | url }}Third post/a| url是 Eleventy 内置过滤器它会读取项目配置中的pathPrefix并对路径做规范化处理确保部署在子路径如https://site.com/blog/时链接前缀仍然正确——这是相对路径硬编码无法做到的。目标/posts/firstpost/、/posts/thirdpost/是文章按posts/目录结构生成的 permalinkEleventy 默认将 Markdown 文件输出为目录索引页因此firstpost.md产出/posts/firstpost/index.html。本夹具的四个帖子构成一个互联网络firstpost.md2018-05-01secondpost.md2018-07-04链接到 firstpost 与 thirdpostthirdpost.md2018-08-24fourthpost.md2018-09-30这种「正文中通过url过滤器互相引用」的写法也间接验证了静态构建器必须正确解析所有输出 HTML 之间的相对引用关系。代码高亮与 Markdown 渲染细节虽然secondpost.md本身没有代码块但同目录文章展示了该夹具对代码块的约定值得作为写作规范一并掌握带行号高亮firstpost.md使用text/2-3高亮第 2–3 行thirdpost.md使用js/2/4高亮第 2 行与第 4 行。插件支撑这两处语法依赖11ty/eleventy-plugin-syntaxhighlight见 package.json样式由prism-base16-monokai.dark.css提供在 base.njk 中被引用。Markdown 配置devDependencies中还包含markdown-it与markdown-it-anchor表明示例博客通过 markdown-it 渲染 Markdown 并为标题生成锚点。如何运行这个示例在夹具目录中执行npm install npm run build # 等价于 npx eleventy输出到 _site/ npm run watch # npx eleventy --watch文件变化时自动重建 npm run debug # DEBUG* eleventy输出详细调试日志或直接npx eleventy --serve # 本地起服务并支持热重载预览构建产物默认落在_site/目录包含所有文章页、/tags/标签页、/feed/feed.xml由 feed/feed.njk 生成与按原结构拷贝的css/、img/等静态资源。这也是它在packages/static-build测试中作为“可被通用静态构建器完整产物化”的样本被使用的原因。参考文件清单本文主题posts/secondpost.md文章布局posts/post.njk 所引用的 layouts/post.njk注实际文件为_includes/layouts/post.njk最外层布局base.njk目录级数据posts/posts.json全局站点数据metadata.json标签集合逻辑getTagList.js标签列表页tags-list.njk项目依赖package.json 与 README.md围绕这些文件你可以完整还原「一篇文章从 Markdown 原稿到最终 HTML 页面」的 Eleventy 渲染全链路并把同样的 Front Matter 规范与布局约定迁移到自己的 Eleventy 2 项目中。【免费下载链接】vercelDevelop. Preview. Ship.项目地址: https://gitcode.com/gh_mirrors/ve/vercel创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考