Lily Design System™

Hướng dẫn Nunjucks

Macro hiển thị phía máy chủ cho Eleventy, Express hoặc bất kỳ quy trình mẫu Node nào — cách làm kiểu GOV.UK, với danh mục và class hook của Lily.

Bạn sẽ xây dựng gì

Một biểu mẫu liên hệ nhỏ hiển thị phía máy chủ — ô nhập có nhãn, nút gửi, không có JavaScript payload — lúc đầu để trơn, sau đó thêm kiểu dáng, trong khoảng 10 phút.

Trước khi bắt đầu

Bạn cần git, Node 22 trở lên và pnpm 10 trở lên. Quy trình Nunjucks nào cũng được — Eleventy, Express hoặc Nunjucks thuần.

Bước 1 — Lấy mã

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

Mỗi thành phần là một thư mục trong components/ với một macro.njk, bài kiểm thử và tài liệu của nó — ví dụ components/button/macro.njk. Trỏ trình nạp Nunjucks của bạn tới components/ (trong Eleventy, thêm nó vào đường dẫn includes) và nhập thứ bạn cần.

Bước 2 — Thành phần đầu tiên của bạn

{% from "components/button/macro.njk" import button %}

{{ button({ text: "Save", type: "submit" }) }}

Hiển thị <button class="button" type="submit">Save</button>. Macro nhận một đối tượng params duy nhất: text (đã thoát ký tự) hoặc html (nguyên văn), type, label cho aria-labelvà một bộ nối thêm class hook.

Bước 3 — Ghép một biểu mẫu nhỏ

{% 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>

Vì mọi thứ được hiển thị trên máy chủ, trình duyệt nhận HTML ngữ nghĩa thuần với các class hook — JavaScript payload bằng không byte.

Kiểm tra kết quả: tải trang và biểu mẫu trông trơ — đúng như dự định: kiểu dáng còn ở phía trước. Nhấn Tab: tiêu điểm di chuyển qua mọi điều khiển, nhãn được đọc lên và việc gửi hoạt động. Hành vi đã xong; diện mạo là của bạn và là bước tiếp theo.

Bước 4 — Tạo kiểu dáng

Tạo kiểu cho các hook — .button, .text-input, .label, .field — trong bảng kiểu của bạn, hoặc liên kết một chủ đề dựng sẵn trong bố cục cơ sở: 

<link rel="stylesheet" href="/themes/united-kingdom-government-digital-service.css" />

Bước 5 — Xem mọi thứ hoạt động

Ứng dụng ví dụ Nunjucks + Eleventy dựng toàn bộ danh mục thành một trang tĩnh với trang demo cho từng thành phần: 

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-nunjucks-eleventy-examples
pnpm install && pnpm run dev

Các bước tiếp theo

Có thắc mắc trên đường đi? Trang trợ giúp có đầy câu trả lời — và nếu một bước có thể rõ ràng hơn, hãy cho chúng tôi biết và chúng tôi sẽ vui lòng cải thiện hướng dẫn.