Lily Design System™

Oideachadh Nunjucks

Macros air an reandaradh air an fhrithealaiche airson Eleventy, Express no loidhne-phìoba theamplaidean Node sam bith — an dòigh-obrach coltach ri GOV.UK, le catalog is crochaidhean clas Lily.

Na thogas tu

Foirm fios-thugainn bheag air a reandaradh air an fhrithealaiche — in-chur le leubail, putan cur-a-steach, bun-uallach JavaScript neoni — an toiseach lom, an uairsin le stoidhle, ann an timcheall air 10 mionaidean.

Mus tòisich thu

Feumaidh tu git, Node 22 no nas ùire, agus pnpm 10 no nas ùire. Obraichidh loidhne-phìoba Nunjucks sam bith — Eleventy, Express no Nunjucks sìmplidh.

Ceum 1 — Faigh an còd

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

Tha gach co-phàirt na eòlaire ann an components/ le macro.njk, an deuchainn aige agus na sgrìobhainnean aige — mar eisimpleir components/button/macro.njk. Seòl do luchdaichear Nunjucks gu components/ (ann an Eleventy, cuir ris an t-slighe includes e) agus ion-phortaich na tha a dhìth ort.

Ceum 2 — A’ chiad cho-phàirt agad

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

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

A’ reandaradh <button class="button" type="submit">Save</button>. Gabhaidh macros aon nì params: text (air a theicheadh) no html (amh), type, label airson aria-label, agus ceanglaiche crochaidh clas.

Ceum 3 — Cuir foirm bheag ri chèile

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

Leis gu bheil a h-uile càil air a reandaradh air an fhrithealaiche, gheibh am brabhsair HTML seamantach glan le na crochaidhean clas — bun-uallach JavaScript de neoni bytes.

Dèan cinnteach air d’ obair: luchdaich an duilleag agus tha an fhoirm a’ coimhead lom — dìreach mar a bha dùil: tha an stoidhle fhathast romhainn. Brùth Tab: bidh am fòcas a’ gluasad tro gach smachd, tha an leubail air ainmeachadh, agus obraichidh cur-a-steach. Tha an giùlan deiseil; is leatsa an coltas, agus is e an ath rud.

Ceum 4 — Cuir stoidhle air

Cuir stoidhle air na crochaidhean — .button, .text-input, .label, .field — anns a’ bhileag-stoidhle agad, no ceangail ùrlar deiseil sa bhun-chruth agad: 

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

Ceum 5 — Faic a h-uile càil ag obair

Tha an tagradh eisimpleir Nunjucks + Eleventy a’ togail an catalog slàn mar làrach statach le duilleagan taisbeanaidh airson gach co-phàirt: 

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

Na ceumannan a leanas

Ceistean air an t-slighe? Tha an duilleag chuideachaidh làn fhreagairtean — agus nam b’ urrainn ceum a bhith nas soilleire, innis dhuinn agus nì sinn an t-oideachadh nas fheàrr le toileachas.