템플릿 작성

템플릿 작성하기

간단하게 템플릿을 작성하는 방법에 대해서 알아보도록 하겠습니다. 그러나, 모든 템플릿을 전부 취급하지는 않습니다. 제목부만 작성해볼 예정이며, 그 외의 작성방법은 티스토리 공식 스킨가이드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

views/*.pug

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

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

주석

//- 로 시작하는 것은 Pug 전용 주석입니다. 빌드 및 배포시 전혀 포함하지 않습니다. 포함하는 주석을 사용하려면 <!-- --> 로 표현되는 HTML 주석을 사용하세요.

layouts/*.pug

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

extends ../app

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

views/Header.pug

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

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

views/Header/BlogTitle.pug

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

//- inline script
-
  let t = "It's awesome framework for Tistory Skin"
//- container
div#td-blog-title
  //- style
  style.
    h1 > a {
      color: orange;
      text-decoration: none;
    }
  //- template
  h1 
    a(href="[##_blog_link_##]") 
      | [##_title_##]
  h2= t

views/Header/BlogMenu.pug

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

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

빌드된 템플릿

템플릿을 빌드하면 기본적으로 skin.html, style.css 등이 생성됩니다. 여기서는 자세히 다루지 않겠지만, 빌드 및 배포 를 참고해주시기 바랍니다.

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>It's awesome framework for Tistory Skin</h2>
    </div>
    <div id="td-blog-menu">
      [##_blog_menu_##]
    </div>
  </div>
</div>

dist/style.css

마찬가지로 생산된 style.css 파일에는 다음과 같이 inline 속성이 적용되지 않은 style 태그 내부의 코드가 입력되어지게 됩니다. 코드의 순서는 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 모듈을 통해 처리됩니다. 주석을 처리하려면 /*! ... */ 형태로 작성해야 합니다. 기존 주석 형태와 다른 점은 시작할 때 /* 가 아닌 /*! 이라는 것이죠.

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 의 맨 아래에 자동으로 추가됩니다.