Nunjucks apmācība — Lily Design System

Ko jūs izveidosiet

Neliela servera pusē attēlota kontaktu veidlapa — lauks ar iezīmi, iesniegšanas poga, nulles JavaScript slodze — vispirms kaila, tad noformēta, apmēram 10 minūtēs.

Pirms sākat

Nepieciešams git, Node 22 vai jaunāks un pnpm 10 vai jaunāks. Der jebkurš Nunjucks cauruļvads — Eleventy, Express vai tīrs Nunjucks.

1. solis — Iegūstiet kodu

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

Katra komponente ir direktorija components/ ar macro.njk, tās testu un dokumentāciju — piemēram, components/button/macro.njk. Norādiet savu Nunjucks ielādētāju uz components/ (Eleventy pievienojiet to includes ceļam) un importējiet, kas vajadzīgs.

2. solis — Jūsu pirmā komponente

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

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

Attēlo <button class="button" type="submit">Save</button>. Makro pieņem vienu params objektu: text (ar izbēgšanu) vai html (neapstrādāts), type, label elementam aria-labelun klases āķa pievienotāju.

3. solis — Salieciet nelielu veidlapu

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

Tā kā viss tiek attēlots serverī, pārlūks saņem tīru semantisko HTML ar klases āķiem — nulles baitu JavaScript slodze.

Pārbaudiet savu darbu: ielādējiet lapu, un veidlapa izskatās kaila — tieši kā paredzēts: noformēšana vēl priekšā. Nospiediet Tab: fokuss iet cauri katrai vadīklai, iezīme tiek paziņota, un iesniegšana darbojas. Uzvedība ir gatava; izskats ir jūsu un ir nākamais solis.

4. solis — Noformējiet to

Noformējiet āķus — .button, .text-input, .label, .field — savā stilu lapā vai saistiet gatavu motīvu savā bāzes izkārtojumā:

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

5. solis — Redziet, kā viss darbojas

Nunjucks + Eleventy paraugu lietotne izveido visu katalogu kā statisku vietni ar demonstrāciju lapām katrai komponentei:

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ākamie soļi

Motīvi — ieskaitot Eleventy sīkdatņu modeli SSR motīva pārslēgšanai bez mirgošanas.
Preferenču palīgi — valoda un teksta izmērs.
Komponenšu katalogs — īpašības, ARIA un tastatūra katrai komponentei.

Jautājumi pa ceļam? Palīdzības lapa ir pilna atbilžu — un, ja kāds solis varētu būt skaidrāks, pastāstiet mums un mēs labprāt uzlabosim apmācību.