npm i nunjucks --save
const nunjucks = require('nunjucks');
app.set('view engine', 'njk'); // 확장자를 html 로도 사용이 가능함.
nunjucks.configure('views', { // views폴더가 넌적스파일의 위치가 됨
express: app,
watch: true,
});
configure 의 첫 번째 인수로 views 의 경로를 전달해 줍니다.
그리고 두 번째 인수로 옵션을 지정해 줍니다.
express 속성에 app 객체를 연결합니다.
watch 옵션은 true로 지정되면 HTML 파일이 변경될 때에 템플릿 엔진을 reload 하게 됩니다.
router.get('/', function(req, res, next){
res.render('index', { title: 'Nunjucks' }); // index.html에 title이라는 변수를 전달
});
<h1>{{title}}</h1>
<input placeholder="{{title}}" />
주의할점은 value로서 {{}}를 사용할 경우, ""안에 넣어줘야 한다는 점입니다.
예를 들어 input태그를 사용한다고 해보면,
<input name="name" value={{name}}/>
이런식으로 쓰는게 아니라 {{name}}자체가 값이라고 할지라도
<input name="name" value="{{name}}"/> 처럼 ""안에 넣어줘야 합니다.
{% set name='Lia' %}
<h1>Hello, {{name}}</h1>
<script>
const b = "{{ user.nick }}";
console.log(b)
</script>
{% %} 안에 for in 작성
인덱스 번호를 사용할 경우 loop.index 사용
for문이 끝나는 부분에는 { % endfor % }를 입력해 for문이 끝나는 부분을 표시해줍니다.
<ul>
{% set people = ['Team', 'Lia', 'Matthew', 'David'] %} <!-- 배열 변수 선언 -->
{% for human in people %} <!-- 반복분 선언 -->
<li>{{loop.index}}번째 {{human}}</li>
{% endfor %} <!-- for문 끝지점 명시 -->
</ul>
{% set navigation = [
{ 'name': '1' , 'url': '1.html' },
{ 'name': '2' , 'url': '2.html' },
{ 'name': '3' , 'url': '3.html' }
] %}
{% for item in navigation %}
<a href="{{item.url}}">{{item.name}}</a>
{% endfor %}
<!-- 결과 -->
<a href="1.html">1</a>
<a href="2.html">2</a>
<a href="3.html">3</a>
nunjucks의 if문은 끝나는 지점에 반드시 {% endif %}를 표시해줘서 if문이 끝났다는것을 알 수 있게 해주어야 합니다.
{% if VARIABLE %}
{% elif %}
{% else %}
{% endif %}
{% if true %}
<h1>'참' 입니다</h1>
{% else %}
<h1>'거짓' 입니다</h1>
{% endif %}
조건문은 {{ }} 안에서도 사용할 수 있습니다.
<h1>{{ '참' if true else '거짓' }}</h1>