[템플릿] gulp-nunjucks-render : function(if, for, marco)

1. If 문

{% if 값 %}
	It is true
{% endif %}

{% if hungry %}
	I am hungry
{% elif tired %}
	I am tired
{% else %}
	I am good!
{% endif %}

 

• && → and
• || → or
• ! →not

{% if happy and hungry %}
    I am happy *and* hungry; both are true.
{% endif %}

{% if happy or hungry %}
    I am either happy *or* hungry; one or the other is true.
{% endif %}

2. for 문

{% for 아이템 in 배열 %}
	{{ 아이템 }}
{% endfor %}

2-1. 샘플

{% set navigation = [
	{ 'name': '1' , 'url': '1.html' },
	{ 'name': '2' , 'url': '2.html' },
	{ 'name': '3' , 'url': '3.html' }
] %}
{% extends "../templates/layout.njk" %}

{% block content %}
    {% for item in navigation %}
        <a href=“{{item.url}}”>{{item.name}}</a>
    {% endfor %}
{% endblock %}

<a href=“1.html”>1</a>
<a href=“2.html”>2</a>
<a href=“3.html”>3</a>

3. 매크로

{% macro 매크로명 %}
{% endmacro %}

javaScript의 function(){}과 비슷한 개념으로 적절한 사용은 운영관리에 큰 도움을 준다. 그 예로 같은 영역인데, EN 버전과 KO 버전이 있다 가정하자.

 

3-1. for 만을 사용한 경우

en-ver.njk:

{% for item in page.en %}
	{% if loop.first %}
		<a href=“{{item.url}}”>{{item.name}}</a>&nbsp;&nbsp;&nbsp; |
	{% elif loop.last %}
		&nbsp;&nbsp;&nbsp;<a href=“{{item.url}}”>{{item.name}}</a>
	{% else %}
		&nbsp;&nbsp;&nbsp;<a href=“{{item.url}}”>{{item.name}}</a> &nbsp;&nbsp;&nbsp;|
	{% endif %}
{% endfor %}

ko-ver.njk:

{% for item in page.ko %}
	{% if loop.first %}
	    <a href=“{{item.url}}”>{{item.name}}</a>&nbsp;&nbsp;&nbsp;|	
	{% elif loop.last %}
		&nbsp;&nbsp;&nbsp;<a href=“{{item.url}}”>{{item.name}}</a>
	{% else %}
		&nbsp;&nbsp;&nbsp;<a href=“{{item.url}}”>{{item.name}}</a> &nbsp;&nbsp;&nbsp;|
	{% endif %}
{% endfor %}

 

3-2 marcro + for 를 사용한 경우

+ insert-space.njk:

{% marco insertSpaces(num) %}
	{% for i in range(0, num) %}
		 
	{% endfor %}
{% endmacro %}

+ link-item-list.njk:

{% from “./insert-space.njk” import insertSpaces %}

{% marco linkItemLink(spacer, num, linkLang) %}
   {% for item in linkLang %}
      {% if loop.first %}
         <a href=“{{item.url}}”>{{item.name}}</a>{{insertSpaces(num)}}{{spacer}}
      {% elif loop.last %}
         {{insertSpaces(num)}}<a href=“{{item.url}}”>{{item.name}}</a>
      {% else %}	
         {{insertSpaces(num)}}<a href=“{{item.url}}”>{{item.name}}</a>{{insertSpaces(num)}}{{spacer}}
      {% endif %}
   {% endfor %}
{% endmacro %}

en-ver.njk:

{% from “./link-item-list.njk” import linkItemLink %}
{{linkItemLink(“|”, 3, page.en)}}

ko-ver.njk:

{% from “./link-item-list.njk” import linkItemLink %}
{{linkItemLink(“|”, 3, page.ko)}}

파일 수와 코드 길이만 보면, 구축면에서 3-1이 더 좋게 다가온다.

하지만 운영 관리를 고려하면 결과는 달라진다. 3-1은 두 파일 모두 동일한 수정이 필요한 반면, 3-2는 하나의 파일에서 제어 가능하다. 따라서 템플릿 작업할 때에는, 구축만이 아니라 운영관리의 면 역시 고려해야 한다.

 

2021/01/07 - [web/gulp] - [템플릿] gulp-nunjucks-render : 설치 및 gulpfile 설정

2021/01/07 - [web/gulp] - [템플릿] gulp-nunjucks-render : 기본 사용방법