Mafunzo ya Nunjucks — Lily Design System

Utakachojenga

Fomu ndogo ya mawasiliano inayoonyeshwa na seva — pembejeo yenye lebo, kitufe cha kutuma, bila mzigo wa JavaScript — kwanza bila mapambo, kisha ikiwa na mapambo, kwa takriban dakika 10.

Kabla ya kuanza

Unahitaji git, Node 22 au zaidi, na pnpm 10 au zaidi. Mfumo wowote wa Nunjucks unafaa — Eleventy, Express, au Nunjucks ya kawaida.

Hatua ya 1 — Pata msimbo

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

Kila kipengele ni saraka katika components/ yenye macro.njk, jaribio lake, na nyaraka zake — kwa mfano components/button/macro.njk. Elekeza kipakiaji chako cha Nunjucks kwa components/ (katika Eleventy, kiongeze kwenye njia ya includes) na uingize unachohitaji.

Hatua ya 2 — Kipengele chako cha kwanza

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

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

Huonyesha <button class="button" type="submit">Save</button>. Makro huchukua kitu kimoja cha params: text (kimetoroshwa) au html (ghafi), type, label kwa aria-label, na kiongeza kishikio cha darasa.

Hatua ya 3 — Unda fomu ndogo

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

Kwa kuwa kila kitu huonyeshwa kwenye seva, kivinjari hupokea HTML safi ya kisemantiki yenye vishikio vya darasa — mzigo wa JavaScript wa baiti sifuri.

Hakiki kazi yako: pakia ukurasa na fomu inaonekana ya kawaida — kama ilivyokusudiwa: mapambo bado yanakuja. Bonyeza Tab: umakini husogea kwenye kila kidhibiti, lebo inatangazwa, na kutuma kunafanya kazi. Tabia imekamilika; mwonekano ni wako, na ndio unaofuata.

Hatua ya 4 — Ipambe

Pamba vishikio — .button, .text-input, .label, .field — katika karatasi yako ya mitindo, au unganisha mandhari yaliyo tayari katika mpangilio wako wa msingi:

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

Hatua ya 5 — Ona kila kitu kikifanya kazi

Programu ya mifano ya Nunjucks + Eleventy hujenga orodha kamili kama tovuti tuli yenye kurasa za maonyesho kwa kila kipengele:

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

Hatua zinazofuata

Mandhari — ikiwemo mchoro wa vidakuzi wa Eleventy kwa kubadili mandhari kwa SSR bila kuvuma.
Visaidizi vya mapendeleo — lugha na ukubwa wa maandishi.
Orodha ya vipengele — sifa, ARIA, na kibodi kwa kila kipengele.

Una maswali njiani? Ukurasa wa msaada umejaa majibu — na kama hatua inaweza kuwa wazi zaidi, tuambie na tutafurahi kuboresha mafunzo.