使用gulpcompilehandlebar将唯一的json数据传递到handlebar模板中

在我的index.handlebar文件中，我正在执行以下操作：

{{> article id = 'section-1'}}
{{> article id = 'section-2'}}

gulp.task('compileHandlebars', function () {
    var buildSettings = require('./build.json');
    var templateData = buildSettings,
    options = {
        batch : ['./src/assets/templates/'],
    }

    gulp.src('src/index.handlebars')
        .pipe(handlebars(templateData, options))
        .pipe(rename('index.html'))
        .pipe(gulp.dest('./dist'));
});

<section class="row article-module-4" id="{{id}}">
    <div class="col-md-5"> 
        {{#if title}}
            <header>
                <h2>{{title}}</h2>
            </header>
        {{/if}}
        <p>{{paragraph}}</p>
        </div>
    <figure class="col-md-7">
        <div class="figure-img" style="background-image: url('{{backgroundImageUrl}}');"></div>
        <figcaption>{{figCaption}}</figcaption>
    </figure>
</section>

正如您所看到的，我正在向每个文章模板实例传递一个唯一的Id，这样它们就可以分别作为目标。我这样做是因为我想用我在build.json文件中指定的唯一内容填充每个文章模板实例。然而，我很难找到关于如何在吞咽任务中正确执行此操作的文档。下面的代码

在我的gulpfile.js中我正在做：

{{> article id = 'section-1'}}
{{> article id = 'section-2'}}

gulp.task('compileHandlebars', function () {
    var buildSettings = require('./build.json');
    var templateData = buildSettings,
    options = {
        batch : ['./src/assets/templates/'],
    }

    gulp.src('src/index.handlebars')
        .pipe(handlebars(templateData, options))
        .pipe(rename('index.html'))
        .pipe(gulp.dest('./dist'));
});

<section class="row article-module-4" id="{{id}}">
    <div class="col-md-5"> 
        {{#if title}}
            <header>
                <h2>{{title}}</h2>
            </header>
        {{/if}}
        <p>{{paragraph}}</p>
        </div>
    <figure class="col-md-7">
        <div class="figure-img" style="background-image: url('{{backgroundImageUrl}}');"></div>
        <figcaption>{{figCaption}}</figcaption>
    </figure>
</section>

在我的build.json中，我正在这样做：

{
    "section-1":[{
        "title": "",
        "paragraph": "",
        "backgroundImageUrl": "",
        "figCaption": ""
    }],
    "section-2":[{
        "title": ",
        "paragraph": "",
        "backgroundImageUrl": "",
        "figCaption": ""
    }]
}

最后，在我的文章.handlebar模板中，我做了以下工作：

{{> article id = 'section-1'}}
{{> article id = 'section-2'}}

gulp.task('compileHandlebars', function () {
    var buildSettings = require('./build.json');
    var templateData = buildSettings,
    options = {
        batch : ['./src/assets/templates/'],
    }

    gulp.src('src/index.handlebars')
        .pipe(handlebars(templateData, options))
        .pipe(rename('index.html'))
        .pipe(gulp.dest('./dist'));
});

<section class="row article-module-4" id="{{id}}">
    <div class="col-md-5"> 
        {{#if title}}
            <header>
                <h2>{{title}}</h2>
            </header>
        {{/if}}
        <p>{{paragraph}}</p>
        </div>
    <figure class="col-md-7">
        <div class="figure-img" style="background-image: url('{{backgroundImageUrl}}');"></div>
        <figcaption>{{figCaption}}</figcaption>
    </figure>
</section>

{{{#如果标题}
{{title}}
{{/if}
{{段落}

{{figCaption}

昨晚我问这个问题时有点漫不经心。。。今天早上我找到了我想做的事情的解决方案

索引把手

{{#each this}}
    {{> article}}
{{/each}}

文章模板

{{#article}}
    <section class="row article-module" id="{{id}}">
        <div class="col-md-5"> 
            {{#if title}}
                <header>
                    <h2>{{title}}</h2>
                </header>
            {{/if}}
            <p>{{paragraph}}</p>
            </div>
        <figure class="col-md-7">
            <div class="figure-img" style="background-image: url('{{backgroundImageUrl}}');"></div>
            <figcaption>{{figCaption}}</figcaption>
        </figure>
    </section>
{{/article}}

---

试着阅读并使用这些页面上的例子