Lily Design System™

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

পরবর্তী ধাপ

পথে প্রশ্ন আছে? সহায়তা পাতা উত্তরে ভরা — আর কোনো ধাপ আরও পরিষ্কার হতে পারলে, আমাদের জানান আর আমরা খুশি মনে টিউটোরিয়াল উন্নত করব।