Lily Design System™

Nunjucks பயிற்சி

Eleventy, Express அல்லது எந்த Node வார்ப்புருக் குழாய்க்கும் சேவையகத்தில் ரெண்டர் செய்யப்படும் மேக்ரோக்கள் — Lily இன் பட்டியல் மற்றும் வகுப்புக் கொக்கிகளுடன் GOV.UK பாணி அணுகுமுறை.

நீங்கள் என்ன உருவாக்குவீர்கள்

ஒரு சிறிய சேவையகத்தில் ரெண்டர் செய்யப்படும் தொடர்புப் படிவம் — லேபிளுடன் கூடிய புலம், சமர்ப்பிக்கும் பொத்தான், பூஜ்ஜிய 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

அடுத்த படிகள்

வழியில் கேள்விகளா? உதவிப் பக்கம் பதில்களால் நிறைந்தது — ஒரு படி இன்னும் தெளிவாக இருக்க முடிந்தால், எங்களிடம் சொல்லுங்கள் நாங்கள் மகிழ்ச்சியுடன் பயிற்சியை மேம்படுத்துவோம்.