3

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.

Paul Sham
  • 3,185
  • 2
  • 24
  • 31

1 Answers1

2

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.

doowb
  • 3,372
  • 1
  • 17
  • 25
  • Thanks @doowb. I was able to check this at work and everything seems to be working great. – Paul Sham May 26 '14 at 14:30
  • Using this method, would I be able to read in multiple JSON files to the `data` variable? I am trying to use one JSON for site-wide data and one for a recipe. I tried wrap two `grunt.file.readJSON()` calls in an object, but that didn't work. – Paul Sham May 27 '14 at 19:31
  • I figured out how to load multiple files into `data` variable through this answer. http://stackoverflow.com/a/23030021/664898 – Paul Sham May 27 '14 at 20:14
  • If you do `data: ['templates/data/*.json']` in the assemble options, all the data files will be loaded in and available based on the file's name. e.g. `{{recipe1.something}}` – doowb May 28 '14 at 01:53
  • Just looking back at this question for another project, would it be possible to have each page set its own dest? I can write this in a new question if you prefer. @doowb – Paul Sham Sep 24 '14 at 18:22
  • I figured it out. I included a path in the JSON and prepended it to the page's filename. I also set flatten to false. – Paul Sham Sep 24 '14 at 20:09