TidoryContainer

Documents

DocumentsContent

DirectoryStructure

디렉터리 구조

├── build/
│   ├── tistory.build.config.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── docs/
├── images/
├── layouts/
├── assets/
├── view_styles/
├── views/
├── index.pug
├── style.css
└── webpack.entry.js

Tidory/docs/*

티스토리 스킨 업로드에 필요한 파일이 위치하고 있습니다. index.xml, preview256.jpg, preview560.jpg, preview1600.jpg, 프로덕션 빌드Tidory/dist 폴더로 이동합니다.

Tidory/images/*

보통 프레임워크에서 정적파일의 폴더이름은 static으로 처리 될 수 있습니다만, 티스토리에서는 images 폴더로 모든 정적파일을 관리합니다. 템플릿에서는 다음과 같이 포함될 수 있습니다.

./images/favicon.png

Tidory/layouts/*.png

레이아웃 파일이 들어갈 수 있습니다. default.pug파일이 기본적으로 생성되어 있으며, 이는 index.pug에서 기본 레이아웃으로 사용됩니다.
layouts폴더에 있는 기본 레이아웃인 default.pug는 다음과 같습니다.
 layouts/default.pug

doctype html

html(lang="ko")
	head
		//- BLOG NAME
		title Tidory 
		//- TISTORY RSS
		link(rel="alternate", type="application/rss+xml", 
				title="[##_title_##]", 
				href="[##_rss_url_##]")
		//- Only for PRODUCT
		link(rel="stylesheet" href="./style.css")
		block head
	body
		//- TISTORY CONTAINER
		s_t3
			div#__tidory
				block TISTORY

	//- Only for PRODUCT
	script(type="text/javascript", 
		src="./images/tidory.vendor.bundle.js")
	script(type="text/javascript", 
		src="./images/tidory.bundle.js")
	block scripts

Tidory/assets/**/*

webpack 으로 빌드하기 위한 자산파일이 들어갈 수 있습니다. 정적파일과는 달리 번들링을 위한 장소이며 CSS 파일은 Tidory/dist/style.css 로 압축되어 번들링됩니다. 그 외에 CSS 파일에 포함되는 이미지, 폰트가 포함될 수 있습니다. 
* 템플릿에 포함되는 정적파일을 포함하지 마십시오.

Tidory/view_styles/*.css

이 폴더는 뭉쳐있던 스타일시트와 뷰를 분리하기 위함이며 템플릿에 대응하는 스타일시트 파일을 넣어야 합니다. 따라서 views/HelloWorld.pug파일에 존재하는 경우 다음과 같이 view_styles/HelloWorld.css를 생성하여 포함시키십시오. 이 폴더는 웹팩에 의해 자동으로 번들링 되지 않습니다. 따라서 style.css 파일에 다음과 같이 포함시켜야 합니다.
 style.css

/* view_styles */
	/* HelloWorld.pug */
		@import url('./view_styles/HelloWorld.css');

Tidory/views/*.png

템플릿파일을 포함시킬 수 있습니다.

HelloWorld.pug

Tidory/webpack.entry.js

webpack 의 엔트리로 정해진 파일입니다. 여기서는 번들링 될 모든 파일을 포함시켜야 하며 .css, .less, .js 등이 포함됩니다. 기본적으로는 .css 파일만 포함되어 있습니다.
 webpack.base.conf.js

module.exports = {
	entry: './webpack.entry.js',
	//...
}
 webpack.entry.js
			
// Dependencies
	// css
		import "./style.css"
	// assets
		//css
			const css = require.context(
				"./assets/css", 
				true, 
				/^./.*.css$/
			);    
			css.keys().map(css);

Tidory/index.pug

skin.html 파일로 변환될 pug의 메인 템플릿입니다.
 index.pug

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")
 tistory.build.config.js

const config = {
	pugTemplate: resolve('../index.pug'),
	exportHtmlFileName: resolve('../dist/skin.html'),
	//...
}    
			

Tidory/style.css

티스토리 스킨에 사용될 스타일시트입니다. 빌드시 style.css의 일부분으로 들어가며, 기본으로 설정된 webpack의 엔트리인 webpack.entry.js의 코드에 따라assets/css에 포함된 모든 스타일시트와 합쳐집니다.