Návod pre Nunjucks — Lily Design System

Čo vytvoríte

Malý na serveri vykresľovaný kontaktný formulár — pole s popisom, tlačidlo odoslať, nulový náklad JavaScriptu — najprv holý, potom ostylovaný, približne za 10 minút.

Skôr než začnete

Potrebujete git, Node 22 alebo novší a pnpm 10 alebo novší. Hodí sa akákoľvek pipeline Nunjucks — Eleventy, Express alebo čisté Nunjucks.

Krok 1 — Získajte 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ý komponent je adresár v components/ s macro.njk, jeho testom a dokumentáciou — napríklad components/button/macro.njk. Nasmerujte svoj loader Nunjucks na components/ (v Eleventy ho pridajte do cesty includes) a importujte, čo potrebujete.

Krok 2 — Váš prvý komponent

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

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

Vykresľuje <button class="button" type="submit">Save</button>. Makrá prijímajú jediný objekt params: text (escapovaný) alebo html (surový), type, label pre aria-labela pridávač triedneho háčika.

Krok 3 — Zložte malý formulár

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

Pretože sa všetko vykresľuje na serveri, prehliadač dostane čisté sémantické HTML s triednymi háčikmi — nulabajtový náklad JavaScriptu.

Skontrolujte svoju prácu: načítajte stránku a formulár vyzerá holo — presne podľa zámeru: štýlovanie ešte len príde. Stlačte Tab: fokus prechádza každým ovládacím prvkom, popis sa oznamuje a odoslanie funguje. Správanie je hotové; vzhľad je váš a je ďalším krokom.

Krok 4 — Ostylujte ho

Ostylujte háčiky — .button, .text-input, .label, .field — vo svojej štýlovej šablóne, alebo pripojte hotovú tému v základnom rozložení:

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

Krok 5 — Pozrite sa, ako to celé funguje

Ukážková aplikácia Nunjucks + Eleventy zostaví celý katalóg ako statický web s ukážkovými stránkami pre každý komponent:

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

Ďalšie kroky

Témy — vrátane vzoru cookies z Eleventy pre prepínanie témy v SSR bez blikania.
Pomocníci pre predvoľby — jazyk a veľkosť textu.
Katalóg komponentov — vlastnosti, ARIA a klávesnica pre každý komponent.

Otázky po ceste? Stránka pomocníka je plná odpovedí — a ak by niektorý krok mohol byť jasnejší, dajte nám vedieť a návod radi vylepšíme.