Lily Design System™

Tiwtorial Nunjucks

Macros wedi'u rendro ar y gweinydd ar gyfer Eleventy, Express neu unrhyw bibell templedi Node — y dull arddull GOV.UK, gyda chatalog a bachau dosbarth Lily.

Beth fyddwch chi'n ei adeiladu

Ffurflen gyswllt fach wedi'i rendro ar y gweinydd — maes â label, botwm cyflwyno, sero llwyth JavaScript — yn noeth yn gyntaf, yna wedi'i steilio, mewn tua 10 munud.

Cyn i chi ddechrau

Mae arnoch angen git, Node 22 neu'n hwyrach, a pnpm 10 neu'n hwyrach. Mae unrhyw bibell Nunjucks yn gweithio — Eleventy, Express neu Nunjucks syml.

Cam 1 — Cael y cod

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

Mae pob cydran yn gyfeiriadur yn components/ gyda macro.njk, ei phrawf a'i dogfennaeth — er enghraifft components/button/macro.njk. Pwyntiwch eich llwythwr Nunjucks at components/ (yn Eleventy, ychwanegwch ef at lwybr includes) a mewnforiwch yr hyn sydd ei angen arnoch.

Cam 2 — Eich cydran gyntaf

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

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

Yn dangos <button class="button" type="submit">Save</button>. Mae macros yn cymryd un gwrthrych params: text (wedi'i ddianc) neu html (crai), type, label ar gyfer aria-labelac atodydd bachyn dosbarth.

Cam 3 — Cyfansoddi ffurflen fach

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

Gan fod popeth yn cael ei rendro ar y gweinydd, mae'r porwr yn cael HTML semantig pur gyda'r bachau dosbarth — llwyth JavaScript o sero beit.

Gwiriwch eich gwaith: llwythwch y dudalen ac mae'r ffurflen yn edrych yn noeth — yn union fel y bwriadwyd: mae'r steilio eto i ddod. Pwyswch Tab: mae ffocws yn symud trwy bob rheolydd, caiff y label ei gyhoeddi ac mae cyflwyno'n gweithio. Mae'r ymddygiad wedi'i orffen; eich un chi yw'r olwg a dyma'r cam nesaf.

Cam 4 — Ei steilio

Steiliwch y bachau — .button, .text-input, .label, .field — yn eich taflen arddull, neu cysylltwch thema barod yn eich cynllun sylfaenol: 

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

Cam 5 — Ei weld yn gweithio i gyd

Ap enghreifftiol Nunjucks + Eleventy yn adeiladu'r catalog llawn fel gwefan statig gyda thudalennau arddangos ar gyfer pob cydran: 

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

Y camau nesaf

Cwestiynau ar y ffordd? Mae'r dudalen gymorth yn llawn atebion — ac os gellid gwneud cam yn gliriach, dywedwch wrthym a byddwn yn falch o wella'r tiwtorial.