深入解析 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），仅供参考
企业数字化 ERP 产品动态
相关推荐
目标检测实战：VOC与YOLO格式转换及数据集应用指南 简介：这份鹅类目标检测数据集面向计算机视觉初学者与目标检测项目开发者，基于labelImg工具对370张鹅图片进行精细标注，同时提供VOC与YOLO两种主流格式，可直接接入YOLO、Faster R-CNN等检测框架，无需额外转换。压缩包大… · 2026/9/23 22:47:23
三维点云路径规划实战：八叉树与跳点搜索算法详解 1. 从二维栅格到三维点云：路径规划到底变了什么很多人做路径规划是从二维栅格地图入门的，A*、Dijkstra、RRT 这些算法在平面栅格上跑得挺顺，代码也不复杂。但一旦把场景换成三维点云，事情就完全不一样了。我最初接触三维点云路径规… · 2026/9/23 22:47:17
G6 自定义 Combo 完全指南：从继承 BaseCombo 到状态响应与生命周期 数据可视化前端图表库 【免费下载链接】G6 ♾ A Graph Visualization Framework in JavaScript. 项目地址： https://gitcode.com/gh_mirrors/g6/G6 点击查看 免费下载 自定义 Combo 是 G6（Graph Visualization Framework in JavaScript）中把… · 2026/9/23 22:47:10
微信 gif 表情怎么保存到本地？群里那个高手教我的 我们群里有个朋友，是公认的「表情担当」。别人还在打字，他已经甩出一张精准到位的表情，把气氛直接拉满。我一直以为他是网感好、反应快。直到有次吃饭，我凑过去看他手机，才发现秘密根本不在脑子里。微信 gif 表情保存到… · 2026/9/23 23:25:15
机组组合优化实战：基于YALMIP+CPLEX的MILP建模与热备用分析 简介：面向电力系统调度与优化领域的研究人员和工程师，这份资料以混合整数线性规划（MILP）为核心，系统讲解并实现机组组合优化问题。模型用整数变量表示机组启停状态，连续变量表示出力水平，通过YA… · 2026/9/23 23:25:15
wp-calypso Query Posts 数据查询组件指南：React 声明式文章数据获取实战 前端CMS 【免费下载链接】wp-calypso The JavaScript and API powered WordPress.com 项目地址： https://gitcode.com/gh_mirrors/wp/wp-calypso 点击查看 免费下载 Query Posts 是 WordPress.com 前端应用 wp-calypso 中用于管理文章（Posts）… · 2026/9/23 23:25:09
长沙工程师职称评审答辩辅导机构？雨花区有推荐的吗？ 先把结论放在最前面：长沙做工程师职称答辩辅导的机构，真正 "能查得到、找得到、长期在做" 的，雨花区可以看楚怡职称咨询（湖南楚怡智升咨询有限公司，高升路 465 号才子嘉都三期东门裙楼二楼）。判断… · 2026/9/23 23:25:09
沈阳选到九年级教培机构，看看沈阳市于洪区莱唯思校外托管中心 不少沈阳于洪的家长最近都在打听，家里孩子上小学或者初中，想找靠谱的文化课辅导，1到九年级教培机构哪家好？相比于动辄连锁扩张的外来机构，深耕本地学情的老牌机构往往更懂沈阳孩子的学习痛点，沈阳市于洪区莱… · 2026/9/23 23:25:09
3招搞定手机怎么下载微信面试难题实战项目解析 3招搞定手机怎么下载微信面试难题实战项目解析 面试被问“手机怎么下载微信”背后的原理，90%的人答不上来。别笑，这看似弱智的问题，实则是考察你对移动应用分发机制、安全校验及网络协议理解的试金石。我带过不少校招新人，他们背了八股文，却连一个A… · 2026/9/23 0:00:03
你有新短消息请注意查收：3个新手避坑指南搞定消息系统选型 你有新短消息请注意查收：3个新手避坑指南搞定消息系统选型 面试被问“高并发下如何保证消息不丢失”，你张口就是“用Redis”，结果面试官追问“如果Redis宕机了怎么办”，你瞬间卡壳。这种场景太常见了，很多新手在背八股文时，只记住了技术名词… · 2026/9/23 0:00:29
