04

템플릿

문서 구조

템플릿은 크게 app.pug, index.pug, views/*.pug 로 구성되어 있습니다. 각각이 어떻게 연결되어있는지 살펴보죠!

app.pug

app.pug 템플릿은 HTML의 기본구조가 정의되어있는 템플릿입니다. head, body 태그와 같이 구조에 해당되는 태그들이 app.pug 에 마크업되어 있습니다. 문서의 최상위 템플릿이므로 스킨과는 직접적인 연관이 없는 마크업을 넣는 것이 좋습니다.

doctype html

html(lang="ko")
  head
    title [##_page_title_##]

    //- TISTORY RSS
    link(rel="alternate", type="application/rss+xml", 
      title="[##_title_##]", 
      href="[##_rss_url_##]")

    //- meta
    meta(charset="utf-8")
    meta(name="viewport", content="user-scalable=no, 
      initial-scale=1.0, 
      maximum-scale=1.0, 
      minimum-scale=1.0, 
      width=device-width")
    
    //- scripts
    <!--[if lt IE 9]>
    script(src="//code.jquery.com/jquery-1.12.4.min.js")
    <![endif]-->
    <!--[if gte IE 9]><!-->
    script(src="//code.jquery.com/jquery-3.3.1.min.js")
    <!--<![endif]-->
    script(src="https://unpkg.com/tistory")
    
  body(id="[##_body_id_##]")
    s_t3
      div#__tidory
        block TIDORY

index.pug

index.pug 템플릿은 티스토리 스킨의 헤더, 컨텐츠, 푸터, 사이드바와 같은 부가요소가 포함됩니다. block TIDORY 아래에 include 키워드를 사용하여 템플릿 파일을 포함시킵니다.

extends app

block TIDORY
  //- template
  include views/HelloWorld

코드 분할

우리가 템플릿을 분리해야하는 가장 중요한 이유는 재활용 입니다. 템플릿 하나에는 스타일, 마크업, 스크립트가 통째로 들어가기 때문에 다른 스킨을 제작할 때 포함시키기만 하면 다시 작성하지 않아도 됩니다.

자, 이제 우리가 다음과 같은 구조로 템플릿을 분리해 놓았다고 생각해봅시다. 이렇게 1차적으로 크게 분리된 것이 부모 템플릿입니다. 이제 각 영역에 속할 자식 템플릿을 만들어봐야 합니다.

├── views/
│     ├── Header.pug
│     ├── Content.pug
│     ├── Sidebar.pug
│     └── Footer.pug

이렇게 나뉘어 있는 것을 티스토리 스킨 가이드를 참고하여 분리해보겠습니다. 자식 템플릿 의 위치는 절대적인 것은 아니나, 부모 템플릿의 이름과 똑같은 폴더 아래에 놓는 것을 원칙으로 합니다.

├── views/
│     ├── Header.pug
│     ├── Header
│           ├── BlogTitle.pug
│           └── BlogMenu.pug
│     ├── Content.pug
│     ├── Content
│           └── Entry.pug
│     ├── Sidebar.pug
│     └── Footer.pug

(adsbygoogle = window.adsbygoogle || []).push({});