Используйте json в качестве источника данных для Assemble.io

Можно ли скомпилировать файлы json в html, используя шаблоны в Assemble.io. И если это возможно, как я могу настроить свой gruntfile для этого?

Моя структура папок:

  • Data
    • productlist1.json
    • productlist2.json
    • productlist3.json
    • productdetail1.json
    • productdetail2.json
  • Templates
    • product-listing.hbs
    • продукт-detail.hbs
  • Layouts
    • main.hbs
  • Partials
    • ...

HTML-результат

Я хочу создать следующие файлы html

  • список_продуктов1.html
  • список_продуктов2.html
  • список_продуктов3.html
  • productdetail1.html
  • productdetail2.html

Пример файла productlist1.json

    {
      "template": "product-listing.json",
      "products": [
        {
          "name": "product1",
          "price": "€ 2,40"
        },
        {
          "name": "product2",
          "price: "€ 1,40"
        }
      ]
    }

person user3483982    schedule 09.09.2014    source источник


Ответы (1)


Только что нашел решение благодаря Использование Assemble , создавать файлы HTML из нескольких файлов данных с использованием одного файла шаблона?.

Немного изменен пример для загрузки динамических шаблонов:

'use strict';
var _ = require('lodash');
var path = require('path');

module.exports = function(grunt) {

    // expand the data files and loop over each filepath
    var pages = _.flatten(_.map(grunt.file.expand('./src/data/*.json'), function(filepath) {

        // read in the data file
        var data = grunt.file.readJSON(filepath),
            fileTemplate = grunt.file.read("./src/templates/" + data.template);

        // create a 'page' object to add to the 'pages' collection
        return {
            // the filename will determine how the page is named later
            filename: path.basename(filepath, path.extname(filepath)),
            // the data from the json file
            data: data,
            // add the recipe template as the page content
            content: fileTemplate
        };
    }));

    // Project configuration.
    grunt.initConfig({

        config: {
            src: 'src',
            dist: 'dist'
        },

        assemble: {
            pages: {
                options: {
                    flatten: true,
                    assets: '<%= config.dist %>/assets',
                    layout: '<%= config.src %>/templates/layouts/default.hbs',
                    partials: '<%= config.src %>/templates/partials/**/*.hbs',

                    // add the pages array from above to the pages collection on the assemble options
                    pages: pages
                },
                files: [
                    // currently we need to trick grunt and assemble into putting the pages file into the correct
                    // place using this pattern
                    { dest: './dist/', src: '!*' }
                ]
            }
        }
    });

    grunt.loadNpmTasks('assemble');

    grunt.registerTask('default', [
        'assemble'
    ]);

};
person user3483982    schedule 09.09.2014