<Express.js> Pug-partials

partial란?

반복되는 큰 부분을 layout으로 만드는 방법을 지난시간에 해봤습니다. 이번 시간에는 layout안에 큰 부분을 또 나누어 partial로 관리하는 방법을 배우겠습니다. partial로 나누면 더욱 깔끔하고 관리가 쉬운 html 구조를 얻을 수 있다는 장점이 있습니다.

project

youtube
  |views
    |layouts
     *|main.pug
   +|partials
     +|header.pug
     +|footer.pug

header.pug

header.header
    .header__column
      i.fab.fa-youtube
    .header__column
      ul
        li  
          a(href="#") join
        li  
          a(href="#") login

footer.pug

footer.footer
    .footer-icon
        <i class = "fab fa-youtube"></i>
    span.footer__text

main.pug

include 키워드 뒤에 디렉토리와 파일명을 적어서 partial를 불러옵니다. header와 footer 위치에 include 디렉토리명을 적어줍니다.

doctype html
html
  head
    title WeTube
  body
    include ../partials/header
    main
      block content
    include ../partials/footer