앞선 넌적스와 관련된 내용을 바탕으로, 종합해서 예제를 작성해 보겠습니다.
[layout.html]
<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
<link rel="stylesheet" href="/style.css" />
{% block style %}
{% endblock %}
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
[index.html]
{% extends 'layout.html' %}
{% block content %}
<h1>{{title}}</h1>
<p>Welcome to {{title}}</p>
{% endblock %}
[error.html]
{% block content %}
<h1>{{message}}</h1>
<h2>{{error.status}}</h2>
<pre>{{error.stack}}</pre>
{% endblock %}
layout.html의 {% block content %} 부분은 index.html {% block content %}가 들어갑니다. 그리고 index.html은 res.render로 title 변수를 받아 렌더링을 진행하게 됩니다.
error.html도 {% block content %} 부분이 layout.html과 연결되고, res.render로부터 message와 error 변수를 받아 렌더링하게 됩니다.
'Programming > Node.js' 카테고리의 다른 글
| 7. 익스프레스 (4) - 템플릿 엔진 : Nunjucks 6 (0) | 2024.10.15 |
|---|---|
| 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 |
