Lily Design System™

Tutorial Nunjucks

Makro dirender pelayan untuk Eleventy, Express atau mana-mana saluran templat Node — pendekatan gaya GOV.UK, dengan katalog dan cangkuk kelas Lily.

Apa yang akan anda bina

Borang hubungan kecil dirender pelayan — input berlabel, butang hantar, muatan JavaScript sifar — mula-mula kosong, kemudian digayakan, dalam kira-kira 10 minit.

Sebelum anda bermula

Anda memerlukan git, Node 22 atau lebih baharu, dan pnpm 10 atau lebih baharu. Mana-mana saluran Nunjucks boleh digunakan — Eleventy, Express atau Nunjucks biasa.

Langkah 1 — Dapatkan 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

Setiap komponen ialah direktori dalam components/ dengan macro.njk, ujiannya dan dokumennya — contohnya components/button/macro.njk. Halakan pemuat Nunjucks anda ke components/ (dalam Eleventy, tambah ke laluan includes) dan import apa yang anda perlukan.

Langkah 2 — Komponen pertama anda

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

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

Memaparkan <button class="button" type="submit">Save</button>. Makro mengambil satu objek params: text (dilepaskan) atau html (mentah), type, label untuk aria-labeldan penambah cangkuk kelas.

Langkah 3 — Gubah borang kecil

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

Kerana semuanya dirender di pelayan, pelayar menerima HTML semantik tulen dengan cangkuk kelas — muatan JavaScript sifar bait.

Semak kerja anda: muat halaman dan borang kelihatan biasa sahaja — tepat seperti dimaksudkan: penggayaan masih di hadapan. Tekan Tab: fokus bergerak melalui setiap kawalan, label diumumkan dan penghantaran berfungsi. Tingkah laku sudah siap; rupanya milik anda dan itu seterusnya.

Langkah 4 — Gayakan

Gayakan cangkuk — .button, .text-input, .label, .field — dalam helaian gaya anda, atau pautkan tema siap pakai dalam susun atur asas anda: 

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

Langkah 5 — Lihat semuanya berfungsi

Aplikasi contoh Nunjucks + Eleventy membina katalog penuh sebagai tapak statik dengan halaman demo bagi setiap 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 seterusnya

  • Tema — termasuk corak kuki Eleventy untuk penukaran tema SSR tanpa kelipan.
  • Pembantu keutamaan — bahasa dan saiz teks.
  • Katalog komponen — prop, ARIA dan papan kekunci bagi setiap komponen.

Ada soalan di sepanjang jalan? halaman bantuan penuh dengan jawapan — dan jika sesuatu langkah boleh dijelaskan lagi, beritahu kami dan kami dengan senang hati akan memperbaiki tutorial.