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

తదుపరి దశలు

దారిలో ప్రశ్నలా? సహాయ పేజీ సమాధానాలతో నిండి ఉంది — మరియు ఏదైనా దశను మరింత స్పష్టంగా చేయవచ్చంటే, మాకు చెప్పండి మరియు మేము సంతోషంగా ట్యుటోరియల్‌ను మెరుగుపరుస్తాము.