Lily Design System™

Nunjucks-veiledning

Server-gjengitte makroer for Eleventy, Express eller enhver Node-malrørledning — GOV.UK-aktig tilnærming, med Lilys katalog og klassekroker.

Hva du skal bygge

Et lite server-gjengitt kontaktskjema — inndatafelt med etikett, send-knapp, null JavaScript-nyttelast — først bart, så stilet, på omtrent 10 minutter.

Før du begynner

Du trenger git, Node 22 eller nyere og pnpm 10 eller nyere. Enhver Nunjucks-rørledning fungerer — Eleventy, Express eller ren Nunjucks.

Steg 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 katalog i components/ med en macro.njk, testen sin og dokumentasjonen sin — for eksempel components/button/macro.njk. Pek Nunjucks-lasteren din på components/ (i Eleventy legger du den til includes-stien) og importer det du trenger.

Steg 2 — Din første komponent

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

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

Gjengir <button class="button" type="submit">Save</button>. Makroer tar ett params-objekt: text (escapet) eller html (rå), type, label for en aria-labelog en klassekrok-tilføyer.

Steg 3 — Sett sammen et lite skjema

{% 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 gjengis på serveren, mottar nettleseren ren semantisk HTML med klassekrokene — en JavaScript-nyttelast på null byte.

Sjekk arbeidet ditt: last siden, og skjemaet ser enkelt ut — akkurat som tiltenkt: stilingen ligger fortsatt foran. Trykk Tab: fokus beveger seg gjennom hver kontroll, etiketten kunngjøres og innsending fungerer. Oppførselen er ferdig; utseendet er ditt og er neste.

Steg 4 — Stil det

Stil krokene — .button, .text-input, .label, .field — i stilarket ditt, eller lenk et ferdig tema i baseoppsettet ditt: 

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

Steg 5 — Se alt fungere

Nunjucks + Eleventy-eksempelappen bygger hele katalogen som et statisk nettsted med demosider 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

Neste steg

  • Tema — inkludert Eleventy-informasjonskapselmønsteret for flimmerfritt SSR-temabytte.
  • Preferansehjelpere — språk og tekststørrelse.
  • Komponentkatalog — egenskaper, ARIA og tastatur per komponent.

Spørsmål underveis? hjelpesiden er full av svar — og hvis et steg kan bli tydeligere, fortell oss så forbedrer vi gjerne veiledningen.