Nunjucks-vejledning — Lily Design System

Det her bygger du

En lille servergengivet kontaktformular — felt med etiket, send-knap, nul JavaScript-last — først nøgen, derefter formgivet, på omkring 10 minutter.

Før du går i gang

Du skal bruge git, Node 22 eller nyere og pnpm 10 eller nyere. Enhver Nunjucks-pipeline virker — Eleventy, Express eller almindelig Nunjucks.

Trin 1 — Hent 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

Hver komponent er en mappe i components/ med en macro.njk, sin test og sin dokumentation — for eksempel components/button/macro.njk. Peg din Nunjucks-loader på components/ (i Eleventy tilføjer du den til include-stien) og importér det, du har brug for.

Trin 2 — Din første komponent

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

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

Gengiver <button class="button" type="submit">Save</button>. Makroer tager ét params-objekt: text (escapet) eller html (rå), type, label for et aria-labelog en tilføjer til klassekroge.

Trin 3 — Sæt en lille formular sammen

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

Fordi alt gengives på serveren, modtager browseren ren semantisk HTML med klassekrogene — en JavaScript-last på nul bytes.

Tjek dit arbejde: indlæs siden, og formularen ser nøgen ud — præcis som tilsigtet: formgivningen kommer endnu. Tryk på Tab: fokus flytter sig gennem hver kontrol, etiketten oplæses, og afsendelse virker. Adfærden er færdig; udseendet er dit og er næste skridt.

Trin 4 — Giv den stil

Formgiv krogene — .button, .text-input, .label, .field — i dit typografiark, eller link et færdigt tema i dit basislayout:

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

Trin 5 — Se det hele virke

Nunjucks + Eleventy eksempelapp bygger hele kataloget som et statisk site med demosider pr. 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æste skridt

Temaer — inklusive Eleventys cookiemønster til flimmerfrit SSR-temaskift.
Indstillingshjælpere — sprog og tekststørrelse.
Komponentkatalog — egenskaber, ARIA og tastatur pr. komponent.

Spørgsmål undervejs? Siden Hjælp er fuld af svar — og hvis et trin kan blive tydeligere, så fortæl os det og vi forbedrer gerne vejledningen.