티스토리 예제

템플릿 작성

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

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

index.pug

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

extends app

block TIDORY
  //- template
  include views/Header

views/header.pug

이번에는 Header/BlogTitle 과 Header/BlogMenu 를 포함하고 있습니다. 각각 블로그 제목 과 블로그 메뉴입니다. 이 둘은 자식 템플릿입니다.

header#header(role="header")
  //- Tistory Blog Title
  include Header/BlogTitle
  //- Tistory Blog Menu
  include Header/BlogMenu

views/Header/blogTitle.pug

블로그 제목의 h1태그 내부에는 style 태그가 쓰인 것을 알 수 있습니다. 여기서 style 태그는 빌드하면 style.css 파일로, script 태그를 사용하면 images/script.js 파일로 분리됩니다!

h1
  style.
    h1 > a {
      color: orange;
      text-decoration: none;
    }
  //- skin.html
  a(href="[##_blog_link_##]") 
    img(src="./images/logo.png")
    | [##_title_##]
  //- script.js
  script.
    console.log("Hello, World!")

views/Header/blogMenu.pug

블로그 메뉴의 style, script 태그에 scoped 옵션이 쓰인 것을 볼 수 있습니다. 이 옵션을 쓰면, 해당 태그가 각각 파일로 분리되지 않고 제자리에 남게됩니다. 그 말은 즉, skin.html 파일에 남는다는 얘기가 됩니다.

nav#nav(role="navigation")
  style.
    nav {
      font-size: 0.9em;
      color: green;
      font-weight: bold;
    }
  //- skin.html
  | [##_blog_menu_##]
  script(scoped).
    console.log("Hello, World!")

우리가 뷰 컴포넌트를 사용할 때 붙이는 scoped 는 효력의 범위가 컴포넌트 내부로 한정됩니다. 하지만 티도리 프레임워크의 퍼그 템플릿 내부에서 쓰인 scoped 는 해당 코드가 특정 범위에 들어와야 실행이 되며 실행효력이 전역적입니다.

프로덕션 코드

우리가 만든 스킨을 이제 사용자에게 배포하기 위해 빌드하면 다음과 같은 코드로 나뉘어집니다. div#__tidory 는 app.pug 에 정의되어 있습니다.

skin.html

<div id="__tidory">
  <header id="header" role="header">
    <h1>
      <a href="[##_blog_link_##]">
        <img src="./images/logo.png">
        [##_title_##]
      </a>
    </h1>
    <nav id="nav" role="navigation">
      [##_blog_menu_##]
      <script>
        console.log("Hello, World!");
      </script>
    </nav>
  </header>
</div>

style.css

h1 > a {
  color: orange;
  text-decoration: none
}
nav {
  font-size: 0.9em;
  color: green;
  font-weight: bold;
}

images/script.js

"use strict";

console.log("Hello, World!");