[목차]
== 개요 ==
티도리(Tidory)는 [[티스토리]] 스킨 제작 [[웹 프레임워크]]이다.
[[https://tidory.com/]]
== 특징 ==

=== 템플릿 분리 ===
[[HTML]] 확장언어인 [[pug]] 템플릿을 사용하여 기존 티스토리 스킨을 개발하던 방식으로 skin.html 에 몰아넣는 것이 아니라, 티스토리 스킨 구조에서 제시하는 Header, Sidebar, Content, Footer 에 따라 각각 역할 별로 템플릿을 분리할 수 있다. 추후 다른 스킨을 개발하더라도 템플릿만 가져와서 포함시키기 때문에 재활용성이 뛰어나다.
=== 단일 파일 템플릿 ===
다른 웹 프레임워크처럼 [[HTML]] 및 Pug 마크업과 동시에 스타일, 스크립트를 하나의 템플릿 파일에 작성할 수 있고 Pug에서 자체적으로 제공하는 인라인 스크립트[* 템플릿이 해석되기 이전에 템플릿만을 위해 작성된 스크립트 ] 또한 사용 가능하다. 이렇게 쓰인 파일들은 style.css[* 티스토리 스킨에서 사용되는 스타일시트 이름] 와 images/script.js 로 자동으로 분리되고 scoped 속성을 부여하면 분리되지 않는다.

{{{//- style.css
style.
  main#td-index-wrapper {
    display: table;
    text-align: center;
    height: inherit;
    width: inherit;
  }
//- template
main#td-index-wrapper
    include Index/Header
//- script
script(scoped).
  cosnole.log('Hello, world');
}}}
=== 뷰(Vue.js) & 리액트(React) ===
[[webpack]] 을 사용하므로 자바스크립트 프레임워크인 [[Vue.js]] 와 [[React]] 컴포넌트를 템플릿과 함께 사용할 수 있다. 자바스크립트를 통해 DOM(Document Object Model)이 로드되기 때문에 티스토리 치환자 및 전용태그는 해석하지 못한다. 따라서 컴포넌트는 스킨과 직접적인 관련이 없는 코드로만 작성되어야 한다. 티스토리에서 리소스를 포함할 때 스킨 내부에서 자동으로 CDN(Contents Delivery Network) 방식으로 변경하는데, 자바스크립트 내부에 불러들여진 리소스는 변경하지 않는다. 따라서 이미지와 폰트 등의 에셋을 포함하는 경우에는 [[webpack]] 설정에서 [[file-loader]] 의 publicPath 부분을 별도로 지정해야 한다.
== 관련 문서 ==
 * [[티스토리]]
 
[[분류:웹 프레임워크]]