提供数据模型在Gulp Nunjucks模板中使用

我正在寻找使用Gulp渲染我的Nunjucks模板gulp-nunjucks或gulp-nunjucks-render。有没有一种方法可以将一个或一系列.json文件传递给模板包以在我的nunjucks模板中使用JSON数据？提供数据模型在Gulp Nunjucks模板中使用

理想情况下，我会有一个models/目录，每个页面都有相应的page.json文件，其中包含要在该模板中使用的内容。

我想知道是否有可能与上述任何一个插件，如果可以的话如何实现。任何单个或一系列.json文件的例子都非常有用。

来源

2014-10-11 Ian

使用gulp-data进行调查https://www.npmjs.org/package/gulp-data它从任何来源生成JSON，可以是JSON文件或数据库，通过文件对象（file.data）上的新属性将它发送到流中。您的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数据提供给网页，而不是谐音和宏我包括。就我而言，我使用的是中央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 %}

要使文件可以访问所有模板/页面/ partials /宏/等。我使用如下一饮而尽，nunjucks渲染的manageEnv设置：

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

感谢亚历克斯病区为tip使用FS保持我的JSON被缓存。

来源

2016-07-18 18:48:00

提供数据模型在Gulp Nunjucks模板中使用

回答

相关问题