使用json作为Assemble.io的数据源

用户名

是否可以使用Assemble.io中的模板将json文件编译为html。如果可能的话,我该如何设置我的gruntfile?

我的文件夹结构:

  • 数据
    • productlist1.json
    • productlist2.json
    • productlist3.json
    • productdetail1.json
    • productdetail2.json
  • 范本
    • 产品清单
    • 产品详细信息
  • 版面
    • main.hbs
  • 部分
    • ...

HTML结果

我想生成以下html文件

  • productlist1.html
  • productlist2.html
  • productlist3.html
  • productdetail1.html
  • productdetail2.html

示例productlist1.json文件

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

刚刚找到了使用Using 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'
    ]);

};

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用数据源进行Wildfly配置

来自分类Dev

关闭数据源并使用游标

来自分类Dev

如何使用骆驼创建数据源?

来自分类Dev

使用Grails插件数据源

来自分类Dev

如何告诉Grails插件使用辅助数据源(不是默认数据源)?

来自分类Dev

字典作为ComboBox的数据源

来自分类Dev

使用Spring Cloud设置数据源

来自分类Dev

如何使用DataSet作为数据源过滤DataGridView

来自分类Dev

使用存储桶作为droplink / tree字段的数据源

来自分类Dev

使用字典作为组合框数据源

来自分类Dev

直接使用领域对象(即作为CollectionView数据源)

来自分类Dev

使用Observable作为数据源的角度拖放

来自分类Dev

使用在线.txt文件作为数据源

来自分类Dev

使用flask变量作为高图的数据源

来自分类Dev

CSV作为JavaScript的数据源

来自分类Dev

使用json作为Assemble.io的数据源

来自分类Dev

使用静态类作为数据源

来自分类Dev

使用Node.js作为图表的数据源

来自分类Dev

Emberjs:使用Websocket后端作为数据源

来自分类Dev

直接使用领域对象(即作为CollectionView数据源)

来自分类Dev

使用HTML类作为Highcharts表数据源

来自分类Dev

使用sframe作为数据源绘制箱线图

来自分类Dev

领域作为Tableview的数据源-如何在数据源中存储不同的对象

来自分类Dev

使用GeoDataFrame作为osgeo.ogr数据源

来自分类Dev

使用 unbouded 数据源的 fixedWindow 作为 parDo 的侧输入?

来自分类Dev

如何使用 MYSQL 作为数据源运行 PredictionIo 引擎?

来自分类Dev

使用 LINQ 查询外部数据源

来自分类Dev

使用多选剑道过滤数据源

来自分类Dev

数据源使用什么版本的mysql?