Lily Design System™

Tutorial sa Nunjucks

Mga macro na nire-render sa server para sa Eleventy, Express, o anumang Node templating pipeline — ang GOV.UK-style na paraan, na may catalog at mga class hook ng Lily.

Ang bubuuin mo

Isang maliit na server-rendered na contact form — input na may label, submit button, zero JavaScript payload — una ay hubad, pagkatapos ay may istilo, sa humigit-kumulang 10 minuto.

Bago ka magsimula

Kailangan mo ng git, Node 22 o mas bago, at pnpm 10 o mas bago. Gumagana ang anumang Nunjucks pipeline — Eleventy, Express, o payak na Nunjucks.

Hakbang 1 — Kunin ang code

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

Bawat component ay direktoryo sa components/ na may macro.njk, ang test nito, at ang mga dokumento nito — halimbawa components/button/macro.njk. Ituro ang iyong Nunjucks loader sa components/ (sa Eleventy, idagdag ito sa includes path) at i-import ang kailangan mo.

Hakbang 2 — Ang una mong component

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

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

Nagre-render ng <button class="button" type="submit">Save</button>. Kumukuha ang mga macro ng iisang params object: text (escaped) o html (raw), type, label para sa aria-label, at isang class hook appender.

Hakbang 3 — Bumuo ng maliit na form

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

Dahil lahat ay nire-render sa server, tumatanggap ang browser ng purong semantic HTML na may mga class hook — JavaScript payload na zero bytes.

Suriin ang gawa mo: i-load ang pahina at mukhang payak ang form — eksakto ayon sa layunin: ang istilo ay nasa unahan pa. Pindutin ang Tab: gumagalaw ang focus sa bawat kontrol, naba-balita ang label, at gumagana ang pagsumite. Tapos na ang gawi; sa iyo ang hitsura at iyon ang susunod.

Hakbang 4 — Bigyan ng istilo

Bigyan ng istilo ang mga hook — .button, .text-input, .label, .field — sa iyong stylesheet, o mag-link ng handa nang tema sa iyong base layout: 

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

Hakbang 5 — Tingnan ang lahat na gumagana

Ang Nunjucks + Eleventy na halimbawang app ay bumubuo ng buong catalog bilang static site na may demo page bawat component: 

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

Mga susunod na hakbang

May mga tanong habang nasa daan? Ang pahina ng tulong ay puno ng mga sagot — at kung maaaring maging mas malinaw ang isang hakbang, sabihin sa amin at masaya naming pagbubutihin ang tutorial.