Question

所以我有一个文件夹rules，如下所示：

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

每个* .json文件都是统一格式：

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

如何在Assemble中基于这些文件生成页面？

Answer 1

简短的回答是您需要在Gruntfile中加载JSON数据并使用它来替换Assemble pages对象。

我根据blog post about generating pages from data撰写了Assemble Blog Theme sample。在这两种情况下，页面数据都存储在单个JSON文件中。

在您的情况下，您需要从Gruntfile中的所有JSON文件加载数据，并将数据转换为pages格式。您可以通过多种方式执行此操作，但一种简单的方法是在Gruntfile中编写一个执行此操作的函数：

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

然后您需要在Grunt配置中加载此数据对象并将其传递给Assemble＆＃39; pages选项：

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"]
            }
        }
    }
    // ...
});

以下是布局的外观：

自定义数据-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>

Answer 2

这样的事情对你有用。您只需创建单独的Assemble任务，并使用grunt调用主Assemble任务。

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

如何根据不同的json文件在Assemble中生成页面？

2 个答案: