Lily Design System™

Tutorial Nunjucks

Makro yang dirender di server untuk Eleventy, Express, atau jalur pipa templat Node mana pun — pendekatan gaya GOV.UK, dengan katalog dan kait kelas Lily.

Apa yang akan Anda bangun

Formulir kontak kecil yang dirender di server — kolom berlabel, tombol kirim, nol muatan JavaScript — pertama polos, lalu bergaya, dalam sekitar 10 menit.

Sebelum memulai

Anda memerlukan git, Node 22 atau lebih baru, dan pnpm 10 atau lebih baru. Jalur pipa Nunjucks mana pun bisa — Eleventy, Express, atau Nunjucks biasa.

Langkah 1 — Dapatkan kodenya

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 adalah direktori di components/ dengan sebuah macro.njk, pengujiannya, dan dokumentasinya — misalnya components/button/macro.njk. Arahkan pemuat Nunjucks Anda ke components/ (di Eleventy, tambahkan ke jalur includes) dan impor yang Anda perlukan.

Langkah 2 — Komponen pertama Anda

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

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

Merender <button class="button" type="submit">Save</button>. Makro menerima satu objek params: text (di-escape) atau html (mentah), type, label untuk sebuah aria-labeldan penambah kait kelas.

Langkah 3 — Susun formulir 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>

Karena semuanya dirender di server, peramban menerima HTML semantik murni dengan kait kelas — muatan JavaScript nol byte.

Periksa pekerjaan Anda: muat halaman dan formulir tampak polos — persis seperti yang dimaksudkan: penataan gaya masih akan datang. Tekan Tab: fokus berpindah melalui setiap kontrol, label diumumkan, dan pengiriman berfungsi. Perilakunya selesai; tampilan adalah milik Anda dan menjadi langkah berikutnya.

Langkah 4 — Beri gaya

Beri gaya pada kait — .button, .text-input, .label, .field — di lembar gaya Anda, atau tautkan tema siap pakai di tata letak dasar Anda: 

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

Langkah 5 — Lihat semuanya bekerja

Aplikasi contoh Nunjucks + Eleventy membangun katalog lengkap sebagai situs statis dengan halaman demonstrasi per 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 berikutnya

  • Tema — termasuk pola cookie Eleventy untuk pengalihan tema SSR tanpa kedipan.
  • Pembantu preferensi — bahasa dan ukuran teks.
  • Katalog komponen — properti, ARIA, dan papan ketik per komponen.

Ada pertanyaan di tengah jalan? Halaman bantuan penuh jawaban — dan jika suatu langkah bisa lebih jelas, beri tahu kami dan kami dengan senang hati akan memperbaiki tutorial ini.