TidoryContainer

Documents

DocumentsContent

이 문서는 Tidory 2.x 버전에 대한 문서입니다. Tidory 1.x 에 대한 문서를 보려면?

TemplateGuide

템플릿 작성하기

간단하게 템플릿을 작성하는 방법에 대해서 알아보도록 하겠습니다. 그러나, 모든 템플릿을 전부 취급하지는 않습니다. 제목부만 작성해볼 예정이며, 그 외의 작성방법은 티스토리 공식 스킨가이드http://www.tistory.com/guide/skin/step3 를 참고해주시기 바랍니다.

알아야 하는 지식

템플릿은 HTML의 확장언어인 Pug 언어로 작성합니다. 따라서 Pug에 대한 전반적인 지식이 있어야합니다. 퍼그 공식페이지 https://pugjs.org/language/tags.html

블로그 제목과 메뉴

간단하게 만들어볼 템플릿은 티스토리 스킨가이드 의 초반부분인 블로그제목과 메뉴부분 입니다. 아래의 이미지에서 사용예시치환자 부분을 주시해주세요.
티스토리 스킨 가이드
우선 index.pug 에서 block TIDORY 에 선언된 views/Header 템플릿을 주목해주세요. 티스토리 스킨구조는 Header, Content, Sidebar, Footer 로 분리되어 있으므로, 상위 템플릿을 선언해주는 것이 좋습니다.
index.pug

extends ./layouts/default

block TIDORY
  include views/Header
views/Header 폴더를 만든 뒤, BlogTitle.pugBlogMenu.pug 두 개의 퍼그 템플릿을 생성합니다.
├── views/
│   ├── Header.pug
│   └── Header
│     ├── BlogTitle.pug
│     └── BlogMenu.pug

Tidory/views/*.pug

이제 각각의 템플릿을 작성할 시간입니다. 템플릿의 기본구조는 다음과 같습니다. style 태그와, pug inline 스크립트, pug 마크업이 하나의 파일에 모두 들어갑니다. 아래의 코드만으로는 이해하기 어려우므로 다음의 예제를 살펴보시기 바랍니다.
views/*.pug

//- style
style.
  __STYLE__
//- inline script
-
  __PUG_INLINE_SCRIPT__
//- template
__PUG_MARKUP__
//- script
script.
  __SCRIPT__

Tidory/layouts/*.pug

레이아웃은 view 부분에서 뼈대가 되는 부분으로 여기서 작성한 코드는 body 내부에서 최상위에 위치합니다. style 또한 마찬가지입니다. 다음과 같이 작성 할 수 있습니다. block TISTORY, block TIDORY 부분은 구조상 반드시 필요한 부분이므로 존재해야 합니다.
layouts/default.pug

extends ../app

block TISTORY
  //- style
  style.
    #__tidory {
      margin: 0 auto;
      width: 820px;
      text-align: center;
    }
  //- template
  s_t3
    div#__tidory
      block TIDORY

Tidory/views/Header.pug

Header.pug 템플릿은 티스토리 스킨가이드 에서 Header 부분을 담당하게 될 상위 템플릿입니다.
views/Header.pug

//- template
div#td-header-wrapper
  include Header/BlogTitle
  include Header/BlogMenu

Tidory/views/Header/BlogTitle.pug

blogTitle.pug 템플릿은 티스토리 스킨가이드 에 나와있는 블로그 메뉴 항목에 따라 다음과 같이 작성합니다. 여기서 [##_blog_link_##][##_title_##] 은 치환자입니다.
views/Header/BlogTitle.pug

//- style
style.
  h1 > a {
    color: orange;
    text-decoration: none;
  }
//- inline script
-
  let t = 'First my tidory project :)'
//- template
div#td-blog-title
  h1 
    a(href="[##_blog_link_##]") 
      | [##_title_##]
  h2= t

Tidory/views/Header/BlogMenu.pug

BlogMenu.pug 템플릿도 티스토리 스킨가이드 에 따라 다음과 같이 작성합니다. 여기서 [##_blog_menu_##] 는 치환자입니다.
views/Header/BlogMenu.pug

//- style
style.
  #td-blog-menu {
    font-size: 0.9em;
    color: green;
    font-weight: bold;
  }
//- template 
div#td-blog-menu
  | [##_blog_menu_##]

Tidory/dist/skin.html

작성한 템플릿을 tidory dist 를 통해 빌드하면 다음과 같이 skin.html 안에 템플릿이 생성됩니다. 코드의 순서는 layout 다음으로 index.pug 에서 포함한 순서를 그대로 따라갑니다.
index.html

<div id="__tidory">
  <div id="td-header-wrapper">
    <div id="td-blog-title">
      <h1>
        <a href="[##_blog_link_##]">[##_title_##]</a>
      </h1>
      <h2>First my tidory project :)</h2>
    </div>
    <div id="td-blog-menu">
      [##_blog_menu_##]
    </div>
  </div>
</div>

Tidory/dist/style.css

마찬가지로 생산된 style.css 파일에는 다음과 같이 코드가 입력되어지게 됩니다. 코드의 순서는 layout 다음으로 index.pug 에서 포함한 순서를 그대로 따라갑니다.
style.css

#__tidory {
  margin: 0 auto;
  width: 820px;
  text-align: center
}
h1 > a {
  color: orange;
  text-decoration: none
}
#td-blog-menu {
  font-size: .9em;
  color: green;
  font-weight: 700
}
* 빌드시 해당 파일의 link 태그가 head 의 맨 아래에 자동으로 추가됩니다.

주석

CSS는 CleanCSS 모듈을 통해 처리됩니다. 주석을 처리하려면 /*! ... */ 형태로 작성해야 합니다. 기존 주석 형태와 다른 점은 시작할 때 /* 가 아닌 /*! 이라는 것이죠.

Tidory/dist/images/script.js

템플릿 작성에서 직접적으로 예제로 다루어지진 않았지만, 템플릿 내에 script 태그를 통해 작성한 스크립트는 images/script.js 파일로 통합되며, 해당 파일은 tidory.bundle.js 파일 다음으로 포함됩니다.
*.pug

...
//- script
script.
  console.log("It's awesome framework for Tistory Skin")
* 빌드시 해당 파일의 script 태그가 body 의 맨 아래에 자동으로 추가됩니다.