6.5.1.6 extends와 block
레이아웃을 정할 수 있으며, 공통되는 레이아웃 부분을 따로 관리할 수 있어 좋습니다. include와도 함께 사용하곤 합니다.
|
퍼그 |
HTML |
|
layout.pug doctype html
html
head
title= title
link(rel='stylesheet', href='/style.css')
block style
body
header 헤더입니다.
block content
footer 푸터입니다.
block script
body.pug extends layout
block content
main
p 내용입니다.
block script
script(src="/main.js")
|
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>
|
레이아웃이 될 파일에는 공통된 마크업을 넣되, 페이지마다 달라지는 부분을 block으로 비워둡니다. block은 여러 개 만들어도 됩니다. block [블록명]과 같은 형태로 block을 선언합니다.
block이 되는 파일에서는 extends 키워드로 레이아웃 파일을 지정하고 block 부분을 넣습니다. block 선언보다 한 단계 더 들여쓰기되어 있어야 합니다. 나중에 익스프레스에서 res.render('body')를 사용해 하나의 HTML로 합쳐 렌더링할 수 있습니다. 퍼그 확장자는 생략 가능하며 block 부분이 서로 합쳐집니다.