[nunjucks] config.js의 변수를 macro에서 렌더링 되게하기

 

 

nunjucksRender가 Gulp의 스트림에서 각 파일을 처리할 때마다 data 옵션으로 전달된 객체를 템플릿의 컨텍스트로 사용하게 된다. 즉, 각 템플릿에서는 data 옵션에 정의된 변수를 직접 참조할 수 있어야 한다.

 

그러나 여기서 문제가 발생하는 부분은 Nunjucks의 macro가 별도의 scope를 가지고 있어서 macro 밖에서 정의된 변수를 직접 참조하지 못하는 것이다. 이를 해결하기 위해 변수를 macro에 인자로 전달해야 한다.

 

 

 

//config.js

const config = {
    local_name: "이름",
};

module.exports = config;

 

 

//gulpfile.js

const config = require("./config.js");

function nunjucks() {
    return src(`${paths.src.html}/page/**/*`)
        .pipe(
            nunjucksRender({
                path: [`${paths.src.html}/layout`, `${paths.src.html}/partial`],
                data: config,
            })
        )
        .pipe(dest(paths.build.html))
        .pipe(connect.reload());
}

 

 

// macro

{% macro pageTitle(local_name) %}
    <section class="title">
        <h2 class="title--ttl">타이틀</h2>
        <p class="title--txt"><span>{{local_name}}</span>서브 타이틀</p>
    </section>
{% endmacro %}

👉 변수를 인자로 받고

 

 

// .njk

{% import "../partial/CompTitle.njk" as pageTitle %}

{{ pageTitle.pageTitle(local_name) }}

 

👉 변수를 인자로 보낸다