CODEWITHSUNDEEP
assemble
Trident D'Gao
Trident D'Gao

Reputation: 19690

How can I generate pages in Assemble based on an different json files?

So I have a folder rules that that looks like this:

rule-001.json
rule-002.json
rule-003.json

Each *.json file is of a unified format:

{ name: 'AAA', descriptions: 'BBB' }

How can I generate a pages based on these files in Assemble?

Upvotes: 0

Views: 170

Answers (2)

davidwickman
davidwickman

Reputation: 338

Something like this should work for you. You just create separate Assemble tasks and call the main Assemble task with grunt.

https://gist.github.com/davidwickman/a0bf961e3099ea6b9c35

Upvotes: 0

James
James

Reputation: 11931

The short answer is that you need to load your JSON data in your Gruntfile and use it to replace the Assemble pages object.

I have written a blog post about generating pages from data, based on the Assemble Blog Theme sample. In both cases, the pages data was stored in a single JSON file.

In your case, you need to load the data from all of JSON files in your Gruntfile, and transform the data into the pages format. You can do this any number of ways, but one simple way would be to write a function in your Gruntfile that does this:

function loadDataPages (jsonFileSpec) {
    var path = require("path");
    var jsonPaths = grunt.file.expand(jsonFileSpec);
    var jsonPages = jsonPaths.map(function (jsonPath) {
        var jsonData = grunt.file.readJSON(jsonPath);
        var outputFileName = path.basename(jsonPath, path.extname(jsonPath)) + ".html";
        var jsonPage = {
            "data": jsonData,
            "content": "This is the body content for page " + outputFileName,
            "filename": outputFileName
        };
        return jsonPage;
    });
    return jsonPages;
}

and then you need to load this data object in your Grunt config and pass it to Assemble's pages option:

grunt.initConfig({
    assemble: {
        data: {
            options: {
                flatten: true,
                layout: "source/templates/layouts/custom-data-layout.hbs",
                pages: loadDataPages("source/custom-data/*.json")
            },
            files: {
                "output/custom-data-pages/": ["source/custom-data/index.hbs"]
            }
        }
    }
    // ...
});

Here is what the layouts might look like:

custom-data-layout.hbs

<!DOCTYPE html>
<html>
    <head>
        <title>Custom Data - {{name}}</title>
    </head>
    <body>
        <h1>Custom Data - {{name}}</h1>
        <p>{{ description }}</p>
        {{> body }}
    </body>
</html>

index.hbs

---
layout: false
title: Custom Data Index
---
<!DOCTYPE html>
<html>
<head>
    <title>{{title}}</title>
</head>
<body>
<h1>{{title}}</h1>
<ul>
    {{#each pages }}
        <li><a href="{{relativeLink}}">{{basename}}</a></li>
    {{/each}}
</ul>
</body>
</html>

Upvotes: 1

Related Questions