note

Appearance

Eleventy ​

概念 / glossary ​

Template

Layout

Data

Data Cascade：数据如何在不同层级之间传递和合并的机制。它决定了模板最终可以访问哪些数据，以及数据的优先级顺序

Filter：用于模版中数据处理，可链式。

Shortcode：自定义标签，用于 复用代码。

Collection：自动归类页面的方式，方便你在不同地方重复使用这些内容。

想象一下，你有很多 Markdown 文件（比如博客文章、项目列表），但你不想每次手动在首页、分类页、标签页等地方重复筛选它们。Collections 就是 11ty 提供的“内容管理工具”，可以帮你自动收集这些页面并排序、过滤、展示。

Layouts ​

layouts/base.njk

html
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>{{ title }}</title>
  </head>
  <body>
    <header>我的网站</header>
    <main>{{ content | safe }}</main>
    <footer>版权所有 © 2025</footer>
  </body>
</html>
html
---
title: "我的首页"
layout: "base.njk"
---

Includes ​

includes/header.njk

html
{% include "header.njk" %}

Shortcode ​

需要在 .eleventy.js 中注册

js
module.exports = function (eleventyConfig) {
  eleventyConfig.addShortcode("button", function (text, url) {
    return `<a href="${url}" class="btn">${text}</a>`;
  });
};
html
{% button "点击我", "https://example.com" %}

Filters ​

js
module.exports = function (eleventyConfig) {
  eleventyConfig.addFilter("uppercase", function (value) {
    return value.toUpperCase();
  });
};
html
{{ "hello world" | uppercase }}

Global Data ​

_data/site.json

html
<h1>{{ site.title }}</h1>
<p>作者：{{ site.author }}</p>