6.5.2.5 extends와 block
레이아웃을 정할 수 있으며, 공통되는 레이아웃 부분을 따로 관리할 수 있어 좋습니다. include와도 함께 사용하곤 합니다.
|
넌적스 |
HTML |
|
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 %}
|
<!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> |
레이아웃이 될 파일에는 공통된 마크업을 넣되, 페이지마다 달라지는 부분을 block으로 비워둡니다. block은 여러 개 만들어도 됩니다. block을 선언하는 방법은 {% block [블록명] %}입니다. {% endblock %}로 블록을 종료합니다.
block이 되는 파일에서는 {% extends 경로 %} 키워드로 레이아웃 파일을 지정하고 block 부분을 넣습니다. 나중에 익스프레스에서 res.render('body')를 사용해 하나의 HTML로 합친 후 렌더링할 수 있습니다. 같은 이름의 block 부분이 서로 합쳐집니다.