Посібник з Nunjucks — Lily Design System

Що ви створите

Невелика серверно-рендерена контактна форма — поле з міткою, кнопка надсилання, нульове навантаження 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>. Макроси приймають один об’єкт params: text (екранований) або html (сирий), type, label для aria-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

Наступні кроки

Теми — зокрема шаблон cookie для Eleventy для перемикання теми через SSR без мерехтіння.
Допоміжні засоби налаштувань — мова та розмір тексту.
Каталог компонентів — властивості, ARIA та клавіатура для кожного компонента.

Питання по дорозі? сторінка допомоги повна відповідей — а якщо якийсь крок може бути зрозумілішим, повідомте нам і ми із задоволенням покращимо посібник.