TidoryContainer

Documents

DocumentsContent

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

DirectoryStructure

디렉터리 구조

├── assets/
├── docs/
├── images/
├── layouts/
├── views/
├── app.pug
├── index.pug
├── webpack.base.conf.js
└── webpack.entry.js

프레임워크 아키텍쳐

하나 하나의 요소를 자세히 살펴보기 이전에, 좀 더 쉬운 이해를 위해 디렉터리 구조 에서 나온 폴더와 파일이 어떤 역할을 하는지 대략적으로 표현해보았습니다.
간단하게 정리하자면, app.pug 는 스킨의 기본구조이자 layouts/*.pug 에서 상속하며, index.pug 에서 views/*.pug 를 불러오는 것으로 최종적으로 합치게 됩니다. 이후 티스토리 설정파일 과 함께 tidory build 를 통해 배포전용 으로 만듭니다.
프레임워크 아키텍쳐

Tidory/assets/*

해당 디렉터리의 용도는 webpack.entry.js 에 포함할 파일들을 넣는 용도이며, 필수적이기 않기 때문에 디렉터리 이름을 변경할 수 있습니다.

Tidory/docs/*

티스토리 스킨 업로드에 필요한 파일이 위치하고 있습니다. index.xml, preview256.jpg, preview560.jpg, preview1600.jpg, 프로덕션 빌드Tidory/dist 폴더로 이동합니다.

Tidory/images/*

보통 프레임워크에서 정적파일의 폴더이름은 static 으로 처리 될 수 있습니다만, 티스토리에서는 images 폴더로 모든 정적파일 을 관리합니다. 템플릿에서는 다음과 같이 포함될 수 있습니다.

<img src="./images/favicon.png">

템플릿 구조

템플릿 관련 파일을 살펴보기 전에 템플릿이 어떤 계층 으로 이루어져 있는지 간단하게 그림으로 살펴봅시다.
템플릿 구조

Tidory/app.pug

html 의 기본적 구조가 선언되어 있는 템플릿입니다. block HEADhead 태그의 마지막 부분이며, index.pug 파일에서 설정됩니다. block TISTORY 부분은 스킨의 몸통 부분입니다. layouts/default.pug 파일에서 설정됩니다.
app.pug

doctype html

html(lang="ko")
  head
    //- TISTORY RSS
    link(rel="alternate", type="application/rss+xml", 
       title="[##_title_##]", href="[##_rss_url_##]")
    //- meta
    meta(charset="utf-8")
    meta(name="viewport" content="user-scalable=no, 
       initial-scale=1.0, maximum-scale=1.0, 
       minimum-scale=1.0, width=device-width")
    //- End of Head
    block HEAD

  body(id="[##_body_id_##]")
    //- TISTORY main content
    block TISTORY

Tidory/layouts/*.png

레이아웃 파일이 들어갈 수 있습니다. default.pug 파일이 기본적으로 생성되어 있으며, 이는 index.pug 에서 기본 레이아웃으로 사용됩니다. 기본적으로 레이아웃 파일은 app.pug 파일을 상속받아 사용합니다.
layouts 폴더에 있는 기본 레이아웃인 default.pug 는 다음과 같습니다.
default.pug

extends ../app

block TISTORY
  s_t3
    div#__tidory
      block TIDORY

Tidory/views/*.png

pug 템플릿 파일이 위치할 폴더입니다. 보통 index.pug 파일의 block TIDORY 부분에서 템플릿파일을 포함시킵니다.

HelloWorld.pug

Tidory/index.pug

skin.html 파일로 변환될 pug의 메인 템플릿 입니다. 기본적으로 layouts/default.pug 파일을 상속받으며, block HEAD 의 경우 app.pug, block TIDORY 부분은 layouts/default.pug 파일에서 찾을 수 있습니다.
index.pug

extends ./layouts/default

//- End of head
block HEAD
  title [##_title_##] :: [##_page_title_##]

  <!--[if lt IE 9]>
  script(src="https://t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js")
  <![endif]-->
  <!--[if gte IE 9]><!-->
  script(src="https://t1.daumcdn.net/tistory_admin/lib/jquery/jquery-3.2.1.min.js")
  <!--<![endif]-->

block TIDORY
  include views/HelloWorld

Tidory/webpack.base.conf.js

Webpack기본 설정 으로 정해진 파일입니다. 해당 파일을 통해 기본적인 웹팩 설정을 변경할 수 있습니다. 설정 정보가 궁금하다면 웹팩의 공식 홈페이지를 참고해주시기 바랍니다 https://webpack.js.org/configuration/
webpack.base.conf.js
  
const path = require('path');

module.exports = {
  entry:  path.resolve(__dirname, './webpack.entry.js'),
  module: {
    rules: [
      {
        test: /.(png|jpe?g|gif|svg)(?.*)?$/,
        loader: 'url-loader'
      },
      {
        test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?$/,
        loader: 'url-loader'
      },
      {
        test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
        loader: 'url-loader'
      },
      {
        test: /.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test: /.css$/,
        use:  ["style-loader", "css-loader"]
      },
      {
        test: /.pug$/,
        use: ['pug-loader']
      }
    ]
  }
}

Tidory/webpack.entry.js

Webpack엔트리 로 정해진 파일입니다. 여기서는 번들링 될 모든 파일을 포함시켜야 하며 .css, .less, .js 등이 tidory.bundle.js 에 포함됩니다. webpack.base.conf.js 설정에 따라 포함시킬 수 있는 파일이 다르며 기본적으로 js, css 파일을 포함시킬 수 있습니다.
생성된 tidory.bundle.js 파일은 body 태그의 마지막부분에 포함됩니다. 따라서 이 파일에 script 또는 plugin 파일을 포함시켜주세요.
webpack.entry.js

 /* webpack.entry.js
  * 
  * Entry for bundling by webpack.
  * for example, if you have your own script, or plguin,
  * you can import that. 
  * ex) import "./bower_components/animate.css/animate.min.css"
  * 
  * you are able to include js, css
  * if you want to contain other scripts like .ts, .less, .sass,
  * set the loaders in ./webpack.base.conf.js
  * 
  * after import assets it will be contained in tidory.bundle.js
 */
* 여기에 포함되는 파일을 images 폴더에 넣으면 안됩니다.