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

השלבים הבאים

שאלות בדרך? עמוד העזרה מלא בתשובות — ואם שלב יכול להיות ברור יותר, ספרו לנו ונשמח לשפר את המדריך.