Lily Design System™

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 اور کی بورڈ۔

راستے میں سوالات ہیں؟ مدد کا صفحہ جوابات سے بھرا ہے — اور اگر کوئی مرحلہ مزید واضح ہو سکتا ہے، ہمیں بتائیں اور ہم خوشی سے ٹیوٹوریل بہتر بنائیں گے۔