Contents1. 넌적스 사용하기 2. 변수 3. 반복문 4. 조건문 5. include 6. extends & block
넌적스는 템플릿 엔진 중 하나로 모질라 재단에서 만든 템플릿 입니다.
넌적스는 npm 으로 설치할 수 있습니다.
npm i nunjucks --save
넌적스 사용방법은 다음과 같습니다.
app.set('view engine', 'html');
nunjucks.configure('views', {
express: app,
watch: true,
});configure 의 첫 번째 인수로 views 의 경로를 전달해 줍니다.
그리고 두 번째 인수로 옵션을 지정해 줍니다.
옵션으로 지정해 줄 수 있는 값들은 다음과 같습니다.
nunjucks document 에서 더 자세히 확인할 수 있습니다.
express 속성에 app 객체를 연결합니다.
watch 옵션은 true로 지정되면 HTML 파일이 변경될 때에 템플릿 엔진을 reload 하게 됩니다.
res.render 호출 시 보내는 변수를 nunjucks 가 처리합니다.
router.get('/', function(req, res, next){
res.render('index', { title: 'Nunjucks' });
});<!-- views/index.html -->
<h1>{{title}}</h1>
<input placeholder="{{title}}" />변수를 선언해서 사용할수도 있습니다.
{% set name='Lia' %}
<h1>Hello, {{name}}</h1>nunjucks 에서 반복문은 다음과 같이 사용합니다.
<ul>
{% set people = ['Team', 'Lia', 'Matthew', 'David'] %}
{% for human in people %}
<li>{{loop.index}} {{human}}</li>
{% endfor %}
</ul>반복문에서의 인덱스는 loop.index 를 사용합니다.
nunjucks 의 조건문은 다음으로 이루어 져 있습니다.
{% if VARIABLE %} {% elif %} {% else %} {% endif %}
{% if true %}
<h1>'참' 입니다</h1>
{% else %}
<h1>'거짓' 입니다</h1>
{% endif %}조건문은 {{ }} 안에서도 사용할 수 있습니다.
<h1>{{ '참' if true else '거짓' }}</h1>include 를 사용하여 다른 HTML 파일을 넣을 수 있습니다.
<!-- header.html -->
<header>
<a href="/">Home</a>
<a href="contact">Contact</a>
</header><!-- footer.html -->
<footer>
<h3>This is Footer</h3>
</footer><!-- main.html -->
{% include "header.html" %}
<main>
<h1>Main File</h1>
</main>
{% include "footer.html" %}extends 를 사용하면 레이아웃을 정할 수 있습니다.
<!-- layout.html -->
<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<header>Header</header>
{% block content %}
{% block end %}
<footer>Footer</footer>
</body>
</html><!-- body.html -->
{% extends 'layout.html' %}
{% block content %}
<main>
<h3>This is main Content</h3>
</main>
{% endblock %}HTML 은 다음과 같이 작성되게 됩니다.
<!DOCTYPE html>
<html>
<head>
<title>Nunjucks</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<header>Header</header>
<main>
<h3>This is main Content</h3>
</main>
<footer>Footer</footer>
</body>
</html>본 블로그는 조현영(zerocho)님의 저서 'Node.js 교과서 개정2판'을 참고하여 정리한 글입니다. 이점 참고 부탁드립니다.
하고싶은게 많아요