Tutorial Nunjucks — Lily Design System

Apa sing bakal sampeyan gawé

Formulir kontak cilik sing dirender ing server — kolom nganggo label, tombol kirim, nol bobot JavaScript — dhisik polosan, banjur ditata, kira-kira 10 menit.

Sadurunge miwiti

Sampeyan butuh git, Node 22 utawa luwih anyar, lan pnpm 10 utawa luwih anyar. Pipa Nunjucks apa wae bisa — Eleventy, Express utawa Nunjucks biasa.

Langkah 1 — Njupuk kode

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

Saben komponen iku direktori ing components/ kanthi macro.njk, tesé lan dokumentasiné — contoné components/button/macro.njk. Arahna pamuat Nunjucks sampeyan menyang components/ (ing Eleventy, tambahna menyang dalan includes) lan impor sing dibutuhaké.

Langkah 2 — Komponen pisanan sampeyan

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

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

Nampilaké <button class="button" type="submit">Save</button>. Makro nampa siji obyèk params: text (diloloske) utawa html (mentah), type, label kanggo aria-labellan panambah pancingan kelas.

Langkah 3 — Nyusun formulir cilik

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

Amarga kabèh dirender ing server, browser nampa HTML semantik murni kanthi pancingan kelas — bobot JavaScript nol bita.

Priksa pagawéan sampeyan: muat kaca lan formulir katon polosan — persis kaya sing dikarepaké: penataan isih ing ngarep. Pencet Tab: fokus mlaku liwat saben kontrol, label diumumaké lan kirim mlaku. Prilaku wis rampung; tampilan iku duwèkmu lan dadi langkah sabanjuré.

Langkah 4 — Tata

Tata pancingan — .button, .text-input, .label, .field — ing lembar gaya sampeyan, utawa sambungna tema sing wis siap ing tata letak dhasar sampeyan:

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

Langkah 5 — Deleng kabèh mlaku

Aplikasi conto Nunjucks + Eleventy mbangun katalog lengkap minangka situs statis kanthi kaca demonstrasi saben komponen:

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

Langkah sabanjuré

Tema — kalebu pola cookie Eleventy kanggo ganti tema SSR tanpa kedhip.
Pembantu preferensi — basa lan ukuran teks.
Katalog komponen — properti, ARIA lan keyboard saben komponen.

Ana pitakon ing dalan? Kaca pitulung kebak wangsulan — lan menawa ana langkah sing bisa luwih cetha, kandhanana kita lan kita bakal seneng nyaosi tutorial luwih apik.