Nunjucks 튜토리얼

만들 것

작은 서버 렌더링 문의 폼 — 레이블이 있는 입력, 제출 버튼, JavaScript 페이로드 0 — 먼저 꾸미지 않은 상태로, 그다음 스타일을 입혀서 약 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 페이로드는 0바이트입니다.

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 쿠키 패턴 포함.
• 환경설정 헬퍼 — 언어와 텍스트 크기.
• 컴포넌트 카탈로그 — 컴포넌트별 props, ARIA, 키보드.

진행하다가 궁금한 점이 있다면 도움말 페이지 에 답이 많이 있습니다. 어떤 단계가 더 명확해질 수 있다면 알려 주세요 . 기꺼이 튜토리얼을 개선하겠습니다.