Nunjucks ટ્યુટોરિયલ

તમે શું બનાવશો

એક નાનું સર્વર-રેન્ડર સંપર્ક ફોર્મ — લેબલ સાથેનું ક્ષેત્ર, સબમિટ બટન, શૂન્ય JavaScript ભાર — પહેલાં સાદું, પછી શૈલીબદ્ધ, લગભગ 10 મિનિટમાં.

શરૂ કરતા પહેલાં

તમને git, Node 22 કે નવું, અને pnpm 10 કે નવું જોઈએ. કોઈ પણ Nunjucks પાઇપલાઇન ચાલશે — Eleventy, Express અથવા સાદું Nunjucks.

પગલું 1 — કોડ મેળવો

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

દરેક ઘટક અહીં એક ડિરેક્ટરી છે: components/ એક macro.njkસાથે, તેનું પરીક્ષણ અને તેના દસ્તાવેજો — ઉદાહરણ તરીકે components/button/macro.njk. તમારા Nunjucks લોડરને અહીં નિર્દેશ કરો components/ (Eleventy માં તેને includes માર્ગમાં ઉમેરો) અને જે જોઈએ તે આયાત કરો.

પગલું 2 — તમારો પહેલો ઘટક

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

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

આ દર્શાવે છે <button class="button" type="submit">Save</button>. મેક્રો એક જ params ઑબ્જેક્ટ લે છે: text (એસ્કેપ કરેલું) અથવા html (કાચું), type, label માટે aria-labelઅને એક ક્લાસ હૂક ઉમેરનાર.

પગલું 3 — એક નાનું ફોર્મ બનાવો

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

કારણ કે બધું સર્વર પર રેન્ડર થાય છે, બ્રાઉઝરને ક્લાસ હૂક સાથે શુદ્ધ અર્થપૂર્ણ HTML મળે છે — શૂન્ય બાઇટનો JavaScript ભાર.

પગલું 4 — તેને શૈલી આપો

હૂકને શૈલી આપો — .button, .text-input, .label, .field — તમારી સ્ટાઇલશીટમાં, અથવા તમારા બેઝ લેઆઉટમાં તૈયાર થીમ લિંક કરો:

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

પગલું 5 — બધું કામ કરતું જુઓ

Nunjucks + Eleventy ઉદાહરણ એપ દરેક ઘટકના નિદર્શન પૃષ્ઠો સાથે સંપૂર્ણ કેટલોગ સ્થિર સાઇટ તરીકે બનાવે છે:

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

આગળનાં પગલાં

• થીમ — ઝબકારા વિનાના SSR થીમ બદલાવ માટે Eleventy કૂકી પેટર્ન સહિત.
• પસંદગી સહાયકો — ભાષા અને લખાણનું કદ.
• ઘટક કેટલોગ — દરેક ઘટક માટે ગુણધર્મો, ARIA અને કીબોર્ડ.

રસ્તામાં પ્રશ્નો છે? મદદ પૃષ્ઠ જવાબોથી ભરેલું છે — અને જો કોઈ પગલું વધુ સ્પષ્ટ થઈ શકે, અમને કહો અને અમે ખુશીથી ટ્યુટોરિયલ સુધારીશું.