Pug 부분적으로변경하기 (include, extend, res.render, 변수설정)

pug에서 html의 일부분만 동일하게싶다하면 어떻게 해야할까요?

예를 들어서 footer만 변경사항이 없다고 가정했을때,

include를 사용해봅시다.

include

doctype html
html(lang="ko")
    head
        title #{pageTitle}
    body
        block content
    include partials/footer.pug

base.pug 파일 //매번 html을 복붙할 수 없기에 base.pug 파일을 만들어 공통된부분은 복붙안해도되게끔 만들어줌

덕분에 우리는 매번 footer들을 업데이트하지 않고,

footer를 한 번만 업데이트하면 모든 파일이 알아서 업데이트를 합니다.

(미리 partials폴더안에 footer.pug파일을만들었음)

extends

extends base.pug

block content  // block의 이름은 content
    h1 Home!

공통으로만들어둔 base.pug파일을 확장할 수 있습니다. (만들어둔 파일 불러오기)

파일을 통째로 불러올 수 있고, block을 사용해서 필요한 부분만 내용을 변경할 수 있습니다.

단순히 불러오는것을 넘어서 연장을 가능하게 만들어줍니다!

 

변수설정

우리는 가끔씩 블록 전체를 쓰는것이 아니라, 템플릿의 일부분만 바꾸고 싶을때가 있습니다.

그럴때 변수를 지정해서 일부분만 변경이 가능합니다.

head
        title #{pageTitle}

변수를 지정해 줄때는

#{        } 이런식으로 지정을 해줍니다.

그리고 이 변수를 전달 해 주어야 하는데,

res.render로 전달해 주면됩니다.

res.render("home", {pageTitle: "Home"});

첫번째 인수는 파일이름이고, 두번째 인수는 원하는 만큼의 변수를 가질 수 있는 오브젝트입니다.

이제 우리는 home 파일을 렌더링하고, pageTitle이라는 변수를 보내고 있습니다.