TidoryContainer

Documents

DocumentsContent

NoExtensions

확장언어 버리기

이 문서에서는 기존의 버전에서 확장언어인 pug의 사용을 버리고 HTML 사용으로 변환하는 방법을 설명합니다. 따라서 확장언어를 사용하는 방법을 모르더라도, 스킨 제작에 아무 지장이 없도록 구성합니다.
아래의 문서는 과정을 설명한 것입니다. 빠르게 시작하려면 https://github.com/pronist/tidory-html-template를 참고하세요.

Tidory/build/tistory.build.config.js

tistory.build.config.js 파일에서 기본 pugTemplate 부분을 HTMLTemplate 변경한 뒤, resolve 함수안에 매개변수를 ../src/index.pug 에서 ../src/index.html로 변경합니다.
tistory.build.config.js

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

Tidory/build/webpack.(prod/dev).conf.js

webpack.(prod/dev).conf.jsHtmlWebpackPlugin에서 template값을 config.HTMLTemplate로 변경합니다.
webpack.(prod/dev).conf.js

new HtmlWebpackPlugin({
	template: config.HTMLTemplate,
	filename: config.exportHtmlFileName,
	//...
})

Tidory/index.html

index.pug대신 index.html템플릿을 작성합니다. *.bundle.js 주석 부분은 ./images/tidory.vendor.bundle.js스크립트를 필두로 ./images/tidory.bundle.js를 포함시켜야 합니다.
HTML 템플릿 작성은 Tidory 템플릿 작성 가이드가 아니라, 티스토리 공식 스킨가이드인 http://www.tistory.com/guide/skin/step3를 참고해서 작성해주시기 바랍니다.
index.html
			
<!DOCTYPE html>
<html lang="ko">
  <head>
	<title>Tidory</title>
	<link rel="alternate" type="application/rss+xml" 
			itle="[##_title_##]" 
			href="[##_rss_url_##]">
	<link rel="stylesheet" href="./style.css">
  </head>
  <body>
	<s_t3>
	  <div id="__tidory">
	  	<!-- TISTORY -->
	  </div>
	</s_t3>
  </body>
  <!-- *.bundle.js -->
</html>