jsonをループすると、gulp-nunjucks-renderは同じ内容のすべてのファイルをレンダリングします。

Question

gulp-nunjucks-renderで30以上のhtmlページをレンダリングしようとしています。私は1つのnunjucksテンプレートと2つのjsonファイル（ヘッダとフッタの一般的なテンプレートパーツと投稿データの配列）を作成しました。 "posts"関数のループ内のロジックは単純です。私は、すべての投稿が使用する一般情報を取得し、正しい投稿情報を追加し、htmlファイルにレンダリングする関数にデータを送信します。

"html"関数の中でgulp-utilを使用して、レンダリングに使用されたデータをログアウトして、データが正しいことを確認します（すべての投稿ごとに異なります）。また、ファイル名は毎回異なります。問題は、レンダリングされたhtmlファイルの内容が同じであることです。最新のレンダリングされたデータの内容です。私の一気ファイルの

関連部品：

var gulp = require('gulp'), 
    watch = require('gulp-watch'), 
    rename = require('gulp-rename'), 
    replace = require('gulp-replace'), 
    nunjucks = require('gulp-nunjucks-render'), 
    data = require('gulp-data'), 
    gutil = require('gulp-util'); 


    gulp.task('watch-projects', function(){ 
    watchDir({ 
     output: 'group/', 
     njk: 'group/parts/**/*.html', 
     html: 'group/parts/*.html'}); 
    }); 
    function watchDir(project) { 
    gulp.watch(project.njk, function() {render(project, "en"); render(project, "et");}); 
    } 
    function render(project, language) { 
    var data = require('./group/parts/data/' + language + '.json'), 
    news = require('./group/parts/data/news.' + language + '.json'); 
    posts('group/parts/news.njk', project.output + language + "/", data, news); 

    } 
    function posts(template, output, data, posts) { 
    for (var item in posts.posts) { 
     data.posts = posts.posts[item]; 
     html(template, output, data, {basename: data.posts['filename'], extname: ".html"}); 
    } 
    } 
    function html(template, output, thedata, name) { 
    if (thedata.posts) { 
     gutil.log(thedata.posts['title']); 
    } 
    gulp.src(template) 
    .pipe(data(thedata)) 
    .pipe(nunjucks({path: ['group/parts/'])) 
    .pipe(rename(name)) 
    .pipe(gulp.dest(output)); 
    } 

私はこのようSTHに見えるnews.en.jsonファイルを使用します。

{ 
    "posts" : [ 
    { 
     "title" : "some title", 
     "hero" : "../img/6.jpg", 
     "text" : "some content", 
     "pic1" : "../img/6.jpg", 
     "pic2" : "../img/6.jpg", 
     "pic3" : "../img/6.jpg", 
     "filename" : "news1" 
    }, 
    { 
     "title" : "some title2", 
     "hero" : "../img/7.jpg", 
     "text" : "some content2", 
     "pic1" : "../img/7.jpg", 
     "pic2" : "../img/7.jpg", 
     "pic3" : "../img/7.jpg", 
     "filename" : "news2" 
    } 
    ] 
} 

をそして私は（同じ内容を持つ2つのファイルを取得しますこの場合は「some title2」、「../ img/7.jpg」、「some content2」...の両方）。

私は間違っていますが、私は各HTMLで異なるコンテンツを取得したいのですが？ギャルやナンジャックスに問題はありますか？

Answer 1

毎回、参照されている変数に上書きしていました。私は参照されたオブジェクト自体を変更するのではなく、データの浅いコピーを作成する必要がありました。浅いコピーでは、コピーされた部分は参照として保存されますが、残りは別々に保存されます。

function posts(template, output, data, posts) { 
    for (var item in posts.posts) { 
    // line below did the trick, also had to change "data" in "html" function call to "current" 
    var current = Object.assign({},data); 
    current.posts = posts.posts[item]; 
    html(template, output, current, {basename: current.posts['filename'], extname: ".html"}); 
    }