TidoryContainer

Tidory

TidoryIndex

It's awesome framework for Tistory Skin

With Webpack, Pug

Tidory

티스토리 맞춤 빌드

티스토리 스킨제작을 위한 맞춤 빌드가 제공됩니다. 그저 콘솔에 빌드명령을!

쉬운 난이도

다른 프레임워크와 다르게 내용이 적습니다. 그대의 시간은 소중하니까요.

티도리 모듈 적용

프레임워크와 상호작용하는 티도리 모듈을 사용하여 간편하게 개발할 수 있습니다!

Showcase

템플릿 작성

Pug 템플릿을 작성하고 빌드하세요. 단순히 콘솔에 tidory dist 스크립트를 실행하면 됩니다!

//- style
style.
  main#td-hello-world h2.td-tidory {
    margin-top: 35px;
    font-size: 32pt;
    font-weight: 200;
  }
//- script
- 
  const data = {
    title: "It's awesome framework for Tistory Skin",
    subTitle: 'With Webpack, Pug',
    logoPath: "./images/favicon.png",
    tidory: "Tidory"
  }
//- template
main#td-hello-world
  section.td-hello-world
    header.td-header(role="header")
      h1.td-title #{data.title}
      h2.td-subtitle #{data.subTitle}
      div.td-logo: img(src=data.logoPath, alt="tidory")
      h2.td-tidory #{data.tidory} 

웹팩 번들링

컴파일되지 않은 .less, .ts 와 같은 파일은 웹팩의 엔트리인 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
 */

티도리 API

티도리 API 를 사용하여 코드를 다채롭게 구성할 수 있습니다.

tidory.config.js
          
const tidory = require('tidory');

const directive = tidory.Directive;
const event = tidory.Event;

directive.register('test', function(el, value) {
  console.log(el.html())
  console.log(value)
});

event.on('BeforeCompiling', function() {
  // ...
});

// ...