TidoryContainer

Documents

DocumentsContent

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

TidoryPatchNote

Tidory 2.0

Tidory 2.0 패치에서는 혁신적인 변화가 있습니다. 두 가지의 큰 변화인데요, 첫 째는 종속적이던 webpack 관련 파일들이 npm tidory 패키지로 분리되었습니다. 디렉터리 내에 프레임워크 사용자가 어지간해서 직접 건드릴 일이 없는 설정파일들은 정신만 사나울 뿐이죠. 두 번째, 스킨 미리보기 기능이 추가되었습니다. 이는 직접 티스토리에 들어가서 파일을 업로드하고 코드를 복사하고 미리보는 과정을 생략하고 로컬환경에서 미리 해석된 치환자 를 볼 수 있습니다.

Tidory/app.pug

이제 default 레이아웃이 아닌, app.pughtml 기본구조를 가지고 있게 됩니다. 더불어 본래 1.x 버전이 가지고 있던, 배포전용 에셋 설정(style.css, bundle.js) 을 이제 신경쓰지 않아도 됩니다. 배포모드인 경우 알아서 포함합니다.
app.pug

doctype html

html(lang="ko")
  head
    //- TISTORY RSS
    link(rel="alternate", type="application/rss+xml", 
       title="[##_title_##]", href="[##_rss_url_##]")
    //- Encoding
    meta(charset="utf-8")
    //- Only for Production
    unless htmlWebpackPlugin.options.dev
      link(rel="stylesheet" href='./style.css')

    //- End of Head
    block HEADER

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

    //- webpack bundle
    script(src="./images/tidory.bundle.js")
    //- End of body
    block FOOTER

디렉터리 구조

디렉터리 구조 가 변경되었습니다. build 폴더는 npm tidory 패키지로 별도 분리 되었으며, assets 폴더는 선택사항입니다. 이전버전에 비해 상당히 단순해졌기 때문에 조금 더 접근성이 높아졌습니다.
├── docs/
├── images/
├── layouts/
├── views/
├── app.pug
├── index.pug
├── tidory.preview.conf.js
├── webpack.base.conf.js
└── webpack.entry.js

단일 파일 템플릿

이제, 스타일 시트(.css) 파일을 별도로 구성할 필요가 없습니다. 따라서 view_styles 폴더는 제거되었으며, 템플릿 파일에 함께 넣어서 빌드하면, style.css 파일에 자동으로 삽입됩니다.
__TEMPLATE__.pug

style.
  //- style
- 
  //- inline script
//- markup

Tidory/layouts/default.pug

기본 레이아웃이 단순화 되었습니다. 본래 가지고 있던 html 기본 구조는 app.pug 파일로 별도 분리 되었습니다.
default.pug

s_t3
  div#__tidory
    block TIDORY

Tidory

npm tidory 모듈이 추가되었습니다! 이는 프레임워크와 같이 사용되어 개발에 편리함을 제공합니다. 관련 문서는 https://www.npmjs.com/package/tidory 를 참고해주시기 바랍니다.

빌드모드

이제 두 가지의 빌드를 사용할 수 있습니다. 기준은 코드 압축입니다. 유저에게 배포하기 위한 배포 모드와, 개발자가 스킨을 사용하기 위한 빌드 모드가 있습니다. 각 빌드는 tidory dist, tidory build 명령으로 사용 가능합니다.

스킨 미리보기

Deprecated in 2.1
이제 로그인 - 스킨 에디터 접속 - 코드 복사 - 파일 업로드 와 같은 번거로운 과정을 거치지 않고, 로컬 환경에서 tidory preview 를 통해 티스토리 스킨 미리보기 를 할 수 있습니다. 이는 치환자 가 모두 해석된 상태로 보여집니다.

Tidory/tidory.preview.conf.js

Deprecated in 2.1
해당 파일은 티스토리 스킨 미리보기를 위해 설정해야 하는 파일입니다. 티스토리 블로그 정보 를 입력해야 합니다. 아이디, 비밀번호, Preview URL 등이 포함됩니다.
/* tidory.preview.config.js
 *
 * set your blog infomation for preview tistory skin
 */

module.exports = {
  id: '__TISTORY_ID__',
  password: '__TISTORY_PASSWORD__',
  url: '__TISTORY_BLOG_URL__',
  previewUrl: '__TISTORY_PREVIEW_URL__',
  mode: '__TISOTRY_PREVIEW_MODE__'
  metaUrl: '__TISTORY_BLOG_META_URL__'
}