○ extends와 block
include와도 함께 사용하며, 레이아웃을 지정하고 공통되는 레이아웃을 따로 관리할 수 있습니다. 일단 아래의 예제처럼, 레이아웃이 되는 파일에 공통되는 마크업을 넣고, 페이지마다 달라지는 부분을 block으로 선언해 둡니다. {% block [블록명] %}으로 block을 선언하고, {% endblock %}으로 블록을 종료합니다.
[HTML]
<!DOCTYPE html>
<html>
<head>
<title>Express</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<header>헤더입니다</header>
<main>
<p>내용입니다.</p>
</main>
<footer>푸터입니다</footer>
<script src="/main.js"></script>
</body>
</html>
[Nunjucks]
<!-- layout.html -->
<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
<link rel="stylesheet" href="/style.css" />
{% block style %}
{% endblock %}
</head>
<body>
<header>헤더입니다</header>
{% block content %}
{% endblock %}
<footer>푸터입니다</footer>
{% block script %}
{% endblock %}
</body>
</html>
<!-- body.html -->
{% extends 'layout.html' %}
{% block content %}
<main>
<p>내용입니다.</p>
</main>
{% endblock %}
{% block script %}
<script src="/main.js"></script>
{% endblock %}
위의 body.html처럼, block이 되어주는 파일은 {% extends 경로 %}를 통해 레이아웃 파일을 지정하고 block을 선언합니다. 추후 익스프레스의 res.render('body')를 통해서 하나의 HTML로 합쳐져 렌더링이 되는데, 이름이 같은 block 부분이 합쳐지는 방식입니다.
'Programming > Node.js' 카테고리의 다른 글
| 7. 익스프레스 (4) - 템플릿 엔진 : Nunjucks 7 (1) | 2024.10.16 |
|---|---|
| 7. 익스프레스 (4) - 템플릿 엔진 : Nunjucks 5 (0) | 2024.10.14 |
| 7. 익스프레스 (4) - 템플릿 엔진 : Nunjucks 4 (1) | 2024.10.13 |
| 7. 익스프레스 (4) - 템플릿 엔진 : Nunjucks 3 (0) | 2024.10.10 |
| 7. 익스프레스 (4) - 템플릿 엔진 : Nunjucks 2 (0) | 2024.10.09 |
