Eleventy (11ty)：现代静态站点生成器的全面指南
Eleventy（也称为 11ty）是一个简单灵活的静态站点生成器，它允许你使用你选择的模板语言来构建快速且高性能的网站。它的核心优势在于极简的设计理念和强大的可扩展性，使其成为从小型个人博客到大型企业网站的理想选择。本文将深入探讨 Eleventy 的各个方面，帮助你快速上手并充分利用其潜力。
什么是 Eleventy？
Eleventy 是一个 JavaScript 静态站点生成器，它将模板文件和数据转换为完全可部署的 HTML。 与其他一些更重量级的框架不同，Eleventy 强调简单性和灵活性。它对模板引擎和项目结构没有严格的要求，允许开发者自由选择最适合自己需求的技术栈。
Eleventy 的核心特点
- 简单易用： 学习曲线平缓，上手快。
- 灵活自由： 支持多种模板语言 (如 Liquid, Nunjucks, Handlebars, Mustache, EJS, Haml, Pug, Markdown)。
- 高性能： 生成的静态网站加载速度极快。
- 可扩展性： 丰富的插件生态系统，方便扩展功能。
- 无 JavaScript 客户端运行时： 生成的网站不需要额外的 JavaScript 依赖，减少了复杂性和提高了性能。
- 数据驱动： 支持从 JSON, JavaScript, YAML, CSV 等多种数据源导入数据。
为什么选择 Eleventy？
在众多的静态站点生成器中，Eleventy 凭借其独特的优势脱颖而出：
- 性能优化： 生成的静态网站天然具有高性能，无需额外的优化。
- 开发效率： 灵活的配置和强大的模板引擎提高了开发效率。
- 可维护性： 清晰的项目结构和简单的代码风格易于维护。
- SEO 友好： 静态网站更容易被搜索引擎抓取和索引。
- 安全性： 由于没有数据库交互和服务器端代码，静态网站更加安全。
Eleventy 入门：快速开始
以下是如何开始使用 Eleventy 的简单步骤：
- 安装 Node.js 和 npm： 确保你的系统上已经安装了 Node.js 和 npm (Node Package Manager)。你可以从 Node.js 官网 下载安装包。
- 创建项目目录： 创建一个新的目录来存放你的 Eleventy 项目。
- 初始化 npm 项目： 在项目目录下运行
npm init -y命令来创建一个package.json文件。 - 安装 Eleventy： 运行
npm install @11ty/eleventy --save-dev命令来安装 Eleventy。 - 创建第一个页面： 创建一个名为
index.html的文件，并添加一些 HTML 内容。 - 运行 Eleventy： 在项目目录下运行
npx @11ty/eleventy命令来生成静态网站。 - 查看生成的网站： 默认情况下，Eleventy 会将生成的网站输出到
_site目录。你可以使用任何静态服务器来查看生成的网站。
Eleventy 配置文件 (.eleventy.js)
.eleventy.js 文件是 Eleventy 的核心配置文件。你可以在这个文件中配置 Eleventy 的各种选项，例如：
- 输入和输出目录： 指定 Eleventy 读取模板文件和输出生成文件的目录。
- 模板引擎： 配置 Eleventy 使用的模板引擎。
- 插件： 注册和配置 Eleventy 插件。
- 自定义过滤器： 创建自定义的模板过滤器。
- 自定义短代码： 创建自定义的模板短代码。
常用的配置选项
以下是一些常用的 .eleventy.js 配置选项：
module.exports = function(eleventyConfig) { // 设置输入目录 eleventyConfig.addPassthroughCopy("static"); // 设置输出目录 return { dir: { input: ".", output: "_site" } };};在上面的例子中，我们将输入目录设置为当前目录 (.)，将输出目录设置为 _site。 eleventyConfig.addPassthroughCopy("static"); 这行代码将 static 文件夹中的所有文件复制到输出目录，不会进行任何转换处理。
Eleventy 模板语言
Eleventy 支持多种模板语言，包括：
- Liquid
- Nunjucks
- Handlebars
- Mustache
- EJS
- Haml
- Pug
- Markdown
你可以根据自己的喜好和项目需求选择合适的模板语言。 Eleventy 会自动检测文件的扩展名，并使用相应的模板引擎进行处理。
Liquid 示例
以下是一个使用 Liquid 模板语言的示例：
<!DOCTYPE html><html><head> <title>{{ title }}</title></head><body> <h1>{{ title }}</h1> <p>{{ content }}</p></body></html>在这个例子中，{{ title }} 和 {{ content }} 是 Liquid 变量，它们会在生成网站时被替换为实际的值。
Eleventy 数据
Eleventy 支持从多种数据源导入数据，包括：
- JSON
- JavaScript
- YAML
- CSV
你可以将数据存储在单独的文件中，然后在模板中使用这些数据。 这使得你可以轻松地管理和更新网站的内容。
JSON 数据示例
假设你有一个名为 data.json 的 JSON 文件，内容如下：
{ "title": "我的博客", "description": "这是一个关于技术的博客"}你可以在模板中使用 data.json 文件中的数据：
<!DOCTYPE html><html><head> <title>{{ data.title }}</title> <meta name="description" content="{{ data.description }}"></head><body> <h1>{{ data.title }}</h1> <p>{{ data.description }}</p></body></html>Eleventy 插件
Eleventy 拥有丰富的插件生态系统，可以帮助你扩展 Eleventy 的功能。 插件可以用来处理各种任务，例如：
- 代码高亮
- 图片优化
- 自动生成目录
- 支持 RSS 订阅
常用的插件
以下是一些常用的 Eleventy 插件：
@11ty/eleventy-plugin-syntaxhighlight：用于代码高亮。eleventy-plugin-html-minifier：用于压缩 HTML 文件。@11ty/eleventy-plugin-rss：用于生成 RSS 订阅。
要使用插件，你需要在 .eleventy.js 文件中注册它：
const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");module.exports = function(eleventyConfig) { eleventyConfig.addPlugin(syntaxHighlight); return { dir: { input: ".", output: "_site" } };};Eleventy 最佳实践
以下是一些使用 Eleventy 的最佳实践：
- 保持简单： 尽量保持项目的简单性，避免过度设计。
- 使用版本控制： 使用 Git 等版本控制系统来管理你的代码。
- 自动化部署： 使用 CI/CD 工具来自动化部署你的网站。
- 优化性能： 优化你的图片和代码，以提高网站的性能。
- 定期更新： 定期更新 Eleventy 和插件，以获得最新的功能和安全补丁。
Eleventy 与其他静态站点生成器对比
以下表格对比了 Eleventy 与其他流行的静态站点生成器：
| 特征 | Eleventy | Jekyll | Gatsby | Hugo |
|---|---|---|---|---|
| 编程语言 | JavaScript | Ruby | JavaScript (React) | Go |
| 易用性 | 高 | 中 | 中 | 中 |
| 灵活性 | 高 | 中 | 低 | 高 |
| 性能 | 高 | 中 | 高 | 非常高 |
| 生态系统 | 中 | 高 | 非常高 | 高 |
Eleventy 资源
以下是一些有用的 Eleventy 资源：
- Eleventy 官方网站
- Eleventy 官方文档
- Eleventy GitHub 仓库
- Eleventy 官方博客
希望本文能够帮助你了解和使用 Eleventy。祝你使用 Eleventy 构建出色的静态网站！想要了解更多关于静态站点生成器的信息，欢迎访问我们的网站。