Lily Design System™

บทเรียน Nunjucks

แมโครที่เรนเดอร์บนเซิร์ฟเวอร์สำหรับ Eleventy, Express หรือไปป์ไลน์เทมเพลต Node ใดก็ได้ — แนวทางแบบ GOV.UK พร้อมแคตตาล็อกและ class hook ของ Lily

สิ่งที่คุณจะสร้าง

ฟอร์มติดต่อขนาดเล็กที่เรนเดอร์บนเซิร์ฟเวอร์ — ช่องกรอกที่มีป้ายกำกับ, ปุ่มส่ง, ไม่มี JavaScript payload — เริ่มจากแบบไม่ตกแต่งก่อน แล้วค่อยใส่สไตล์ ภายในประมาณ 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และตัวต่อท้าย class hook

ขั้นที่ 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 เชิงความหมายล้วน ๆ พร้อม class hook — JavaScript payload ศูนย์ไบต์

ตรวจสอบงานของคุณ: โหลดหน้าแล้วฟอร์มจะดูธรรมดา — ตามที่ตั้งใจ สไตล์ยังรออยู่ข้างหน้า กด Tabโฟกัสจะเลื่อนผ่านทุกตัวควบคุม ป้ายกำกับถูกอ่านออกเสียง และการส่งทำงานได้ พฤติกรรมเสร็จแล้ว ส่วนรูปลักษณ์เป็นของคุณ และเป็นขั้นต่อไป

ขั้นที่ 4 — ใส่สไตล์

ใส่สไตล์ให้ hook — .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

ขั้นต่อไป

มีคำถามระหว่างทางไหม? หน้าช่วยเหลือ เต็มไปด้วยคำตอบ — และถ้าขั้นตอนไหนทำให้ชัดเจนกว่านี้ได้ บอกเรา แล้วเรายินดีปรับปรุงบทเรียน