Nunjucks oktatóanyag — Lily Design System

Mit fogsz építeni

Egy kis szerveroldalon renderelt kapcsolatfelvételi űrlap — címkézett mező, küldés gomb, nulla JavaScript-teher — először csupaszon, aztán stílusosan, nagyjából 10 perc alatt.

Mielőtt elkezdenéd

Szükséged van gitre, Node 22-re vagy újabbra és pnpm 10-re vagy újabbra. Bármelyik Nunjucks-csővezeték megfelel — Eleventy, Express vagy sima Nunjucks.

1. lépés — Szerezd meg a kódot

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

Minden komponens egy könyvtár itt: components/ egy macro.njk, a tesztje és a dokumentációja — például components/button/macro.njk. Állítsd a Nunjucks-betöltődet erre: components/ (Eleventyben add hozzá az include-útvonalhoz), és importáld, amire szükséged van.

2. lépés — Az első komponensed

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

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

Ezt rendereli: <button class="button" type="submit">Save</button>. A makrók egyetlen params objektumot fogadnak: text (escape-elt) vagy html (nyers), type, label az aria-labelés egy osztálykampó-hozzáfűző.

3. lépés — Állíts össze egy kis űrlapot

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

Mivel minden a szerveren renderelődik, a böngésző tiszta szemantikus HTML-t kap az osztálykampókkal — nulla bájtnyi JavaScript-teherrel.

Ellenőrizd a munkádat: töltsd be az oldalt, és az űrlap csupasznak látszik — pontosan úgy, ahogy szántuk: a stílus még hátravan. Nyomd meg a Tabbillentyűt: a fókusz végigmegy minden vezérlőn, a címkét bemondja, és a küldés működik. A viselkedés kész; a megjelenés a tiéd, és a következő lépés.

4. lépés — Stílus hozzá

Stílusozd a kampókat — .button, .text-input, .label, .field — a stíluslapodban, vagy hivatkozz egy kész témára az alapelrendezésedben:

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

5. lépés — Nézd meg, ahogy az egész működik

A Nunjucks + Eleventy példaalkalmazás statikus oldalként építi fel a teljes katalógust komponensenkénti bemutatóoldalakkal:

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

További lépések

Témák — beleértve az Eleventy süti-mintáját a villogásmentes SSR-témaváltáshoz.
Beállítási segédek — nyelv és szövegméret.
Komponenskatalógus — tulajdonságok, ARIA és billentyűzet komponensenként.

Kérdésed akad útközben? A súgóoldal tele van válaszokkal — és ha egy lépés érthetőbb lehetne, szólj nekünk és szívesen javítjuk az oktatóanyagot.