템플릿 작성
티스토리 예제로 템플릿 작성의 기초를 알아보겠습니다. 간단하게 블로그의 제목과 메뉴를 출력하는 것을 해보죠. 우리가 작성할 예제의 폴더구조는 다음과 같습니다.
├── views/ │ ├── Header.pug │ ├── Header │ ├── BlogTitle.pug │ └── BlogMenu.pug └── index.pug
index.pug
현재 views/Header 파일이 포함되어 있습니다. 여기서 views/Header 템플릿은 부모 템플릿이 됩니다.
extends app
block TIDORY
//- template
include views/Header
views/header.pug
이번에는 Header/BlogTitle 과 Header/BlogMenu 를 포함하고 있습니다. 각각 블로그 제목 과 블로그 메뉴입니다. 이 둘은 자식 템플릿입니다.
header#header(role="header")
//- Tistory Blog Title
include Header/BlogTitle
//- Tistory Blog Menu
include Header/BlogMenu
views/Header/blogTitle.pug
블로그 제목의 h1태그 내부에는 style 태그가 쓰인 것을 알 수 있습니다. 여기서 style 태그는 빌드하면 style.css 파일로, script 태그를 사용하면 images/script.js 파일로 분리됩니다!
h1
style.
h1 > a {
color: orange;
text-decoration: none;
}
//- skin.html
a(href="[##_blog_link_##]")
img(src="./images/logo.png")
| [##_title_##]
//- script.js
script.
console.log("Hello, World!")
views/Header/blogMenu.pug
블로그 메뉴의 style, script 태그에 scoped 옵션이 쓰인 것을 볼 수 있습니다. 이 옵션을 쓰면, 해당 태그가 각각 파일로 분리되지 않고 제자리에 남게됩니다. 그 말은 즉, skin.html 파일에 남는다는 얘기가 됩니다.
nav#nav(role="navigation")
style.
nav {
font-size: 0.9em;
color: green;
font-weight: bold;
}
//- skin.html
| [##_blog_menu_##]
script(scoped).
console.log("Hello, World!")
우리가 뷰 컴포넌트를 사용할 때 붙이는 scoped 는 효력의 범위가 컴포넌트 내부로 한정됩니다. 하지만 티도리 프레임워크의 퍼그 템플릿 내부에서 쓰인 scoped 는 해당 코드가 특정 범위에 들어와야 실행이 되며 실행효력이 전역적입니다.