Koyarwar Nunjucks — Lily Design System

Abin da za ka gina

Ƙaramin fom na tuntuɓa da aka zana a sabar — fili mai lakabi, maɓallin aikawa, sifili nauyin JavaScript — da farko ba tare da tsari ba, sannan da tsari, cikin kusan mintuna 10.

Kafin ka fara

Kana buƙatar git, Node 22 ko sabo, da pnpm 10 ko sabo. Kowane bututun Nunjucks yana aiki — Eleventy, Express ko Nunjucks mai sauƙi.

Mataki na 1 — Ɗauki lambar

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

Kowane abu kundin adireshi ne a cikin components/ mai macro.njk, gwajinsa da takardunsa — misali components/button/macro.njk. Nuna mai ɗora Nunjucks ɗinka zuwa components/ (a Eleventy, ƙara shi zuwa hanyar includes) kuma shigo da abin da kake buƙata.

Mataki na 2 — Abu na farko naka

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

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

Yana nuna <button class="button" type="submit">Save</button>. Macros suna ɗaukar abu params ɗaya: text (an kauce) ko html (ɗanye), type, label don aria-labelda mai ƙara ƙugiyar aji.

Mataki na 3 — Haɗa ƙaramin fom

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

Saboda komai ana zana shi a sabar, mai bincike yana karɓar HTML mai ma'ana tsantsa da ƙugiyoyin aji — nauyin JavaScript na bytes sifili.

Duba aikinka: loda shafin kuma fom ɗin yana kama da maras tsari — daidai kamar yadda aka nufa: tsarin yana nan gaba. Danna Tab: mayar da hankali yana ratsa kowane abin sarrafawa, ana sanar da lakabin, kuma aikawa yana aiki. An gama halayyar; kamannin naka ne kuma shi ne mataki na gaba.

Mataki na 4 — Ba shi tsari

Ba ƙugiyoyin tsari — .button, .text-input, .label, .field — a takardar salonka, ko haɗa jigon da aka shirya a tsarin tushenka:

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

Mataki na 5 — Kalli komai yana aiki

App ɗin misali na Nunjucks + Eleventy yana gina cikakken kundin a matsayin shafin tsaye mai shafukan nuni ga kowane abu:

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

Matakai na gaba

Jigogi — ciki har da tsarin kuki na Eleventy don sauya jigon SSR ba tare da kyalkyali ba.
Masu taimakon abubuwan so — harshe da girman rubutu.
Kundin abubuwa — siffofi, ARIA da maɓallan rubutu ga kowane abu.

Tambayoyi a hanya? Shafin taimako cike yake da amsoshi — kuma idan wani mataki zai iya zama mafi bayyana, gaya mana kuma za mu gyara koyarwar da farin ciki.