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

ਅਗਲੇ ਕਦਮ

ਰਾਹ ਵਿੱਚ ਸਵਾਲ ਹਨ? ਮਦਦ ਪੰਨਾ ਜਵਾਬਾਂ ਨਾਲ ਭਰਿਆ ਹੈ — ਅਤੇ ਜੇ ਕੋਈ ਕਦਮ ਹੋਰ ਸਾਫ਼ ਹੋ ਸਕਦਾ ਹੈ, ਸਾਨੂੰ ਦੱਸੋ ਅਤੇ ਅਸੀਂ ਖ਼ੁਸ਼ੀ ਨਾਲ ਟਿਊਟੋਰਿਅਲ ਸੁਧਾਰਾਂਗੇ।