04

템플릿

문서 구조 티도리 2.0

티도리 프레임워크에서 템플릿은 퍼그(Pug)를 사용합니다. 퍼그는 HTML 파트별로 나누고 코드의 길이를 줄여주는 효과적인 템플릿 엔진입니다. 티도리 프로젝트 템플릿에서는 크게 app.pug, index.pug, views/*.pug 로 구성되어 있습니다. 각각이 어떻게 연결되어있는지 살펴보죠!

app.pug

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

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.0

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

자, 이제 우리가 다음과 같은 구조로 템플릿을 분리해 놓았다고 생각해봅시다. 이렇게 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