Tutorial Nunjucks — Lily Design System

Ce vei construi

Un mic formular de contact randat pe server — câmp cu etichetă, buton de trimitere, zero sarcină JavaScript — mai întâi simplu, apoi stilizat, în aproximativ 10 minute.

Înainte să începi

Ai nevoie de git, Node 22 sau mai nou și pnpm 10 sau mai nou. Orice conductă Nunjucks merge — Eleventy, Express sau Nunjucks simplu.

Pasul 1 — Obține codul

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

Fiecare componentă este un director în components/ cu un macro.njk, testul și documentația sa — de exemplu components/button/macro.njk. Îndreaptă încărcătorul tău Nunjucks către components/ (în Eleventy, adaugă-l la calea de includere) și importă ce ai nevoie.

Pasul 2 — Prima ta componentă

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

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

Randează <button class="button" type="submit">Save</button>. Macrocomenzile primesc un singur obiect params: text (cu escape) sau html (brut), type, label pentru un aria-labelși un adăugător de cârlig de clasă.

Pasul 3 — Compune un formular mic

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

Deoarece totul este randat pe server, browserul primește HTML semantic pur cu cârligele de clasă — o sarcină JavaScript de zero octeți.

Verifică-ți munca: încarcă pagina și formularul arată simplu — exact cum era intenționat: stilizarea urmează. Apasă Tab: focalizarea trece prin fiecare control, eticheta este anunțată, iar trimiterea funcționează. Comportamentul este gata; aspectul este al tău și urmează.

Pasul 4 — Stilizează-l

Stilizează cârligele — .button, .text-input, .label, .field — în foaia ta de stil sau leagă o temă gata făcută în aspectul tău de bază:

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

Pasul 5 — Vezi totul funcționând

Aplicația-exemplu Nunjucks + Eleventy construiește catalogul complet ca site static cu pagini demonstrative pentru fiecare componentă:

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

Pașii următori

Teme — inclusiv tiparul cookie-urilor Eleventy pentru comutarea temei SSR fără clipire.
Ajutoare pentru preferințe — limbă și dimensiunea textului.
Catalogul de componente — proprietăți, ARIA și tastatură pentru fiecare componentă.

Întrebări pe parcurs? Pagina de ajutor este plină de răspunsuri — iar dacă un pas poate fi mai clar, spune-ne și vom îmbunătăți cu plăcere tutorialul.