Vodič za Nunjucks — Lily Design System

Što ćete izraditi

Mali kontaktni obrazac iscrtan na poslužitelju — polje s oznakom, gumb za slanje, nulti JavaScript teret — najprije golo, zatim stilizirano, za otprilike 10 minuta.

Prije nego počnete

Trebaju vam git, Node 22 ili noviji i pnpm 10 ili noviji. Odgovara bilo koji Nunjucks cjevovod — Eleventy, Express ili obični Nunjucks.

Korak 1 — Preuzmite kod

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

Svaka komponenta je direktorij u components/ s macro.njk, njezinim testom i dokumentacijom — na primjer components/button/macro.njk. Usmjerite svoj Nunjucks loader na components/ (u Eleventyju ga dodajte u putanju includes) i uvezite što trebate.

Korak 2 — Vaša prva komponenta

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

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

Iscrtava <button class="button" type="submit">Save</button>. Makroi primaju jedan objekt params: text (s escapeanjem) ili html (sirovo), type, label za aria-labeli dodavač klasne kuke.

Korak 3 — Sastavite mali obrazac

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

Budući da se sve iscrtava na poslužitelju, preglednik prima čisti semantički HTML s klasnim kukama — JavaScript teret od nula bajtova.

Provjerite svoj rad: učitajte stranicu i obrazac izgleda golo — točno kako je zamišljeno: stiliziranje tek slijedi. Pritisnite Tab: fokus prolazi kroz svaku kontrolu, oznaka se izgovara i slanje radi. Ponašanje je gotovo; izgled je vaš i sljedeći je korak.

Korak 4 — Stilizirajte ga

Stilizirajte kuke — .button, .text-input, .label, .field — u svojoj stilskoj tablici, ili povežite gotovu temu u osnovnom rasporedu:

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

Korak 5 — Pogledajte kako sve radi

Primjer aplikacija Nunjucks + Eleventy gradi cijeli katalog kao statičko web-mjesto sa stranicama demonstracije po komponenti:

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

Sljedeći koraci

Teme — uključujući Eleventyjev uzorak kolačića za prebacivanje teme u SSR-u bez treperenja.
Pomoćnici za postavke — jezik i veličina teksta.
Katalog komponenti — svojstva, ARIA i tipkovnica po komponenti.

Pitanja usput? Stranica pomoći puna je odgovora — a ako neki korak može biti jasniji, javite nam i rado ćemo poboljšati vodič.