Lily Design System™

Nunjucks-kennsluefni

Miðlarabirt makró fyrir Eleventy, Express eða hvaða Node-sniðmátsferli sem er — GOV.UK-aðferðin, með safni og klasakrókum Lily.

Það sem þú munt byggja

Lítið miðlarabirt tengiliðaeyðublað — innsláttarreitur með merkimiða, sendihnappur, núll JavaScript-farmur — fyrst ber, svo stílað, á um 10 mínútum.

Áður en þú byrjar

Þú þarft git, Node 22 eða nýrra og pnpm 10 eða nýrra. Hvaða Nunjucks-ferli sem er virkar — Eleventy, Express eða hreint Nunjucks.

Skref 1 — Náðu í kóðann

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

Hver íhlutur er mappa í components/ með macro.njk, prófi hennar og skjölum — til dæmis components/button/macro.njk. Beindu Nunjucks-hleðslutækinu að components/ (í Eleventy, bættu því við includes-slóðina) og fluttu inn það sem þú þarft.

Skref 2 — Fyrsti íhluturinn þinn

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

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

Birtir <button class="button" type="submit">Save</button>. Makró taka einn params-hlut: text (umbreytt) eða html (hrátt), type, label fyrir aria-labelog klasakróksviðbót.

Skref 3 — Settu saman lítið eyðublað

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

Þar sem allt er birt á miðlaranum fær vafrinn hreint merkingarfræðilegt HTML með klasakrókunum — JavaScript-farmur upp á núll bæti.

Athugaðu verkið: hlaðið síðuna og eyðublaðið lítur einfalt út — nákvæmlega eins og ætlað er: stíllinn er enn framundan. Ýttu á Tab: fókusinn færist í gegnum hverja stýringu, merkimiðinn er lesinn upp og sending virkar. Hegðunin er tilbúin; útlitið er þitt og er næst.

Skref 4 — Stílaðu það

Stílaðu krókana — .button, .text-input, .label, .field — í stílblaðinu þínu, eða tengdu tilbúið þema í grunnuppsetningunni: 

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

Skref 5 — Sjáðu allt virka

Nunjucks + Eleventy dæmaforritið byggir allt safnið sem kyrrstæðan vef með sýnisíðu fyrir hvern íhlut: 

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

Næstu skref

  • Þemu — þar á meðal Eleventy-kökumynstrið fyrir blikklaus SSR-þemaskipti.
  • Stillingahjálpartæki — tungumál og textastærð.
  • Íhlutasafn — eiginleikar, ARIA og lyklaborð fyrir hvern íhlut.

Spurningar á leiðinni? hjálparsíðan er full af svörum — og ef skref gæti verið skýrara, segðu okkur og við bætum kennsluefnið með ánægju.