Tidory

1. 개요[편집]

---

티도리(Tidory)는 티스토리 스킨 제작 웹 프레임워크이다.
https://tidory.com/

2. 특징[편집]

---

2.1. 템플릿 분리[편집]

---

HTML 확장언어인 pug 템플릿을 사용하여 기존 티스토리 스킨을 개발하던 방식으로 skin.html 에 몰아넣는 것이 아니라, 티스토리 스킨 구조에서 제시하는 Header, Sidebar, Content, Footer 에 따라 각각 역할 별로 템플릿을 분리할 수 있다. 추후 다른 스킨을 개발하더라도 템플릿만 가져와서 포함시키기 때문에 재활용성이 뛰어나다.

2.2. 단일 파일 템플릿[편집]

---

다른 웹 프레임워크처럼 HTML 및 Pug 마크업과 동시에 스타일, 스크립트를 하나의 템플릿 파일에 작성할 수 있고 Pug에서 자체적으로 제공하는 인라인 스크립트[1] 또한 사용 가능하다. 이렇게 쓰인 파일들은 style.css[2] 와 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');

2.3. 뷰(Vue.js) & 리액트(React)[편집]

---

webpack 을 사용하므로 자바스크립트 프레임워크인 Vue.js 와 React 컴포넌트를 템플릿과 함께 사용할 수 있다. 자바스크립트를 통해 DOM(Document Object Model)이 로드되기 때문에 티스토리 치환자 및 전용태그는 해석하지 못한다. 따라서 컴포넌트는 스킨과 직접적인 관련이 없는 코드로만 작성되어야 한다. 티스토리에서 리소스를 포함할 때 스킨 내부에서 자동으로 CDN(Contents Delivery Network) 방식으로 변경하는데, 자바스크립트 내부에 불러들여진 리소스는 변경하지 않는다. 따라서 이미지와 폰트 등의 에셋을 포함하는 경우에는 webpack 설정에서 file-loader 의 publicPath 부분을 별도로 지정해야 한다.

3. 관련 문서[편집]

---

• 티스토리