Nunjucks tutoriala — Lily Design System

Zer eraikiko duzun

Zerbitzarian errendatutako harremanetarako formulario txiki bat — etiketadun sarrera, bidaltze-botoia, zero JavaScript karga — lehenik biluzik, gero estilatuta, 10 minutu inguruan.

Hasi aurretik

git, Node 22 edo berriagoa eta pnpm 10 edo berriagoa behar dituzu. Edozein Nunjucks kanalizaziok balio du — Eleventy, Express edo Nunjucks soila.

1. pausoa — Lortu kodea

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

Osagai bakoitza direktorio bat da hemen: components/ honekin: macro.njk, bere proba eta bere dokumentazioa — adibidez components/button/macro.njk. Seinalatu zure Nunjucks kargatzailea hona: components/ (Eleventy-n, gehitu includes bidera) eta inportatu behar duzuna.

2. pausoa — Zure lehen osagaia

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

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

Errendatzen du <button class="button" type="submit">Save</button>. Makroek params objektu bakarra hartzen dute: text (ihes eginda) edo html (gordina), type, label honetarako: aria-label, eta klase-gako erantsle bat.

3. pausoa — Osatu formulario txiki bat

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

Dena zerbitzarian errendatzen denez, nabigatzaileak HTML semantiko hutsa jasotzen du klase-gakoekin — zero byteko JavaScript karga.

Egiaztatu zure lana: kargatu orria eta formularioa soila ageri da — hain zuzen nahi bezala: estiloa oraindik aurrean dago. Sakatu Tab: fokua kontrol guztietatik pasatzen da, etiketa iragartzen da eta bidalketak funtzionatzen du. Portaera prest dago; itxura zurea da eta hurrengoa da.

4. pausoa — Estilatu

Estilatu gakoak — .button, .text-input, .label, .field — zure estilo-orrian, edo lotu prest dagoen gai bat zure oinarrizko diseinuan:

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

5. pausoa — Ikusi dena funtzionatzen

Nunjucks + Eleventy adibide-aplikazioak katalogo osoa gune estatiko gisa eraikitzen du osagai bakoitzaren demo-orriekin:

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

Hurrengo pausoak

Gaiak — SSR gai-aldaketa keinurik gabe lortzeko Eleventy cookie-patroia barne.
Lehentasun-laguntzaileak — hizkuntza eta testu-tamaina.
Osagai-katalogoa — osagai bakoitzaren propak, ARIA eta teklatua.

Galderarik bidean? laguntza-orriak erantzunez beteta dago — eta pauso bat argiagoa izan badaiteke, esan iezaguzu eta pozik hobetuko dugu tutoriala.