Nunjucks ट्युटोरियल
Eleventy, Express किंवा कोणत्याही Node टेम्पलेट पाइपलाइनसाठी सर्व्हर-रेंडर मॅक्रो — Lily च्या कॅटलॉग आणि क्लास हुकसह GOV.UK-शैलीचा दृष्टिकोन.
तुम्ही काय बनवाल
एक छोटा सर्व्हर-रेंडर संपर्क फॉर्म — लेबल असलेले क्षेत्र, सबमिट बटण, शून्य JavaScript भार — आधी साधा, मग शैलीबद्ध, सुमारे १० मिनिटांत.
सुरू करण्यापूर्वी
तुम्हाला git, Node 22 किंवा नवीन, आणि pnpm 10 किंवा नवीन लागेल. कोणतीही Nunjucks पाइपलाइन चालेल — Eleventy, Express किंवा साधे Nunjucks.
पायरी १ — कोड मिळवा
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 मार्गात जोडा) आणि हवे ते आयात करा.
पायरी २ — तुमचा पहिला घटक
{% 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आणि एक क्लास हुक जोडणारा.
पायरी ३ — एक छोटा फॉर्म बनवा
{% 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 भार.
तुमचे काम तपासा: पृष्ठ लोड करा आणि फॉर्म साधा दिसतो — अगदी ठरल्याप्रमाणे: शैली अजून पुढे आहे. दाबा Tab: फोकस प्रत्येक नियंत्रणातून जातो, लेबल जाहीर होते आणि सबमिट चालते. वर्तन पूर्ण आहे; देखावा तुमचा आहे आणि पुढची पायरी आहे.
पायरी ४ — त्याला शैली द्या
हुकना शैली द्या — .button, .text-input,
.label, .field — तुमच्या स्टाइलशीटमध्ये, किंवा तुमच्या मूळ लेआउटमध्ये तयार थीम लिंक करा:
<link rel="stylesheet" href="/themes/united-kingdom-government-digital-service.css" />पायरी ५ — सगळे चालताना पहा
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 आणि कीबोर्ड.
वाटेत प्रश्न आहेत? मदत पृष्ठ उत्तरांनी भरलेले आहे — आणि एखादी पायरी अधिक स्पष्ट करता आली तर, आम्हाला सांगा आणि आम्ही आनंदाने ट्युटोरियल सुधारू.