TidoryContainer

Documents

DocumentsContent

TemplateGuide

템플릿 작성하기

간단하게 템플릿을 작성하는 방법에 대해서 알아보도록 하겠습니다. 그러나, 모든 템플릿을 전부 취급하지는 않습니다. 제목부만 작성해볼 예정이며, 그 외의 작성방법은 티스토리 공식 스킨가이드http://www.tistory.com/guide/skin/step3 를 참고해주시기 바랍니다.

알아야 하는 지식

템플릿은 HTML의 확장언어인 Pug언어로 작성합니다. 따라서 Pug에 대한 전반적인 지식이 있어야합니다. 퍼그 공식페이지 https://pugjs.org/language/tags.html

블로그 제목과 메뉴

간단하게 만들어볼 템플릿은 티스토리 스킨가이드의 초반부분인 블로그제목과 메뉴부분입니다. 아래의 이미지에서 사용예시치환자부분을 주시해주세요.
우선 index.pug에서 block TISTORY에 선언된 두개의 템플릿을 주목해주세요. template/BlogTitle, template/BlogMenu 라는 두 개의 템플릿이 있으며, 각각은 이름 그대로 블로그 제목블로그 메뉴에 해당하는 코드가 들어갈 영역입니다.
index.pug

extends ./layouts/default

block TISTORY
	include views/BlogTitle
	include views/BlogMenu
디렉터리 구조에서 언급한 templates 폴더에 BlogTitle.pug, BlogMenu.pug 두 개의 퍼그 템플릿을 생성합니다.
├── views/
│   ├── BlogTitle.pug
│   └── BlogMenu.pug

Tidory/views/BlogTitle.pug

이제 각각의 템플릿을 작성할 시간입니다. blogTitle.pug 템플릿은 티스토리 스킨가이드에 따라 다음과 같이 작성합니다. 여기서 [##_blog_link_##][##_title_##]은 치환자입니다.
BlogTitle.pug

div#BlogTitle
	h1 
		a(href="[##_blog_link_##]") 
			| [##_title_##]

Tidory/views/BlogMenu.pug

BlogMenu.pug 템플릿도 티스토리 스킨가이드에 따라 다음과 같이 작성합니다. 여기서 [##_blog_menu_##]는 치환자입니다.
BlogMenu.pug

div#BlogMenu
	div.blogMenu 
		| [##_blog_menu_##]

Tidory/dist/index.html

작성한 템플릿을 npm run build 를 통해 빌드하면 다음과 같이 index.html 안에 템플릿이 생성됩니다!
index.html

<div id=__tidory>
	<div id=BlogTitle>
		<h1>
			<a href=[##_blog_link_##]>[##_title_##]</a>
		</h1>
	</div>
	<div id=BlogMenu>
		<div class=blogMenu>[##_blog_menu_##]</div>
	</div>
</div>