Nunjucks

Nunjucks란?
모질라의 자바스크립트 템플릿 언어
다국어 처리, 공통역역 Include, 페이지별 분기처리, 재사용 컴포넌트 작성 등에 사용한다.

변수를 사용하려면 {{}} 안에 사용할 변수를 넣어준다.
객체를 전달하는 경우에는 객체에 .을 붙여서 {{ food.fruit }} 으로 쓸 수 있다.
함수를 호출하는 경우 {{ food.func() }} 으로 쓴다.

프로그래밍에 사용할 연산자를 사용하는 경우 {% %}를 사용한다.

HTML의 특정 조건에 따라 다른 값을 보이고 싶다면 다음과 같이 쓴다.

{% if 조건 %}
조건을 충족했을 때 보여주는 내용
{% else %}
조건을 충족하지 않았을 때 보여주는 내용
{% endif %}

템플릿의 내용을 재사용 할 때는 다음과 같이 재사용 할 HTML을 만든다.

{% block header %}
기본 내용입니다.
{% endblock %}

<section>
  {% block top %}{% endblock %}
</section>

<section>
  {% block bottom %}{% endblock %}
</section>

위와 같이 작성한 content.html 파일이 있다고 할 때, 다른 파일에서 위의 내용을 재사용 하려면 다음과 같이 쓴다.

{% extends "content.html" %}

{% block top %}
상단 콘텐츠입니다.
{% endblock %}

{% block bottom %}
하단 콘텐츠입니다.
{% endblock %}

렌더링한 결과는 다음과 같다.

기본 내용입니다.
 
<section>
 상단 콘텐츠입니다.
</section>

<section>
 하단 콘텐츠입니다.
</section>

반복문의 사용하여 콘텐츠를 사용할 때는 다음과 같이 쓴다.

<ul>
{% for item in items %}
  <li>{{ item.title }}</li>
{% else %}
  <li>아이템이 비어있을 때 나타납니다.</li>
{% endfor %}
</ul>

변수를 생성, 수정할 때는 set를 사용한다.

{{ username }}
{% set username = "joe" %}
{{ username }}

다른 템플릿을 포함시킬 때는 include를 사용한다.

{% include "item.html" %}

참고: https://mozilla.github.io/nunjucks/templating.html