[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>
[Pug]
// layout.pug
doctype html
html
head
title= title
link(re='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")
위와 같이 전체적인 레이아웃이 될 파일(layout.pug)에는 공통된 마크업을 작성하는 동시에, 페이지마다 달라지는 부분에 대해서는 block을 선언하게 됩니다. 여러 개 선언도 가능한데, block [블록명]과 같은 형태로 block을 선언하게 됩니다.
현재 예제의 레이아웃에서는 <main> 태그의 '내용입니다.' 부분이 block content로 선언되어 있습니다. 그럼 이 content를 살펴봐야겠네요.
body.pug에서는 우선 extends layout을 선언해 용도를 선언합니다. 그리고 content라는 이름의 블록을 선언하고 거기에 내용을 작성합니다. 하단에는 script라는 블록도 선언했습니다. 이 역시 동일하게 layout에서 사용되죠.
body.pug라는 파일은 나중에 res.render('body')를 사용해 하나의 HTML로 렌더링됩니다(확장자는 생략)
아래의 예제를 종합적으로 살펴보겠습니다.
// layout.pug
doctype html
html
head
title= title
link(rel='stylesheet', href='/style.css')
body
block content// index.pug
extends layout
block content
h1= title
p Welcome to #{title}// error.pug
extends layout
block content
h1= message
h2= error.status
pre #{error.stack}
위의 예제에서 index.pug가 있습니다. 이는 layout.pug의 block content 부분에 들어가게 됩니다. 그리고 index.pug는 res.render로부터 title이라는 변수를 받아 렌더링하게 됩니다. error.pug에서도 res.render로부터 message와 error 변수를 받아 렌더링을 진행하죠.
'Programming > Node.js' 카테고리의 다른 글
| 7. 익스프레스 (4) - 템플릿 엔진 : Nunjucks 2 (0) | 2024.10.09 |
|---|---|
| 7. 익스프레스 (4) - 템플릿 엔진 : Nunjucks 1 (0) | 2024.10.07 |
| 7. 익스프레스 (4) - 템플릿 엔진 : Pug 8 (1) | 2024.09.30 |
| 7. 익스프레스 (4) - 템플릿 엔진 : Pug 7 (1) | 2024.09.27 |
| 7. 익스프레스 (4) - 템플릿 엔진 : Pug 6 (3) | 2024.09.25 |
