Lily Design System™

មេរៀន Nunjucks

ម៉ាក្រូដែលបង្ហាញលើម៉ាស៊ីនមេសម្រាប់ Eleventy, Express ឬបំពង់គំរូ Node ណាមួយ — វិធីសាស្ត្រតាមរបៀប GOV.UK ជាមួយកាតាឡុក និង class hook របស់ 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 (ត្រូវបាន escape) ឬ html (ឆៅ) type, label សម្រាប់ aria-labelនិងឧបករណ៍បន្ថែម class hook។

ជំហាន ៣ — ផ្សំទម្រង់តូចមួយ

{% 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 សូន្យបៃ។

ពិនិត្យការងាររបស់អ្នក៖ ផ្ទុកទំព័រ ហើយទម្រង់មើលទៅធម្មតា — ដូចដែលបានគ្រោងទុក៖ រចនាប័ទ្មនៅខាងមុខ។ ចុច Tab៖ ការផ្តោតផ្លាស់ទីតាមការគ្រប់គ្រងនីមួយៗ ស្លាកត្រូវបានប្រកាស ហើយការដាក់ស្នើដំណើរការ។ អាកប្បកិរិយាបានចប់; រូបរាងជារបស់អ្នក ហើយជាជំហានបន្ទាប់។

ជំហាន ៤ — ដាក់រចនាប័ទ្ម

ដាក់រចនាប័ទ្ម hook — .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

ជំហានបន្ទាប់

មានសំណួរតាមផ្លូវ? ទំព័រជំនួយ ពេញដោយចម្លើយ — ហើយប្រសិនបើជំហានណាអាចច្បាស់ជាងនេះ ប្រាប់យើង ហើយយើងនឹងកែលម្អមេរៀនដោយអំណរ។