Návod pro Nunjucks — Lily Design System

Co vytvoříte

Malý na serveru vykreslený kontaktní formulář — pole se štítkem, tlačítko odeslat, nulový náklad JavaScriptu — nejprve holý, potom ostylovaný, zhruba za 10 minut.

Než začnete

Potřebujete git, Node 22 nebo novější a pnpm 10 nebo novější. Hodí se jakákoli pipeline Nunjucks — Eleventy, Express nebo čisté Nunjucks.

Krok 1 — Získejte kód

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

Každá komponenta je adresář v components/ s macro.njk, jejím testem a dokumentací — například components/button/macro.njk. Nasměrujte svůj loader Nunjucks na components/ (v Eleventy ho přidejte do cesty includes) a importujte, co potřebujete.

Krok 2 — Vaše první komponenta

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

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

Vykresluje <button class="button" type="submit">Save</button>. Makra přijímají jediný objekt params: text (escapovaný) nebo html (surový), type, label pro aria-labela přidávač třídního háčku.

Krok 3 — Sestavte malý formulář

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

Protože se vše vykresluje na serveru, prohlížeč dostane čisté sémantické HTML s třídními háčky — nulobajtový náklad JavaScriptu.

Zkontrolujte svou práci: načtěte stránku a formulář vypadá holě — přesně jak bylo zamýšleno: stylování teprve přijde. Stiskněte Tab: fokus prochází každým ovládacím prvkem, štítek se oznamuje a odeslání funguje. Chování je hotové; vzhled je váš a je další na řadě.

Krok 4 — Ostylujte ho

Ostylujte háčky — .button, .text-input, .label, .field — ve svém stylopisu, nebo připojte hotové téma v základním rozvržení:

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

Krok 5 — Podívejte se, jak to celé funguje

Ukázková aplikace Nunjucks + Eleventy sestaví celý katalog jako statický web s ukázkovými stránkami pro každou komponentu:

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

Další kroky

Témata — včetně vzoru cookies z Eleventy pro přepínání tématu v SSR bez blikání.
Pomocníci pro předvolby — jazyk a velikost textu.
Katalog komponent — vlastnosti, ARIA a klávesnice pro každou komponentu.

Otázky cestou? Stránka nápovědy je plná odpovědí — a pokud by nějaký krok mohl být jasnější, dejte nám vědět a návod rádi vylepšíme.