[Express]Pug mixins

pug에서

데이터만 다르고

반복되는 HTML코드를 여러 템플릿에서 사용하기 위해

mixin을 제공한다.

mixins/videoBlock

mixin videoBlock(videoObject ={})

div.videoBlcok

video.videoBlock__thumbnail(src=videoObject.videoFile, controls=ture)

h4.videoBlcok__title=videoObject.title

h6.videoBlcok__views=videoObject.views

Home.js

extends layouts/main

include mixins/videoBlock

block content

div.videos

each item in videos

+videoBlock({

title : item.title,

views : item.views,

videoFile : item.videoFile,

})

다음과 같이 

비디오 파일은

비디오, 제목, 세부설명을 다음과 같은 HTML코드로 작성하게 되는데

mixin의 첫번째 파라미터에 객체형식의 변수를 등록하고

변수의 속성으로 사용할 변수명을 입력하면

include한 후

다음과 같이 사용할 수 있게 된다.