Nunjucks ट्यूटोरियल
Eleventy, Express भा कवनो Node टेम्पलेट पाइपलाइन खातिर सर्वर-रेंडर मैक्रो — Lily के कैटलॉग आ क्लास हुक के साथे GOV.UK-शैली के तरीका।
रउआ का बनाईब
एगो छोट सर्वर-रेंडर संपर्क फॉर्म — लेबल वाला क्षेत्र, जमा करे के बटन, शून्य 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 भार।
आपन काम जाँचीं: पन्ना लोड करीं आ फॉर्म सादा लउकेला — ठीक वइसहीं जइसे सोचल गइल रहे: शैली अभी आगे बा। दबाईं Tab: फोकस हर नियंत्रण से गुजरेला, लेबल घोषित होखेला आ जमा करे के काम करेला। व्यवहार पूरा बा; रूप रउआ के बा आ अगिला कदम बा।
कदम 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 आ कीबोर्ड।
रास्ता में सवाल बा? मदद पन्ना जवाब से भरल बा — आ अगर कवनो कदम अउरी साफ हो सकेला, हमनी के बताईं आ हमनी खुशी से ट्यूटोरियल सुधारब।