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ಮುಂದಿನ ಹಂತಗಳು
- ಥೀಮಿಂಗ್ — ಫ್ಲ್ಯಾಶ್-ರಹಿತ SSR ಥೀಮ್ ಬದಲಾವಣೆಗಾಗಿ Eleventy ಕುಕೀ ಮಾದರಿ ಸೇರಿದಂತೆ.
- ಆದ್ಯತೆ ಸಹಾಯಕಗಳು — ಭಾಷೆ ಮತ್ತು ಪಠ್ಯ ಗಾತ್ರ.
- ಘಟಕ ಕ್ಯಾಟಲಾಗ್ — ಪ್ರತಿ ಘಟಕಕ್ಕೆ ಪ್ರಾಪ್‌ಗಳು, ARIA, ಮತ್ತು ಕೀಬೋರ್ಡ್.
ದಾರಿಯಲ್ಲಿ ಪ್ರಶ್ನೆಗಳಿವೆಯೇ? ಸಹಾಯ ಪುಟ ಉತ್ತರಗಳಿಂದ ತುಂಬಿದೆ — ಮತ್ತು ಯಾವುದೇ ಹಂತ ಸ್ಪಷ್ಟವಾಗಬಹುದಾದರೆ, ನಮಗೆ ತಿಳಿಸಿ ಮತ್ತು ನಾವು ಸಂತೋಷದಿಂದ ಟ್ಯುಟೋರಿಯಲ್ ಸುಧಾರಿಸುತ್ತೇವೆ.