티스토리 예제

템플릿 작성

티스토리 예제로 템플릿 작성의 기초를 알아보겠습니다. 간단하게 블로그의 제목과 메뉴를 출력하는 것을 해보죠. 우리가 작성할 예제의 폴더구조는 다음과 같습니다.

├── views/
│     ├── Header.pug
│     ├── Header
│           ├── BlogTitle.pug
│           └── BlogMenu.pug
└── index.pug

index.pug

현재 views/Header 파일이 포함되어 있습니다. 해당 템플릿은 부모 템플릿이 됩니다.

extends app

block TIDORY
  s_t3
    div#__tidory
      include views/Header

views/Header.pug

이번에는 Header/BlogTitle 과 Header/BlogMenu 를 포함하고 있습니다. 각각 블로그 제목 과 블로그 메뉴입니다. 이 둘은 자식 템플릿입니다. style 태그는 빌드하면 style.css 파일로, script 태그를 사용하면 images/script.js 파일로 분리됩니다!

#example
  include Header/BlogTitle
  include Header/BlogMenu

style.
  #example {
    display: inline-block;
    text-align: center;
  }
  #example a {
    text-decoration: none;
    color: black;
    transition-duration: 0.3s;
    pointer-events: initial !important;
  }
  #example a:hover {
    color: #ed5207 !important;
  }

만약 스킨 옵션을 구현해야 할 때처럼, 분리가 되면 안 되는 상황이라면 어떨까요? style, script 태그에 scoped 속성을 부여하면 해당 태그는 style.css, images/script.js 로 분리되지 않습니다. 그 말은 즉, skin.html 에 남는다는 이야기가 됩니다.

views/Header/BlogTitle.pug

h1#blogTitle
  a(href="[##_blog_link_##]")
    | [##_title_##]

style.
  #example #blogTitle {
    color: #525252;
    font-size: 2.8em;
    font-weight: 200;
    margin: 0px;
  }

views/Header/BlogMenu.pug

nav#blogMenu(role="navigation")
  | [##_blog_menu_##]

style.
  #example #blogMenu {
    margin-top: 35px;
  }
  #example #blogMenu ul {
    padding: 0px;
    margin: 0px;
  }
  #example #blogMenu ul li {
    margin: 0 15px;
    display: inline-block;
  }
  #example #blogMenu ul li a {
    font-size: 1.05em;
    font-weight: 300;
  }
  header > nav ul li a:hover {
    color: #ed5207;
  }

마크업에 보이지 않는 li, a 태그에 스타일을 준 이유는 무엇일까요? 티스토리 스킨 치환자인 메뉴 치환자는 티스토리 스킨에 적용되면 li, a 태그를 포함하기 때문입니다.

프로덕션 코드

우리가 만든 스킨을 이제 사용자에게 배포하거나 자신의 블로그에 적용하기 위해 빌드 및 배포를 하면 다음과 같은 코드로 나뉘어집니다.

skin.html

<div id="example">
  <h1 id="blogTitle"><a href="[##_blog_link_##]">[##_title_##]</a></h1>
  <nav id="blogMenu" role="navigation">[##_blog_menu_##]</nav>
</div>

style.css

#example #blogTitle {
  color: #525252;
  font-size: 2.8em;
  font-weight: 200;
  margin: 0
}
#example #blogMenu {
  margin-top: 35px
}
#example #blogMenu ul {
  padding: 0;
  margin: 0
}
#example #blogMenu ul li {
  margin: 0 15px;
  display: inline-block
}
#example #blogMenu ul li a {
  font-size: 1.05em;
  font-weight: 300
}
header > nav ul li a:hover {
  color: #ed5207
}
#example {
  display: inline-block;
  text-align: center
}
#example a {
  text-decoration: none;
  color: #000;
  transition-duration: .3s;
  pointer-events: initial!important
}
#example a:hover {
  color: #ed5207!important
}

티스토리 예제 패키지

티도리로 작성한 코드를 별도로 분리해서 패키지 형태로 제공할 수도 있습니다. 패키지에서 그 내용을 확인 하실 수도 있습니다. 하지만, 미리 사용해보죠! 지금 작성한 예제는 패키지로 별도로 작성해두었습니다.

# https://github.com/tidory/example
npm install tidory/example

이제 views/Header 대신에 index.pug 에 다음과 같이 포함만 시키면 된답니다.

include @tidory/example