Search code examples
gruntjsassemble

Using Assemble, generate HTML files from multiple data files using one template file?

I am trying to use Assemble to generate multiple static files from multiple data files using one template.

In more detail, I have 12 JSON files representing the data for cooking recipes, and one Handlebars file, recipe.hbs, with a layout file of default.hbs.

I want to output an HTML file based on each of those JSON files.

File Structure:

/templates
    /data
        recipe1.json
        recipe2.json, etc.
    /layouts
        default.hbs
    /pages
        recipe.hbs

Output:

/output
    recipe1.html (based on recipe1.json)
    recipe2.html (based on recipe2.json), etc.

It sounds like this should be possible using collections, but I can't seem to wrap my head around how to set up the Grunt file.

Thanks.

Solution

  • I created this gist: https://gist.github.com/doowb/ca6f3321a05f6ac727e5 that has the code in the Gruntfile.js file for dynamically creating a pages list with the combined recipe template and the recipe data.

    These lines are the key to creating the pages array. They could be moved into another file and required in to make the grunt file cleaner.

    This line adds the pages array to the pages options on assemble so they'll be built.

    If you don't have any other pages to be built, use this line to set the dest without pulling in any other pages.

    Hope this helps.