Documents

DocumentsContent

티도리가 뭔가요?

티스토리 스킨 제작 프레임워크

티도리티스토리 스킨 제작 을 위해 고안된 프레임워크 입니다. 개발자의 입맛에 맞게 다양한 기능을 사용하여 신속하고 재사용성이 높은 스킨제작을 목적으로 하고 있습니다. 대표적으로 제공하는 기능으로는 템플릿 분리, 스킨 미리보기 와 각종 디렉티브 및 API가 존재합니다.
* 프레임워크는 어플리케이션을 빠르게 개발하기 위해 제공되는 '틀' 같은 존재입니다.

템플릿 분리

티스토리 스킨을 개발 시점부터 skin.html 에 몰아서 작성하는 것은 상당히 비효율적입니다. 템플릿 분리 기능은 티도리를 제작하게 된 계기이기도 합니다. 티스토리는 자신들이 권장하는 스킨 구조가 있는데, 이것에 따라 우리는 파일을 나눌 수 있습니다. 티스토리는 다음과 같은 스킨 구조를 가집니다.
자세한 내용을 알아보려면 템플릿 분리 부분을 참고해주세요.
우리는 이 구조를 다음과 같은 구조로 나눠볼 수 있습니다.
├── views/
│     ├── Header.pug
│     ├── Content.pug
│     ├── Sidebar.pug
│     └── Footer.pug

단일 파일 템플릿

하나의 템플릿 파일(.pug)에 스타일, 마크업, 스크립트 를 모두 포함할 수 있습니다! 이는 독립성을 제공하여 재사용성을 높여줍니다.
자세한 내용을 알아보려면 템플릿 작성 부분을 참고해주세요.

스킨 미리보기

개발과정에서 티스토리 치환자에 의해 해석된 모습을 미리보고 싶은 경우가 많을 것입니다. 그러나, 그것을 한 번 확인하기 위해 거쳐야하는 과정은 참으로 귀찮습니다. 로그인, 관리자페이지, HTML편집, 코드복사, 파일업로드 라는 과정을 반복해야 하죠. 티도리 프레임워크에서는 이러한 귀찮음을 해결하고 스킨을 미리볼 수 있도록 스크립트를 구성하였습니다.
자세한 내용을 알아보려면 스킨 미리보기 부분을 참고해주세요.

디렉티브 및 속성

디렉티브 는 소스코드의 동작을 속성을 통해 지시내리는 것을 말합니다. 특정 코드를 해석하지 않거나, 반복해서 렌더링하거나 하는 등으로 사용됩니다. 속성 의 경우는 말 그대로 해당 태그가 가지는 속성을 말합니다. 예를 들면, style 태그를 style.css 로 가져갈 것인지, 아니면 제자리에 남길 것인지가 예입니다.
예를 들어 다음의 코드에서 p(t-else) TIDORY 코드는 실제 배포코드에 포함되지 않습니다.

Usage

*.pug

p(t-if="true") it's awesome framework for Tistory Skin
p(t-else) TIDORY

티도리 API

티도리 API 는 템플릿에서 작성된 디렉티브와 다양하게 연동가능한 라이브러리입니다. 대표적인 예로 전역변수 가 있는데, 이는 템플릿 전체에서 사용가능한 변수입니다.
전역변수 message 의 값이 tidory 라고 설정되어 있는경우, 다음과 같이 사용할 수 있습니다.

Usage

*.pug

//- style
style.
  div::before {
    // content: 'tidory'
    content: '@{message}'
  }
//- template
// <div>TIDORY</div>
div @{message.toUpperCase()}

웹팩 번들링

티스토리는 images 폴더에서 모든 에셋을 관리합니다. 개발과정에서는 상당히 불편하다고 볼 수 있죠. 굳이 수정하지 않는 라이브러리까지 넣어야하니까 말이죠. 티도리 프레임워크에서는 bower_components 등에서 파일을 옮기지 않고 웹팩 엔트리에서 번들링하여 스킨에 포함할 수 있습니다.
자세한 내용을 알아보려면 디렉터리 구조 부분을 참고해주세요.