Pug

최정환·2021년 6월 22일
0

youtube-clone

목록 보기
2/3

app.set("view engine", pug) == pug를 템플릿으로 사용

  • pug파일이 view dir안에 있어야함 view dir은 현재 작업중인 폴더(cwd) 안에 있어야함
  • cwd는 노드를 시작하는 dir이다
    함수 = (req,res) => {res.render("pug파일 이름")} ==> pug를 렌더링함

📌 base.pug 뼈대가 되는 pug
<doctype html 
html(lang="ko")
    head 
        title #{pageTitle} | Wetube
        link(rel="stylesheet" href="http://unpkg.com/mvp.css")
    body
        header
            nav 
                ul 
                    li
                        a(href="/vidoes/upload") Upload Video
                    li
                        a(href="/") Home
                    li 
                        a(href="/search") Search
            h1=pageTitle    // -> #{pageTitle}과 같음
        main
            block content
    include partials/footer.pug
  • extends base.pug => base.pug로 부터 뼈대를 가져옴
  • block content => 이 블록 안에 넣고 싶은 것을 넣는다.
  • h1 #{var}은 h1=var와 같다

📌 mixin의 이름(받게될 객체)

mixin video(video)
    div 
        h4
            a(href=`/videos/${video.id}`)=video.title 
        p=video.description
        ul
            each hashtag in video.hashtags
                li=hashtag
        small=video.createdAt
        hr    

📌 다른 pug에서 mixins 사용법 (search.pug)

extends base
include mixins/video

block content 
    form(method="GET")
        input(placeholder="Search by title",name="keyword", type="text")
        input(type="submit", value="Search now")

    div
        each video in videos 
            +video(video)

0개의 댓글