Nunjucks-handledning — Lily Design System

Det här bygger du

Ett litet serverrenderat kontaktformulär — fält med etikett, skicka-knapp, noll JavaScript-last — först naket, sedan formgivet, på ungefär 10 minuter.

Innan du börjar

Du behöver git, Node 22 eller senare och pnpm 10 eller senare. Alla Nunjucks-pipelines fungerar — Eleventy, Express eller ren Nunjucks.

Steg 1 — Hämta koden

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

Varje komponent är en katalog i components/ med en macro.njk, sitt test och sin dokumentation — till exempel components/button/macro.njk. Peka din Nunjucks-laddare på components/ (i Eleventy, lägg till den i include-sökvägen) och importera det du behöver.

Steg 2 — Din första komponent

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

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

Renderar <button class="button" type="submit">Save</button>. Makron tar ett enda params-objekt: text (escapad) eller html (rå), type, label för en aria-labeloch en tillägg av klasskrok.

Steg 3 — Sätt ihop ett litet 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>

Eftersom allt renderas på servern får webbläsaren ren semantisk HTML med klasskrokarna — noll byte JavaScript-last.

Kontrollera ditt arbete: ladda sidan så ser formuläret kargt ut — precis som tänkt: formgivningen återstår. Tryck på Tab: fokus flyttas genom varje kontroll, etiketten läses upp och inskickning fungerar. Beteendet är klart; utseendet är ditt och kommer härnäst.

Steg 4 — Formge det

Formge krokarna — .button, .text-input, .label, .field — i din stilmall, eller länka ett färdigt tema i din baslayout:

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

Steg 5 — Se allt fungera

Exempelappen Nunjucks + Eleventy bygger hela katalogen som en statisk webbplats med demosidor per 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

Nästa steg

Teman — inklusive Eleventys cookiemönster för flimmerfritt SSR-temabyte.
Inställningshjälpare — språk och textstorlek.
Komponentkatalog — egenskaper, ARIA och tangentbord per komponent.

Frågor på vägen? Hjälpsidan är full av svar — och om ett steg kan bli tydligare, berätta för oss så förbättrar vi gärna handledningen.