Skip to content

Nunjucks

장점

성능면에서는 pug가 렌더링 속도가 nunjucks보다 빠르지만, pug는 따로 html태그를 pug용 문법으로 변환해야 되지만 넌적스는 html 문법을 그대로 차용이 가능하기 때문에 호환성 좋다.

기본 문법

Nunjucks 변수

{{}}를 묶어주면 된다. (e.g. <h1>{{title}}</h1>)

주의할점은, 내용이 그 자체로 치환되므로

<input name="name" value={{name}} />

이런식으로 쓰는게 아니라 {{name}}자체가 값이라고 할지라도

<input name="name" value="{{name}}" />

처럼 쌍따옴표(")로 쿼우팅 해야 한다.

변수 선언

{% set 자바스크립트 구문 %}

반복문

{% %} 안에 for in 작성 인덱스 번호를 사용할 경우 loop.index 사용. for 문이 끝나는 부분에는 { % endfor % }를 입력해 for 문이 끝나는 부분을 표시해줍니다.

이스케이프 방법

문자열 뒤에 | safe 를 사용.

조건문

{% if VARIABLE %}

{% elif %}

{% else %}

{% endif %}

한 줄도 가능:

<h1>{{ '참' if true else '거짓' }}</h1>

논리 연산자

기호 대신에 영문자 사용.

  • && -> and
  • || -> or
  • ! -> not

예제:

{% if happy and hungry %} 
    I am happy *and* hungry; both are true. 
{% endif %} 

모듈화

include - include 를 사용하여 다른 HTML 파일을 넣을 수 있습니다.

extends & block

extends 를 사용하면 레이아웃을 정할 수 있습니다.

IntelliJ 통합

공식적으로 지원되는 도구는 없다. (2024-03-20 확인) 대신 Twig 플러그인을 사용해보자. 자세한 내용은 IntelliJ IDEA#Twig를 사용한 Nunjucks 파일 연동 항목 참조.

List of web template system

See also

Favorite site