[유튜브 클론코딩] 2.22 Home Controller Part 2

2.22 Home Controller Part 2

mixin

pug에서 데이터만 다르고 반복되는 HTML코드를 여러 템플릿에서 사용하기 위해 mixin을 제공한다.

(다른 정보, 같은 구조)

 

 

예를 들어, 여기 home 페이지에는 비디오가 한칸으로 보이겠지만 누군가의 profile 페이지에서도 그 비디오를 볼 수 있어야할 것이다.

따라서, HTML을 재활용 할 것이다. footer를 include해서 재활용하는 것처럼, 비디오 블록 html 코드를 만든다.

 

views > mixin>videoBlock.pug 작성하기

views 안에 mixin이라는 폴더를 만들고 videoBlock.pug 파일을 만든다.

• 여기서부터 조금 다르다. html 코드를 처음부터 작성하지 않을 것이다.

mixin이라고 적고 그 다음에는 mixin의 이름을 적어줘야 한다. 여기에는 이름을 videoBlock라고 한다.

mixin videoBlock(video = {})

↑ videoBlock.pug

mixin은 pug의 함수의 일종이다.

mixin에는 인자를 전달받을 수도 있다.

인자의 이름을 video라고 하고, 기본 값은 {}로 한다. 기본적으로는 빈 객체이다.

객체가 mixin에 입력되면, 그 객체의 title을 받아와서 화면에 표시할 것이다.

 

mixin videoBlock(video = {})

    .videoBlock 

        video.videoBlock__thumbnail(src=video.videoFile, controls=true, autoplay=true)

        h4.videoBlock__title=video.title

        h6.videoBlock__views=video.views 

↑ videoBlock.pug

 

 

home.pug에서 mixin을 include하기

이제 home.pug에서 원래 일일이 적었던 코드 대신 mixin을 include한다.

그리고 h1이나 p를 일일이 쓰지 않고 +videoBlock({})를 사용한다.

extends layouts/main

include mixins/videoBlock

block content 

    .videos 

        each video in videos 

            +videoBlock({

                title: video.title,

                views: video.views,

                videoFile: video.videoFile

            })

↑ home.pug

이 정보들이 videoBlock으로 전달되어서 mixin 함수를 실행시킬것이다.