[TIL] 개발일지 5일차

Inheritence & Partials & Block

---

PUG가 적용되었지만, 페이지마다 HTML구조를 반복하는 해야한다는 점은 크게 다를바가 없는데 이러한 부분을 해소할 수 있는 방법이 존재한다.

Partials

페이지마다 고정적으로 반복되는 부분은 Partials로 나누어 적용한다.

home.pug

	doctype html
	html(lang="ko")
    head
        title Home | Wetube
    body 
        Welcome Home! 
    include partials/footer.pug

partials/footer.pug

	footer &Copy; #{new Date().getFullYear()} Wetube	

Inheritence

전체적인 구조의 기본틀을 공유할 때, Inheritence를 이용한다.

base.pug

	doctype html
	html(lang="ko")
    head
        title Home | Wetube
    body 
        Welcome Home! 
    include partials/footer.pug

home.pug

	extends base.pug

Block

Contents의 확장을 위해 Block을 사용한다.

base.pug

	doctype html
	html(lang="ko")
    head
        title Wetube
    body 
        block content
    include partials/footer.pug

home.pug

	extends base.pug

	block content 
    	h1 Home!

Templates에 값 전달하기

기존 home의 controller

export const home = (req, res) =>{
    return res.render("home"); // home.pug를 렌더링 해주고있다.
};

값의 전달

export const home = (req, res) =>{
    return res.render("home",{pageTitle: "Home"}); // pageTitle이라는 변수명으로 Home String 전달.
};

base.pug

	doctype html
html(lang="ko")
    head
        title #{pageTitle} | Wetube // #{}은 Javascript 문법 pageTitle이라는 변수를 받고있다.
    body 
        block content
    include partials/footer.pug

Mixin

Data를 받을 수 있는 Partials.
home.pug

extends base.pug
include mixins/video // include 가 필요하다.

block content 
    h1 Home!

    each video in videos 
        +video(video) // +FileName의 형태로 사용할 수 있다. 

video.pug

mixin video(info)
    div 
        h4=info.title 
        ul 
            li #{info.rating}/5.
            li #{info.comments} comments,
            li Posted #{info.createAt},
            li #{info.views} views.