Nunjucksi õpetus — Lily Design System

Mida sa ehitad

Väike serveris renderdatud kontaktivorm — sildiga väli, saatmisnupp, null JavaScripti koormust — esmalt paljas, seejärel kujundatud, umbes 10 minutiga.

Enne alustamist

Vaja on gitti, Node 22 või uuemat ja pnpm 10 või uuemat. Sobib iga Nunjucksi torustik — Eleventy, Express või lihtne Nunjucks.

Samm 1 — Hangi kood

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

Iga komponent on kaust asukohas components/ koos macro.njk, selle testi ja dokumentatsiooniga — näiteks components/button/macro.njk. Suuna oma Nunjucksi laadija asukohta components/ (Eleventys lisa see includes-teele) ja impordi, mida vajad.

Samm 2 — Sinu esimene komponent

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

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

Renderdab <button class="button" type="submit">Save</button>. Makrod võtavad ühe params-objekti: text (paojadega) või html (toores), type, label elemendile aria-labelja klassikonksu lisaja.

Samm 3 — Kombineeri väike vorm

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

Kuna kõik renderdatakse serveris, saab brauser puhast semantilist HTML-i koos klassikonksudega — null baiti JavaScripti koormust.

Kontrolli oma tööd: laadi leht ja vorm paistab paljas — täpselt nagu ette nähtud: kujundamine on alles ees. Vajuta Tab: fookus liigub läbi iga juhtelemendi, silt kuulutatakse ette ja saatmine töötab. Käitumine on valmis; välimus on sinu ja järgmine samm.

Samm 4 — Kujunda see

Kujunda konksud — .button, .text-input, .label, .field — oma laadilehes või lingi valmis teema oma baaspaigutuses:

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

Samm 5 — Vaata kõike töötamas

Nunjucks + Eleventy näiterakendus ehitab kogu kataloogi staatilise saidina komponendi kohta demolehtedega:

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

Järgmised sammud

Teemad — sealhulgas Eleventy küpsisemuster vilkumisvaba SSR-teema vahetamiseks.
Eelistuste abilised — keel ja teksti suurus.
Komponentide kataloog — omadused, ARIA ja klaviatuur komponendi kohta.

Küsimusi teel? Abileht on täis vastuseid — ja kui mõni samm saaks olla selgem, anna meile teada ja me parandame õpetust hea meelega.