„Nunjucks“ vadovas — Lily Design System

Ką sukursite

Nedidelė serveryje atvaizduojama kontaktų forma — laukas su žyma, siuntimo mygtukas, nulinė JavaScript apkrova — pirma plika, paskui apipavidalinta, per maždaug 10 minučių.

Prieš pradedant

Reikia git, Node 22 ar naujesnės ir pnpm 10 ar naujesnio. Tinka bet kuris „Nunjucks“ vamzdynas — „Eleventy“, „Express“ arba paprastas „Nunjucks“.

1 žingsnis — Gaukite kodą

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

Kiekvienas komponentas yra katalogas components/ su macro.njk, jo testu ir dokumentacija — pavyzdžiui components/button/macro.njk. Nukreipkite savo „Nunjucks“ įkroviklį į components/ („Eleventy“ pridėkite jį prie includes kelio) ir importuokite, ko reikia.

2 žingsnis — Jūsų pirmasis komponentas

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

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

Atvaizduoja <button class="button" type="submit">Save</button>. Makrokomandos priima vieną params objektą: text (pabėgtas) arba html (neapdorotas), type, label elementui aria-labelir klasės kablio pridėtuvą.

3 žingsnis — Sudėkite nedidelę 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>

Kadangi viskas atvaizduojama serveryje, naršyklė gauna gryną semantinį HTML su klasių kabliais — nulio baitų JavaScript apkrova.

Patikrinkite savo darbą: įkelkite puslapį ir forma atrodo plika — kaip ir numatyta: stilius dar laukia. Paspauskite Tab: fokusas pereina per kiekvieną valdiklį, žyma paskelbiama, o siuntimas veikia. Elgesys baigtas; išvaizda jūsų ir yra kitas žingsnis.

4 žingsnis — Apipavidalinkite

Apipavidalinkite kablius — .button, .text-input, .label, .field — savo stilių lentelėje arba susiekite paruoštą temą savo bazinėje maketavimo byloje:

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

5 žingsnis — Pažiūrėkite, kaip viskas veikia

„Nunjucks“ + „Eleventy“ pavyzdinė programa sukuria visą katalogą kaip statinę svetainę su demonstraciniais puslapiais kiekvienam komponentui:

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

Tolesni žingsniai

Temos — įskaitant „Eleventy“ slapukų šabloną SSR temos perjungimui be mirgėjimo.
Nuostatų pagalbininkai — kalba ir teksto dydis.
Komponentų katalogas — savybės, ARIA ir klaviatūra kiekvienam komponentui.

Klausimų pakeliui? Pagalbos puslapis pilnas atsakymų — o jei kuris nors žingsnis galėtų būti aiškesnis, pasakykite mums ir mielai patobulinsime vadovą.