Nunjucks 教程
适用于 Eleventy、Express 或任何 Node 模板流水线个服务端渲染宏——采用 GOV.UK 风格个做法，搭配 Lily 个目录搭类名钩子。
侬将构建啥
一个小型服务端渲染个联系表单——带标签个输入框、提交按钮、零 JavaScript 负载——先是勿带样式个版本，再加上样式，大约 10 分钟完成。
开始之前
侬需要 git、Node 22 或更高版本，以及 pnpm 10 或更高版本。任何 Nunjucks 流水线侪可以——Eleventy、Express 或纯 Nunjucks。
第 1 步——获取代码
git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-nunjucks-headless
pnpm install
pnpm test # vitest rendering every macro
每个组件侪是 components/ 中个一个目录，包含一个
macro.njk、伊个测试搭伊个文档——例如
components/button/macro.njk。把侬个 Nunjucks 加载器指向
components/（在 Eleventy 中，把伊加入 includes 路径），然后导入侬需要个宏。
第 2 步——侬个第一个组件
{% from "components/button/macro.njk" import button %}
{{ button({ text: "Save", type: "submit" }) }}
渲染为 <button class="button" type="submit">Save</button>。
宏接收单个参数对象：text（会转义）或
html（原样输出）、type、用于 aria-label 个 label，以及追加类名钩子个参数。
第 3 步——组合一个小表单
{% from "components/form/macro.njk" import form %}
{% from "components/label/macro.njk" import label %}
{% from "components/text-input/macro.njk" import textInput %}
{% from "components/button/macro.njk" import button %}
<form class="form" method="post">
<div class="field">
{{ label({ for: "name", text: "Full name" }) }}
{{ textInput({ id: "name", name: "name", required: true }) }}
</div>
{{ button({ text: "Save", type: "submit" }) }}
</form>因为一切侪在服务端渲染，浏览器收到个是带有类名钩子个纯语义化 HTML——JavaScript 负载为零字节。
检查侬个成果：加载页面，表单看起来老朴素——这正是预期：样式还在后面。按下 Tab：焦点会依次经过每个控件，标签会被朗读，提交也能正常工作。行为已经完成；外观由侬决定，这就是下一步。
第 4 步——添加样式
在侬个样式表中为搿眼钩子设置样式——.button、.text-input、
.label、.field——或者在基础布局中链接一个现成个主题：
<link rel="stylesheet" href="/themes/united-kingdom-government-digital-service.css" />第 5 步——看看伊个完整效果
Nunjucks + Eleventy 示例应用把完整目录构建成静态站点，并为每个组件提供演示页面：
git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-nunjucks-eleventy-examples
pnpm install && pnpm run dev