0. 파일트리
├─dist
├─node_modules
├─src
│ ├─html
│ │ ├─pages // 각 페이지가 들어갈 폴더
│ │ │ └─home.njk
│ │ └─templates // 템플릿이 들어갈 폴더
│ │ └─layout.njk
│ ├─img
│ ├─scss
│ └─js
├─gulpfile.js
├─package-lock.json
└─package.json1. block
{% block 블럭명 %}
{% endblock %} 템플릿 페이지 내, 각 페이지마다 다르게 들어갈 부분에 위의 태그를 삽입한다. 블럭명은 운영관리를 위해 들어갈 내용의 타이틀을 기입하는 것을 추천한다.
layout.njk:
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<meta charset="utf-8" />
</head>
<body>
<div>
{% block content %}
{% endblock %}
</div>
</body>
</html>2. extends
{% extends “가져올 탬플릿 위치” %}각 페이지에서 템플릿을 가져오기 위해선 extends 태그와 동일명의 block 태그가 필요하다. 해당 페이지의 내용은 block 태그 안에 자리한다.
home.njk:
{% extends "../templates/layout.njk" %}
{% block content %}
<p>HOME page</p>
{% endblock %}결과물:
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<meta charset="utf-8" />
</head>
<body>
<div>
<p>HOME page</p>
</div>
</body>
</html>3. 변수
{{ 변수 }} <!-- 변수값 -->
{% set 변수 = “변수값” %} <!-- var 변수 = "변수값" -->각 페이지마다 다른 값을 가지는 부분은 {{ 변수 }}로 지정하고, 해당 페이지 상단에 {% set 변수 = “변수값” %}을 지정한다. 꼭 최상단에 있어야하는 것은 아니고, 변수값을 요청하기 전에 선언되면 된다.
layout.njk:
<!DOCTYPE html>
<html>
<head>
<title>{{ page_title }}</title> <!-- 변수값 삽입부분 -->
<meta charset="utf-8" />
</head>
<body>
<div>
{% block content %}
{% endblock %}
</div>
</body>
</html>home.njk:
{% set page_title = “Home” %} <!-- 변수와 변수 값 선언 -->
{% extends "../templates/layout.njk" %}
{% block content %}
<p>HOME page</p>
{% endblock %}결과물:
<!DOCTYPE html>
<html>
<head>
<title>HOME</title>
<meta charset="utf-8" />
</head>
<body>
<div>
<p>HOME page</p>
</div>
</body>
</html>4. Include
extends는 이 페이지를 감싸 안아줄 템플릿을 불러온다 생각해보면, include는 이 페이지가 품을 템플릿을 가져온다고 생각할 수 있다. 즉 레이아웃 외에 부분적인 공통 영역을 위한 태그이다.
{% include “가져올 탬플릿 위치” %}만약 include에 넘겨야 하는 변수값이 있다면, lnclude 위에 변수값({% set %})을 지정해줘야 오류가 발생하지 않는다.
{% set page-language = “en” %}
{% include “../parts/language.njk” %}5. super(), 템플릿 상속
템플릿에서 {% block %}과 {% endblock %} 사이에 내용이 있을 경우, {% extends %}가 실행되면 기존 내용은 사라진다. 만약 기존 내용을 유지하고, 이어서 내용을 삽입하고 싶을 때는, 템플릿을 불러오는 쪽에 super()를 삽입하면 된다.
그리고 한 파일에, 여러개의 {% block %}을 지정해 줄 수 있다. 다만 블록 이름에 주의할 것.
layout.njk:
{% block slide-script %}{% endblock %}
</head>
<body>
<div class=“wrap”>
{% block slide %}
This is a test!
{% endblock %}
</div>
</body>slide.njk:
{% extends “./layout.njk” %}
{% block slide-script %}
{% include “./parts/script-slideshow.njk” %}
{% endblock %}
{% block slide %}
{{ super() }} <!-- 기존 내용 유지용 -->
<div id=slide_show_bg”>
{% include “../parts/slideshow.njk” %}
</div>
{% endblock %}결과물:
This is a test!
block slide의 내용super() 미사용시, 아래와 같이 기존 내용 "This is a test!"은 block slide의 내용으로 대체된다.
block slide의 내용
2021/01/07 - [web/gulp] - gulp 설치 및 .src() .pipe() .dest() / 설명 추가
2021/01/07 - [web/gulp] - [템플릿] gulp-nunjucks-render : 기본 사용방법
2021/01/07 - [web/gulp] - [템플릿] gulp-nunjucks-render : function(if, for, marco)
'javascript > gulp' 카테고리의 다른 글
| [코드정렬] pretty, through2 : 소스코드야 줄서자 (2) | 2021.01.08 |
|---|---|
| gulp-data : json 데이터 좀 html에 기입해주시겠습니까 (0) | 2021.01.08 |
| [템플릿] gulp-nunjucks-render : function(if, for, marco) (0) | 2021.01.07 |
| [템플릿] gulp-nunjucks-render : 설치 및 gulpfile 설정 / 설명 추가 (0) | 2021.01.07 |
| gulp 설치 및 .src() .pipe() .dest() / 설명 수정 추가 :( (0) | 2021.01.07 |
댓글