Gulp Nunjucks 템플릿에 사용할 데이터 모델 제공

Gulp를 사용하여 Nunjucks 템플릿을 gulp-nunjucks 또는 gulp-nunjucks-render으로 렌더링하려고합니다. 내 nunjucks 템플릿에서 JSON 데이터를 사용하기 위해 하나 또는 일련의 .json 파일을 템플릿 패키지에 전달할 수있는 방법이 있습니까?Gulp Nunjucks 템플릿에 사용할 데이터 모델 제공

이상적으로는 models/ 디렉토리가 있고 각 페이지에는 해당 템플릿에 사용될 내용이있는 page.json 파일이 있습니다.

위의 플러그인 중 하나와 가능하다면 어떻게 구현할 수 있는지 알고 싶습니다. 단일 또는 일련의 .json 파일에 대한 예제는 매우 유용합니다.

출처

2014-10-11 Ian

gulp-data를 사용하여 찾으십시오. https://www.npmjs.org/package/gulp-data 파일 소스 (file.data)의 새 속성을 통해 스트림으로 전송하는 JSON 파일 또는 데이터베이스 인 모든 소스에서 JSON을 생성합니다. nunjucks 플러그인은 해당 데이터 속성을 사용하도록 수정해야합니다.

출처

2014-10-18 19:54:38

이것은 나를 위해 일했지만 내 경우에는 내가 필요한 모든 것을하지 못했습니다. 다음과 같은 내 gulpfile으로 :

//Compile Nunjucks Templates 
gulp.task('nunjucks', function() { 
    nunjucksRender.nunjucks.configure(['templates/']) 
    return gulp.src('src/pages/*.html') 
     .pipe(nunjucksRender(nunjucksOptions)) 
     .pipe(gulp.dest(output.html)) 
     .pipe(reload({stream:true})); 
});

내 JSON 만 페이지에 데이터를 제공하지 파셜 내가 포함하고있어 매크로에 삽입하려면 여기를 꿀꺽 데이터를 사용하여.

{ 
    "loggedin":false 
}

및

{% if data.loggedin %} 
<a href="#" class="nav__item nav__item--login"> 
    <div class="nav__item--login_img"> 
     <img src="http://pipsum.com/200x200.jpg" alt="" /> 
    </div> 
    <p class="nav__item--login_user">JohnDoe345</p> 
</a> 
{% else %} 
<a href="#login" data-lity class="nav__item nav__item--login"> 
    <div class="nav__item--login_cta">Sign In</div> 
</a> 
{% endif %}

를 만들려면 : 내 경우에는, 내가 예를 들어, 에뮬레이트 할 수있는 중앙 JSON 설정 파일을 사용하고, 내 프론트 엔드는 사용자가 로그인 할 때처럼 무엇을 보일 것 모든 템플릿/페이지/부분/매크로/등에서 액세스 할 수있는 파일 나는 다음의 manageEnv 설정을 꿀꺽 - nunjucks가 렌더링 사용하고 있습니다 :

nunjucksOptions = { 
    path: ['src/pages/', 'src/templates/'], 
    watch:true, 
    manageEnv:function(env){ 
     var data = JSON.parse(fs.readFileSync('states.json')); 
     env.addGlobal('data',data); 
    } 
}

감사 알렉스 구청에 tip 동안 캐시되는 내 JSON을 유지하기위한 FS를 사용하여.

출처

2016-07-18 18:48:00

Gulp Nunjucks 템플릿에 사용할 데이터 모델 제공

답변

관련 문제