Lily Design System™

دليل Nunjucks

ماكرو معروضة على الخادم لـ Eleventy أو Express أو أي خط قوالب في Node — نهج بأسلوب GOV.UK، مع فهرس Lily وخطّافات الأصناف.

ما الذي ستبنيه

نموذج اتصال صغير معروض على الخادم — حقل بتسمية، زر إرسال، صفر حمولة 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

الخطوات التالية

أسئلة في الطريق؟ صفحة المساعدة مليئة بالإجابات — وإن أمكن توضيح خطوة أكثر، أخبرنا وسنحسّن الدليل بكل سرور.