Nunjucks-opas — Lily Design System

Mitä rakennat

Pieni palvelimella renderöity yhteydenottolomake — nimiöity kenttä, lähetyspainike, nolla JavaScript-kuormaa — ensin paljaana, sitten tyylitellen, noin 10 minuutissa.

Ennen kuin aloitat

Tarvitset gitin, Node 22:n tai uudemman ja pnpm 10:n tai uudemman. Mikä tahansa Nunjucks-putki kelpaa — Eleventy, Express tai pelkkä Nunjucks.

Vaihe 1 — Hae koodi

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

Jokainen komponentti on hakemisto kohteessa components/ jossa on macro.njk, sen testi ja sen dokumentaatio — esimerkiksi components/button/macro.njk. Osoita Nunjucks-lataajasi kohteeseen components/ (Eleventyssä lisää se include-polkuun) ja tuo tarvitsemasi.

Vaihe 2 — Ensimmäinen komponenttisi

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

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

Renderöi <button class="button" type="submit">Save</button>. Makrot ottavat yhden params-olion: text (escapattu) tai html (raaka), type, label elementille aria-labelja luokkakoukun lisääjän.

Vaihe 3 — Kokoa pieni lomake

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

Koska kaikki renderöidään palvelimella, selain saa puhdasta semanttista HTML:ää luokkakoukkuineen — nollatavuinen JavaScript-kuorma.

Tarkista työsi: lataa sivu, ja lomake näyttää paljaalta — juuri niin kuin on tarkoitus: tyylittely on vielä edessä. Paina Tab: kohdistus liikkuu jokaisen ohjaimen läpi, nimiö ilmoitetaan ja lähettäminen toimii. Toiminta on valmis; ulkoasu on sinun ja seuraava vaihe.

Vaihe 4 — Tyylittele se

Tyylittele koukut — .button, .text-input, .label, .field — tyylitiedostossasi, tai linkitä valmis teema perusasettelussasi:

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

Vaihe 5 — Katso kaiken toimivan

Nunjucks + Eleventy -esimerkkisovellus rakentaa koko luettelon staattiseksi sivustoksi, jossa on esittelysivut komponenteittain:

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

Seuraavat askeleet

Teemat — mukaan lukien Eleventyn evästemalli välkkymättömään SSR-teeman vaihtoon.
Asetusapuvälineet — kieli ja tekstikoko.
Komponenttiluettelo — ominaisuudet, ARIA ja näppäimistö komponenteittain.

Kysymyksiä matkan varrella? Ohjesivu on täynnä vastauksia — ja jos jokin vaihe voisi olla selkeämpi, kerro meille ja parannamme opasta mielellämme.