Lily Design System™

آموزش Nunjucks

ماکروهای رندرشده در سرور برای Eleventy، Express یا هر خط لوله قالب Node — رویکرد سبک GOV.UK، با فهرست و قلاب‌های کلاس Lily.

چه چیزی می‌سازید

یک فرم تماس کوچک رندرشده در سرور — فیلد دارای برچسب، دکمه ارسال، صفر بار 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

گام‌های بعدی

در مسیر پرسشی دارید؟ صفحه راهنما پر از پاسخ است — و اگر گامی می‌تواند روشن‌تر باشد، به ما بگویید و ما با کمال میل آموزش را بهبود می‌دهیم.