Eleventy（通常简称为 11ty）是一个基于 Node.js 的静态网站生成器（Static Site Generator, SSG），它以其卓越的简单性、灵活性和高性能而闻名。与许多大型前端框架不同，Eleventy 专注于将模板文件和数据高效地转换为纯静态 HTML，默认不向浏览器发送任何客户端 JavaScript，从而为内容驱动型网站提供了极致的加载速度和优异的用户体验。

主要特性

Eleventy 的设计哲学是“不碍事”（gets out of your way），它提供了一套强大而灵活的工具集，让开发者能够完全掌控网站的构建过程。

  1. 无与伦比的模板引擎灵活性： Eleventy 的标志性特性是其对多种模板语言的原生支持，并允许在同一个项目中混合使用。开发者可以根据个人偏好或项目需求，自由选择 Liquid、Nunjucks、Handlebars、Mustache、EJS、JavaScript Template Literals (11ty.js) 甚至 Markdown 等多达十余种模板语言。最近引入的 WebC 组件格式进一步增强了这种能力。
  2. 强大的数据级联（Data Cascade）： Eleventy 拥有一个强大的数据处理系统，能够从全局数据文件（如 _data 目录下的 JSON 或 JS 文件）、目录数据文件（*.11tydata.js）以及模板前置数据（Front Matter）中聚合数据。这种机制使得数据管理和内容组织变得极其灵活，但理解其优先级和合并规则可能需要一定的学习曲线。
  3. 默认即高性能： 由于其“零客户端 JS”的默认设置和纯静态输出，使用 Eleventy 构建的网站通常开箱即具备顶级的性能指标，如 Google 的 Core Web Vitals。开发者几乎无需进行复杂的性能优化，就能获得极快的加载速度和首次交互时间（TTI）。
  4. 零客户端 JavaScript 哲学： Eleventy 的核心设计理念是尽可能减少客户端 JavaScript。这意味着生成的 HTML 文件非常轻量，浏览器加载和渲染速度极快，为用户提供了流畅的浏览体验。
  5. 高度可扩展的插件系统： Eleventy 提供了一套清晰的配置 API (eleventyConfig)，允许开发者通过插件添加过滤器（Filters）、短代码（Shortcodes）、集合（Collections）和转换（Transforms）等功能。官方维护了一系列高质量的插件，如 @11ty/eleventy-img 用于图像优化，@11ty/eleventy-plugin-syntaxhighlight 用于代码高亮，极大地扩展了其功能。

安装与快速入门

Eleventy 的安装和启动非常简单，因为它是一个 Node.js 包。

  1. 初始化项目并安装 Eleventy：
    bash
    mkdir my-eleventy-site
    cd my-eleventy-site
    npm init -y
    npm install -D @11ty/eleventy

  2. 创建第一个模板文件：
    在项目根目录创建一个 index.md 文件：
    “`markdown
    —
    title: “我的第一个 Eleventy 网站”
    layout: “base.njk”
    —
    # 欢迎来到 Eleventy！

    这是一个使用 Eleventy 构建的简单静态页面。
    再创建一个 `_includes/base.njk` 布局文件（如果使用 Nunjucks）：nunjucks
    <!DOCTYPE html>




    {{ title }}

    {{ title }}


    {{ content | safe }}

    © {{ “now” | date(“yyyy”) }} 我的网站



    3. **运行 Eleventy 开发服务器：**bash
    npx @11ty/eleventy –serve
    “`
    Eleventy 将在本地启动一个开发服务器，并监听文件变化进行热重载。
    更多详细的配置和入门指南，请查阅 Eleventy 官方文档。

典型使用场景

Eleventy 在以下内容驱动型网站的构建中表现出色：

  • 个人博客与数字花园： 凭借其对 Markdown 的原生支持和灵活的数据处理能力，Eleventy 是构建个人博客、知识库或“数字花园”的理想选择。
  • 项目文档与教程网站： 快速的构建速度和清晰的结构使其非常适合生成技术文档、API 参考或在线教程。
  • 作品集与小型营销网站： 对于需要展示作品、提供公司信息或产品介绍的网站，Eleventy 能够提供卓越的性能和 SEO 优势。
  • 静态电商展示页： 虽然不适合复杂的电商功能，但 Eleventy 可以用于构建产品目录、登陆页面或促销活动页。

用户评价与社区反馈

Eleventy 在开发者社区中获得了广泛好评，但也存在一些常见的挑战。

核心优势：

  • 极致的简单性和“无干扰”哲学： 用户普遍赞赏 Eleventy 的核心理念是“简单”。它专注于将模板和数据转换为静态 HTML 文件，不强加复杂的框架或客户端运行时，让开发者能够专注于内容本身。
  • 无与伦比的模板引擎灵活性： 能够在一个项目中混合使用多种模板语言，为开发者提供了极大的自由度，可以根据任务选择最熟悉的工具。
  • 默认即高性能： 由于其纯静态输出和零客户端 JS 的特性，Eleventy 构建的网站通常开箱即具备顶级的性能指标，加载速度极快。

核心挑战：

  • 数据处理的“数据级联”存在学习曲线： 尽管数据级联系统非常强大，但理解数据在不同阶段如何合并、覆盖和优先级排序，对于新用户来说可能需要一些时间来掌握。
  • 无内置的资产处理管道： Eleventy 本身不处理 CSS 或 JavaScript 的编译、打包或优化。这意味着开发者需要手动集成 Vite、esbuild、PostCSS 等工具来处理现代前端资产，增加了初始配置的复杂性。
  • 生态系统和插件市场相对较小： 与 Gatsby 或 Next.js 等大型框架相比，Eleventy 的官方和社区插件数量较少。对于一些复杂或特定的集成，可能需要开发者自己编写解决方案。

与类似工具对比

在静态网站生成器领域，Eleventy 有一些强大的竞争对手。理解它们之间的差异有助于选择最适合项目的工具。

  • Eleventy：

    • 核心哲学： 纯粹的静态网站生成器，专注于将模板和数据编译为 HTML。默认无客户端 JavaScript 运行时。
    • 性能： 极快的构建速度，0KB 客户端 JS，在 JavaScript SSG 中表现出色。
    • 开发体验： 极度灵活，无约定，开发者可自由选择模板语言和前端工具链。
    • 最佳用例： 内容为王、对性能要求极致且交互逻辑简单的博客、文档、作品集等。

  • Hugo：

    • 核心哲学： 基于 Go 语言构建的静态网站生成器，追求极致的构建速度。
    • 性能： 在原始构建速度上通常是所有 SSG 中的“王者”，尤其在处理海量页面时。
    • 开发体验： 使用 Go 模板，生态系统相对独立于 JavaScript。
    • 最佳用例： 对构建速度有最高要求的大型纯静态网站。

  • Astro：

    • 核心哲学： 面向内容的网站框架，采用“岛屿架构”，默认以纯静态 HTML 交付页面，按需加载交互式组件。
    • 性能： 默认 0KB 客户端 JS，加载性能卓越，构建速度快。
    • 开发体验： 有明确的项目结构和 .astro 文件语法，但允许在组件层面使用 React、Vue、Svelte 等任何 UI 框架。
    • 最佳用例： 营销网站、登陆页面，以及任何需要高性能静态基础和少量“点缀式”交互功能的网站。

  • Next.js (SSG 模式)：

    • 核心哲学： 全功能的 React 框架，SSG 只是其提供的多种渲染策略之一。
    • 性能： 即使在 SSG 模式下，页面仍需加载 React 运行时以实现客户端“水合”，存在不可避免的性能开销。
    • 开发体验： 高度“约定优于配置”，基于 React 生态系统，提供了图片优化、API 路由等丰富功能。
    • 最佳用例： 复杂的 Web 应用中需要静态化处理的部分，团队技术栈深度绑定 React 的项目。

进阶用法与技巧

Eleventy 的简单核心并不意味着功能受限，通过一些进阶技巧，可以构建出非常复杂的网站。

  1. 动态数据获取与缓存：
    • JavaScript 数据文件： 在 _data 目录下创建 .js 文件，导出一个异步函数，可以在构建时从外部 API（如 Headless CMS、REST API）获取数据。
    • 数据缓存： 使用官方插件 @11ty/eleventy-cache-assets 可以将 API 响应缓存到本地文件系统，显著提升后续构建速度并避免触发 API 速率限制。
  2. 编程化页面生成（Pagination）：
    • Eleventy 的 pagination 功能不仅限于对本地文件集合进行分页，它还可以对任何数据数组进行迭代，并为数组中的每个项目生成一个独立的页面。这是从 Headless CMS 或 API 创建大量详情页（如博客文章、产品页面）的标准模式。
  3. 数据派生与组合（eleventyComputed）：
    • eleventyComputed 是 Front Matter 中的一个强大属性，允许开发者根据其他数据（包括全局数据、目录数据和当前页面的 Front Matter）动态计算出新的数据字段，非常适合数据清理、组合和创建条件逻辑。
  4. 无头 CMS 集成：
    • API 驱动型： 通过在 JavaScript 数据文件中使用 node-fetch 或 CMS 提供的 SDK，在构建时从 Contentful、Strapi、Sanity 等 CMS 的 API 获取内容。敏感信息应通过环境变量管理。
    • Git 驱动型： 使用 Decap CMS (原 Netlify CMS) 或 TinaCMS 等工具，直接将内容（Markdown 或 JSON）提交到项目的 Git 仓库，Eleventy 将其作为本地文件处理。
    • 最佳实践： 务必对 CMS 数据进行缓存，并利用 @11ty/eleventy-img 插件处理图片，实现响应式和性能优化。
  5. 图像优化：
    • 官方插件 @11ty/eleventy-img 是 Eleventy 生态系统中的“杀手级”功能。它可以在构建时自动生成多种格式（如 AVIF、WebP）和尺寸的图片，并输出包含 srcset 和 sizes 的 <picture> 元素，实现现代响应式图像和性能优化。
  6. 性能优化策略：
    • .eleventyignore： 使用此文件排除 Eleventy 不需要处理的文件和目录，减少构建负担。
    • 优化集合和数据处理： 避免在多个地方重复计算集合，审视复杂的过滤和排序逻辑。
    • 性能分析： 通过设置环境变量 DEBUG=Eleventy:Benchmark* 运行 Eleventy，可以输出详细的构建时间报告，帮助定位性能瓶颈。

常见问题与解决方案

在使用 Eleventy 的过程中，开发者可能会遇到一些常见问题，社区提供了成熟的解决方案。

  • 核心配置与文件结构问题：
    • 问题： 文件未被处理，或模板找不到包含（includes）的文件或数据。
    • 解决方案： 在 .eleventy.js 配置文件中显式定义 dir 对象，设置 input, output, includes, layouts, data 的路径。
  • 静态资源（CSS, JS, 图片）处理：
    • 问题： 静态资源在构建后“消失”或未被复制到输出目录。
    • 解决方案： 使用 eleventyConfig.addPassthroughCopy() API 将静态资源复制到输出目录。
  • 异步数据获取问题：
    • 问题： 在 _data 目录下的 JavaScript 文件中获取 API 数据时，数据在模板中为 undefined。
    • 解决方案： 确保导出的函数是 async function，并正确使用 await 关键字来等待 Promise 解决。
  • 数据级联调试：
    • 问题： 难以理解数据在全局、目录和页面 Front Matter 之间的覆盖和合并顺序。
    • 解决方案： 在模板中使用 debug 过滤器（例如 {{ page | debug }}）直接打印出当前页面的完整数据对象，以可视化数据流。
  • 客户端 JavaScript 与交互性：
    • 问题： Eleventy 本身不处理客户端 JS 的打包或转译，如何添加交互性？
    • 解决方案： 对于简单 JS，直接通过 addPassthroughCopy 复制并引入；对于复杂场景，可以与 Vite 或 esbuild 等现代前端构建工具集成，实现打包、压缩和热模块替换。
  • 环境变量的使用：
    • 问题： 如何在 Eleventy 中安全、有效地使用环境变量（如 API 密钥）？
    • 解决方案： 在 _data 目录下创建一个全局数据文件（如 env.js），读取 process.env 并将其暴露给 Eleventy 的数据系统，以便在模板中一致地访问。

生态系统与扩展性

Eleventy 的生态系统虽然不如大型框架那样庞大，但其核心插件和社区贡献都非常活跃，且秉持着“恰到好处”的哲学。

  • 插件是配置的封装： Eleventy 插件的本质是共享的配置代码，它们通过 eleventyConfig API 来添加功能。这意味着开发者可以从使用插件平滑过渡到编写自定义代码，而无需学习新的范式。
  • 官方插件： Eleventy 团队维护着一组高质量的官方插件，它们是构建功能完备网站的首选：
    • @11ty/eleventy-plugin-rss：用于生成 RSS 订阅源。
    • @11ty/eleventy-plugin-syntaxhighlight：基于 Prism.js 提供服务端代码高亮。
    • @11ty/eleventy-img：强大的图像处理工具，实现响应式图像优化。
  • 社区插件与集成： 社区贡献了许多有用的插件，例如 eleventy-plugin-toc 用于生成目录，eleventy-plugin-html-minifier 用于 HTML 压缩。此外，通过 eleventy-plugin-vite 或 eleventy-plugin-esbuild 等插件，Eleventy 可以无缝集成现代前端构建工具，处理 CSS/JS 资源。
  • 最佳实践： 对于简单的、特定于项目的功能，建议直接在 .eleventy.js 中编写自定义代码，以保持项目轻量。同时，注意插件的执行顺序，特别是涉及内容转换的插件。

总结

Eleventy 是一个独特且强大的静态网站生成器，它在简单性、灵活性和性能之间找到了一个卓越的平衡点。它不强迫开发者使用特定的前端框架，而是提供了一个坚实的基础，让开发者能够自由选择最适合其项目需求的工具和技术栈。

对于追求极致性能、注重内容创作、并希望完全掌控构建过程的开发者而言，Eleventy 是一个极具吸引力的选择。无论是构建个人博客、项目文档，还是营销网站，Eleventy 都能提供一个快速、可靠且易于维护的解决方案。

我们鼓励您访问 Eleventy 官方网站，探索其强大的功能，并加入活跃的社区，开启您的静态网站构建之旅。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。