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 और कीबोर्ड।
रास्ते में सवाल हैं? सहायता पृष्ठ उत्तरों से भरा है — और अगर कोई चरण और स्पष्ट हो सकता है, हमें बताएँ और हम खुशी से ट्यूटोरियल सुधारेंगे।