什么是 Eleventy（11ty）
Eleventy，也称为 11ty，是一个基于 JavaScript 的静态网站生成器（Static Site Generator，SSG）。它可以将 Markdown、HTML、模板语言与数据文件等内容编译成静态的 HTML/CSS/JS 文件，以便部署到静态托管服务或内容分发网络（CDN）上，无需动态后端或数据库。Eleventy 通常追求“静态优先”（static-first）的设计哲学，也就是说尽可能地生成静态资源以提升性能和安全性。
Eleventy 支持多种模板语言（如 Markdown、Nunjucks、Liquid、Handlebars 等），并允许在一个项目中混合使用不同模板语言。它的出发点是零配置（zero-config）即可快速开始，同时提供配置文件以灵活定制项目结构与行为。
为什么选择 Eleventy
- 快速构建与高性能：生成的是静态文件，页面加载快，部署简便。
- 灵活的模板支持：可以选择多种模板语言，也能混合使用，降低学习曲线。
- 可配置性强：输入目录（input）、输出目录（output）、忽略文件、模板格式、静态资源处理等都可调。
- 内容驱动（content-first）：适合博客、文档、个人作品集等内容型网站。
- 社区与生态：插件支持、扩展性好，文档齐全。
环境准备与安装
1. 安装 Node.js
Eleventy 需要 Node.js 运行环境。推荐使用 Node.js 的较新版本（例如版本 18 或更高）。
2. 初始化项目
在你希望存放项目的目录中运行：
npm init -y这样会生成一个默认的 package.json 文件。
3. 安装 Eleventy
将 Eleventy 添加为开发依赖：
npm install --save-dev @11ty/eleventy4. 运行 Eleventy
安装好后，可以使用如下命令进行静态站点的构建（build）：
npx @11ty/eleventy若希望启动本地开发服务器，并监听文件变动以即时刷新，则使用：
npx @11ty/eleventy --serve项目结构与基础配置
默认情况下，Eleventy 会把输入目录下的 Markdown、HTML 等支持的模板文件，处理后输出到默认文件夹 _site（或可以在配置中修改）。你可以创建如下简单的项目结构：
project/
├── src/ # 可选，作为内容输入目录
│ ├── index.md
│ ├── about.md
│ └── …
├── .eleventy.js # 项目配置文件（可选）
├── package.json
└── …
.eleventy.js 配置示例
以下是一个基础 .eleventy.js 示例，用来定制输入、输出目录，静态资源 passthrough，以及定义模板格式等：
module.exports = function(eleventyConfig) {
return {
dir: {
input: "src",
output: "public",
includes: "_includes",
layouts: "_layouts"
},
templateFormats: ["md", "njk", "html", "liquid"]
};
// 将 CSS、静态资源等原样复制到输出目录
eleventyConfig.addPassthroughCopy("src/css");
eleventyConfig.addPassthroughCopy("src/assets");
};
模板、布局与静态资源处理
模板语言
Eleventy 支持多种模板引擎，如 Markdown（.md）、Nunjucks（.njk）、Liquid、Handlebars、甚至 WebC。你可以为不同页面选择不同模板，或统一使用一种。
布局（Layouts）与部分模板（Partials）
布局文件通常用于定义网站中共用的结构，例如头部、导航栏、页脚。部分模板则是布局或页面中可复用的小组件，如导航菜单、页脚内容等。
Front Matter（头部元信息）
在 Markdown 或 HTML 文件开头常会放 Front Matter，用于定义页面标题、日期、标签、布局等元数据。
示例：
---
title: 关于我
layout: layouts/base.njk
---
# 关于我
这是我的个人简介。
静态资源与 Passthrough Copy
CSS、图片、字体等资源一般不会被 Eleventy 作为模板处理，但你希望它们原样复制到输出目录。这时使用 eleventyConfig.addPassthroughCopy() 方法。例如，将 src/assets、src/css 等文件夹复制过去。
高级功能：集合、短代码、数据文件与插件
集合（Collections）
Eleventy 允许你把一组内容（例如多个 Markdown 文件）归类为一个集合，然后在模板中遍历这些内容，生成标签云、博客列表、项目列表等。例如：
eleventyConfig.addCollection("posts", function(collectionApi) {
return collectionApi.getFilteredByGlob("src/posts/*.md");
});
然后在模板中：
{% for post in collections.posts %}
<li><a href="{{ post.url }}">{{ post.data.title }}</a></li>
{% endfor %}
短代码（Shortcodes）
用来定义可重用的小功能或动态内容，比如显示当前年份、插入某种复杂 HTML 块等。例如：
eleventyConfig.addShortcode("year", function() {
return `${new Date().getFullYear()}`;
});
在模板中可以写 {{ year() }} 来调用。
数据文件（Data Files）
你可以在项目中放置 .json、.js 或其他格式的数据文件，这些数据可以被模板访问。例如 src/_data/site.json 中定义站点名称、作者等，然后在布局或页面模板中用 site.name 引用。
插件（Plugins）与过滤器（Filters）
Eleventy 有社区维护的插件，可以扩展功能：例如图像处理、导航菜单、RSS 等。过滤器则可以在模板中对变量做处理，如格式化日期、生成 slug、处理字符串等。
实战示例：构建一个简单博客／作品集
下面是大致步骤，用于实践 Eleventy：
1. 创建项目目录并初始化。
2. 安排目录结构，例如：
src/
posts/
post1.md
post2.md
pages/
about.md
layouts/
base.njk
assets/
css/
3. 写布局文件 src/layouts/base.njk，包括 <head>、导航、内容插槽、页脚等。
4. 写页面模板，例如 src/pages/about.md，在 front matter 中指定 layout: base.njk。
5. 写博客文章文件，如 src/posts/post1.md，包含标题、日期、标签等元信息；在 layout 中有文章列表页链接到这些文章。
6. 配置 .eleventy.js，指定 input 为 src，output 为 public 或 _site，设置 passthrough 复制静态资源。
7. 启动开发服务器：npx @11ty/eleventy --serve，在浏览器检查页面和样式。
8. 构建发布版本：npx @11ty/eleventy，将输出目录内容上传到托管服务。
部署与发布建议
- 构建输出后的静态文件可以部署到任意静态托管服务或 CDN，如 Netlify、Vercel、GitHub Pages、Cloudflare Pages 等。
- 使用版本控制（如 Git）管理源代码与内容。
- 若内容频繁更新，可结合 CI/CD 管道，在内容或模板变更时自动触发 Eleventy 构建。
- 优化静态资源，如图像压缩、CSS 与 JS 的最小化。
- 考虑 SEO 元素：每个页面应包含合适的标题 <title>、meta 描述（description）、合理的 URL 构造、语义化 HTML 标签。Eleventy 的模板与 Front Matter 能很好支持这些。
注意事项与最佳实践
- 保持项目结构清晰，例如统一放置 layouts、partials、数据文件等。
- 为静态资源设置合理的路径与缓存策略。
- 小心处理忽略文件与目录，例如 .eleventyignore 可以用来排除不必要文件。
- 当项目变大时，分模块管理模板（partials／组件）会提升维护性。
- 写模板逻辑时尽量简单，不要把过多逻辑塞进模板里；复杂逻辑可以放在数据文件或短代码里。
总结
Eleventy（11ty）是一个非常适合内容型网站的静态网站生成器，它提供高性能、灵活性和可扩展性，能够让你以 Markdown、模板、数据等为核心快速搭建站点。无论是博客、个人作品集、文档站，Eleventy 都能胜任。如果你追求速度、安全、简单，以及代码与内容的清晰分离，Eleventy 是一个值得尝试的工具。