퍼그 - extends와 block

레이아웃울 정할 수 있습니다. 공통되는 레이아웃 부분을 따로 관리할 수 있어 좋습니다. include와도 함께 사용하곤 합니다.

 

레이아웃이 될 파일에는 공통된 마크업을 넣되, 페이지마다 달라지는 부분을 block으로 비워둡니다. block은 여러 개 만들어도 됩니다. block은 [등록명]으로 선언합니다.

block이 되는 파일에서는 extends 키워드로 레이아웃 파일을 지정하고 block 부분을 넣습니다. block 선언보다 한 단계 더 들여쓰기되어 있어야 합니다. 나중에 익스프레스에서 res.render('body')를 사용해 하나의 HTML로 합쳐 렌더링할 수 있습니다. 퍼그 확장자는 생략 가능합니다. block 부분이 서로 합쳐집니다.

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를 보면 extends layout과 block content가 있습니다. layout.pug의 block content 부분에 index.pug의 block content를 넣습니다. index.pug는 res.render로부터 title이라는 변수를 받아 렌더링합니다.

error.pug도 block content 부분이 layout.pug와 연결됩니다. res.render로부터 message와 error 변수를 받아 렌더링합니다.