Nunjucks eğitimi — Lily Design System

Ne oluşturacaksınız

Küçük, sunucuda işlenen bir iletişim formu — etiketli girdi, gönder düğmesi, sıfır JavaScript yükü — önce çıplak, sonra biçimlendirilmiş olarak, yaklaşık 10 dakikada.

Başlamadan önce

git, Node 22 veya üstü ve pnpm 10 veya üstü gerekir. Herhangi bir Nunjucks hattı olur — Eleventy, Express veya düz Nunjucks.

Adım 1 — Kodu edinin

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

Her bileşen şurada bir dizindir: components/ içinde bir macro.njk, testi ve belgeleri bulunur — örneğin components/button/macro.njk. Nunjucks yükleyicinizi şuraya yönlendirin: components/ (Eleventy'de includes yoluna ekleyin) ve ihtiyacınız olanı içe aktarın.

Adım 2 — İlk bileşeniniz

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

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

Şunu işler: <button class="button" type="submit">Save</button>. Makrolar tek bir params nesnesi alır: text (kaçışlı) veya html (ham), type, label için aria-labelve bir sınıf kancası ekleyici.

Adım 3 — Küçük bir form oluşturun

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

Her şey sunucuda işlendiği için tarayıcı, sınıf kancalı saf anlamsal HTML alır — sıfır baytlık JavaScript yükü.

Çalışmanızı kontrol edin: sayfayı yükleyin; form sade görünür — tam olarak amaçlandığı gibi: biçimlendirme henüz ileride. Şuna basın: Tab: odak her denetimde ilerler, etiket duyurulur ve gönderme çalışır. Davranış tamam; görünüm sizin ve sıradaki adım.

Adım 4 — Biçimlendirin

Kancaları biçimlendirin — .button, .text-input, .label, .field — stil sayfanızda ya da temel düzeninizde hazır bir temayı bağlayın:

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

Adım 5 — Hepsinin çalıştığını görün

Nunjucks + Eleventy örnek uygulaması tüm kataloğu bileşen başına demo sayfalarıyla statik bir site olarak derler:

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

Sonraki adımlar

Temalar — titremesiz SSR tema geçişi için Eleventy çerez kalıbı dahil.
Tercih yardımcıları — dil ve metin boyutu.
Bileşen kataloğu — bileşen başına özellikler, ARIA ve klavye.

Yol boyunca sorunuz mu var? Yardım sayfası yanıtlarla dolu — ve bir adım daha açık olabilirse, bize söyleyin ve eğitimi memnuniyetle iyileştirelim.