Οδηγός Nunjucks — Lily Design System

Τι θα φτιάξετε

Μια μικρή φόρμα επικοινωνίας που αποδίδεται στον διακομιστή — πεδίο με ετικέτα, κουμπί υποβολής, μηδενικό φορτίο 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 μηδέν byte.

Ελέγξτε τη δουλειά σας: φορτώστε τη σελίδα και η φόρμα φαίνεται γυμνή — ακριβώς όπως προβλέπεται: η μορφοποίηση έρχεται μετά. Πατήστε 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

Επόμενα βήματα

Θέματα — συμπεριλαμβανομένου του μοτίβου cookie του Eleventy για εναλλαγή θέματος SSR χωρίς τρεμόπαιγμα.
Βοηθοί προτιμήσεων — γλώσσα και μέγεθος κειμένου.
Κατάλογος στοιχείων — ιδιότητες, ARIA και πληκτρολόγιο ανά στοιχείο.

Ερωτήσεις στην πορεία; Η σελίδα βοήθειας είναι γεμάτη απαντήσεις — και αν ένα βήμα μπορεί να γίνει πιο σαφές, πείτε μας και θα βελτιώσουμε με χαρά τον οδηγό.