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 (ຖືກ escape) ຫຼື 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 — ໃນ stylesheet ຂອງທ່ານ, ຫຼືເຊື່ອມຕໍ່ຮູບແບບສີສັນສຳເລັດຮູບໃນໂຄງຮ່າງພື້ນຖານຂອງທ່ານ: 

<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

ຂັ້ນຕອນຕໍ່ໄປ

ມີຄຳຖາມລະຫວ່າງທາງບໍ? ໜ້າຊ່ວຍເຫຼືອ ເຕັມໄປດ້ວຍຄຳຕອບ — ແລະຖ້າຂັ້ນຕອນໃດຊັດເຈນຂຶ້ນໄດ້, ບອກພວກເຮົາ ແລະພວກເຮົາຍິນດີປັບປຸງບົດສອນ.