Pug, Template # 01

이제 inheritance(상속) 개념에 대해 알아 보자.

상속이란 일종의 베이스를 만드는 거다. (레이아웃의 베이스 혹은 html의 베이스)

그러면 모든 파일들이 그 베이스에서 부터 확장해 나간다.

views폴더에다 bass.pug 파일을 만든다.

doctype html

html(lang="en")

head

title Wetube

meta(charset="UTF-8")

meta(http-equiv="X-UA-Compatible", content="IE=edge")

meta(name="viewport", content="width=device-width, initial-scale=1.0")

body

h1 Base!

include partials/footer.pug

그러고 나서 home.pug, watch.pug, edit.pug 내용을 전부 지워 준다.

그리고 home, watch, edit base를 확장 (extends)해준다.

세가지 파일다 base.pug로 extends를 해준다.

extends base.pug

extends하는건 베이스가 되는 파일을 가져다가 쓴다는 거다.

각 페이지 마다 문구대로 나오게 한다.

이제 block 개념에 대해 알아 보자.

block이란 템플릿의 창문 같은 거다. 창문에다 이것 저것 넣는다고 생각해보자.

창 , 문, 공간, 벽돌 무엇이든 집어 넣을수 있는 공간이다.

base.pug파일에 넣어준다.

body

block content

base.pug에 content를 위한 공간을 만든거다.

home.pug

extends base.pug

block content

h1 Home!

edit.pug

extends base.pug

block content

h1 Edit Video

watch.pug

extends base.pug

block content

h1 Watch Video

이렇게 만들어 주면 해당 block마다 각 페이지 설정에 맞게 나오게 된다.

각 페이지 마다 타이틀을 다르게 설정해 보겠다.

base.pug

head

block head

home.pug

block head

title Home | Wetube

edit.pug

block head

title Edit | Wetube

watch.pug

block head

title Watch | Wetube

http://localhost:4000/ 을 가서 확인해 보니 잘 된다.

하지만 아직 반복되는 코드가 있다.