Eleventy 静态站

Eleventy（11ty） 是 模板引擎驱动的静态站点生成器，没有默认「组件框架 runtime」。Markdown、Nunjucks、Liquid 等模板 + 数据文件 → 输出 HTML。适合个人博客、活动页、与 html-css-essentials 纯静态技能直接衔接。

学习目标

• 理解 11ty 的输入目录、模板与输出
• 会用 _data 与 frontmatter 注入列表数据
• 对比 Eleventy 与 Astro / Next.js SSG

最小结构

.
├── .eleventy.js          # 配置
├── src/
│   ├── _includes/        # 布局片段
│   ├── _data/            # 全局 JSON/JS 数据
│   │   └── tracks.json
│   └── tracks.njk        # 列表页
└── _site/                # 构建输出

// .eleventy.js
export default function (eleventyConfig) {
  return { dir: { input: "src", output: "_site" } };
}

数据文件

src/_data/tracks.json：

[
  { "slug": "react-essentials", "title": "React 核心" },
  { "slug": "vue-essentials", "title": "Vue 核心" }
]

模板 tracks.njk：

{% for t in tracks %}
  <li><a href="/tracks/{{ t.slug }}">{{ t.title }}</a></li>
{% endfor %}

全局数据自动注入所有模板；单页可用 frontmatter 覆盖。思路接近 Astro Content Collections，但 无 Islands、无 .jsx——交互靠少量 vanilla JS 或外链 react-essentials 子应用。

何时选 11ty

选 Eleventy	选 Astro / SvelteKit
几乎全是 Markdown/HTML	需要 React/Vue 组件岛
团队熟悉 Nunjucks	需要统一 Vite 生态
极致简单、零 client 框架	需要 SSR 或 API 路由

与 frontend-toolchain-essentials 配合：npx @11ty/eleventy --serve 本地预览，--output=_site 后上传静态托管（见 ft-deploy）。

练习

• 初始化 11ty 项目，用 JSON 渲染三条 track 链接
• 抽 _includes/layout.njk，给 Markdown 页套同一 <head>
• 说明：若要在页内加复杂表单，你会选 11ty 还是 Astro？一条理由

小结

Eleventy = 模板 + 数据 → 静态 HTML，框架负担最小。 下一课抽象 SSG 概念，并对照 Next.js。