Question

在我的 index.handlebars 文件中，我这样做：

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

正如您所看到的，我将唯一的ID传递到每个文章模板实例中，因此可以单独定位它们。我之所以这样做，是因为我希望 gulp-compile-handlebars 使用我在 build.json 文件中指定的唯一内容填充每个文章模板实例。但是，我无法找到有关如何在我的gulp任务中正确执行此操作的文档。代码如下......

在我的 gulpfile.js 中，我这样做：

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'));
});

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

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

最后在我的 article.handlebars 模板中我这样做：

<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>

Answer 1

昨晚，当我问这个时，我有点散乱......今天早上我找到了解决方案，我想做什么......

<强> index.handlebars

{{#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}}

<强> build.json

[
    {
        "article": [
            {
                "id": "section-1",
                "title": "Section 1",
                "paragraph": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra aliquet justo posuere rhoncus. Donec tempus eros sed rhoncus fermentum. Mauris nec congue quam. Morbi ullamcorper augue sed quam lacinia interdum. Duis porttitor iaculis posuere. Donec quis facilisis metus, id posuere ex. Vestibulum tincidunt enim a vehicula ultrices. Vestibulum rhoncus tincidunt augue ut ultrices. Aliquam quis sapien et erat varius fringilla. Nullam finibus pellentesque tortor eget tempus. Donec ultricies quam quis mi tincidunt imperdiet. Pellentesque porta euismod ipsum, ut finibus elit malesuada nec. Vivamus vehicula viverra arcu eu feugiat. Integer dapibus est ac gravida blandit. Morbi malesuada, sem non tincidunt iaculis, enim nisi congue tellus, ac pellentesque dolor neque in lacus. Donec non sem vitae felis accumsan dapibus tristique ut justo.",
                "backgroundImageUrl": "assets/images/ocean2.jpg",
                "figCaption": "news.com.au"
            }
        ]
    },
    {
        "article": [
            {
                "id": "section-2",
                "title": "Section 2",
                "paragraph": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra aliquet justo posuere rhoncus. Donec tempus eros sed rhoncus fermentum. Mauris nec congue quam. Morbi ullamcorper augue sed quam lacinia interdum. Duis porttitor iaculis posuere. Donec quis facilisis metus, id posuere ex. Vestibulum tincidunt enim a vehicula ultrices. Vestibulum rhoncus tincidunt augue ut ultrices. Aliquam quis sapien et erat varius fringilla. Nullam finibus pellentesque tortor eget tempus. Donec ultricies quam quis mi tincidunt imperdiet. Pellentesque porta euismod ipsum, ut finibus elit malesuada nec. Vivamus vehicula viverra arcu eu feugiat. Integer dapibus est ac gravida blandit. Morbi malesuada, sem non tincidunt iaculis, enim nisi congue tellus, ac pellentesque dolor neque in lacus. Donec non sem vitae felis accumsan dapibus tristique ut justo.",
                "backgroundImageUrl": "assets/images/ocean3.jpg",
                "figCaption": "news.com.au"
            }
        ]
    }
]

使用gulp-compile-handlebars

1 个答案: