레이아웃의 사용
pug에서 자주 사용하는 구성들 ( head, footer 등 )을 매번 복사하여 쓰지 않고, 레이아웃을 지정하여 가져다 사용할 수 있다.
생성
doctype html
html
head
title WeTube
body
main
block content
footer
span © WeTubemain.pug 라는 레이아웃 파일을 만들었다. 여기서 주의하여 볼 점은 block 이라고 되어있는 부분이다. block이라는 태그를 통해 이 부분에 다른 내용을 넣을 수 있다.
적용
extends layouts\main
block content
p hello위처럼 extends로 레이아웃 파일을 가져온다. 여기서는 extends 다음 레이아웃 파일 경로를 적어준다. 다음 덮어 쓸 영역을 지정해준다. block content 부분에 덮어 쓸 것이기 떄문에 지정해주고 내용을 채워 넣는다.
<!DOCTYPE html>
<html>
<head>
<title>| WeTube</title>
</head>
<body>
<header>
<h1>WeTube</h1>
</header>
<main>
<p>Home</p>
</main>
<footer>
<span>© WeTube</span>
</footer>
</body>
</html>실제 html 파일은 이렇게 만들어진다.
'JavaScript' 카테고리의 다른 글
| Variables in Pug (0) | 2020.02.24 |
|---|---|
| Pug Partial (0) | 2020.02.24 |
| Pug 설치편 (0) | 2020.02.24 |
| Middleware part 2. (0) | 2020.02.20 |
| Middleware part 1. (0) | 2020.02.20 |
댓글