티스토리 예제

티스토리 예제

예제에서 만들어볼 것은 블로그 타이틀과 메뉴 입니다. 치환자 및 티스토리에서 제공하는 예제는 티스토리 스킨 가이드 를 참고합니다.

views/Header.pug

Header.pug 템플릿은 티스토리 스킨가이드 에서 Header 부분을 담당하게 될 상위 템플릿입니다. Header/BlogTitle, Header/BlogMenu 두 개의 템플릿을 포함하고 있습니다.
views/Header.pug

//- container
div#td-header-wrapper
  //- template
  include Header/BlogTitle
  include Header/BlogMenu
Header.pug 템플릿은 index.pug 에 포함해야 합니다.
index.pug

extends ./layouts/default

block TIDORY
  include views/Header

views/Header/BlogTitle.pug

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

//- inline script
-
  let subTitle = "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= subTitle

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 파일에는 다음과 같이 scoped 속성이 적용되지 않은 style 태그 내부의 코드가 입력되어지게 됩니다. 코드의 순서는 layout 다음으로 index.pug 에서 포함한 순서를 그대로 따라갑니다.
style.css

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

주석

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