TidoryContainer

Tidory

TidoryIndex

It's awesome framework for Tistory Skin

With Webpack, Pug

Tidory

티스토리 맞춤 빌드

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

손쉬운 사용

다른 프레임워크에 비해 사용이 매우 간편합니다. 오직 티스토리 스킨만을 위한.

확장 언어

빠른 개발을 위해 HTML 대신 Pug 확장언어를 사용할 수 있습니다.

Showcase

템플릿 작성

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

extends ../layouts/default

block head
	meta(charset="utf-8")
	// Open Graph protocol
	meta(property="og:description", 
			content="Tidory Framework for Tistory Skin")
	meta(property="og:title", content="Tidory")
	meta(property="og:site_name", content="Tidory")
	meta(property="og:url", content="http://tidory.com")

block TISTORY
	include templates/HelloWorld

block scripts
	// jQuery
	// script(src="https://code.jquery.com/jquery-3.2.1.js") 

웹팩 번들링

컴파일되지 않은 lessjs 파일은 웹팩의 엔트리인 main.js 을 기준으로 번들링됩니다.

// css
	import "./style.css"
// assets
	//css
		const css = require.context(
			"./assets/css", 
			true, 
			/^./.*.css$/
		);    
		css.keys().map(css); 

개발 서버

개발을 위한 개발 서버를 제공합니다. 변화를 자동으로 감지하여 새로고침을 수행합니다. npm start가 전부입니다.

module.exports = {
	devServer: {
		quiet: true,
		hot: true,
		watchContentBase: true,   
		index: config.dev.index
	}
	//...
}