咕噜咕噜从一个数据文件中汇编多个文件

我正在尝试使用一个模板和一个数据文件组装多个文件

data.json

{
  "site": {
    "title": "A Blog",
    "author": "Jon Schlinkert"
  },
  "pages": [
    {
      "metadata": {
        "title": "Blog Post #1",
        "summary": "",
        "categories": [""],
        "layout": "post.hbs",
        "gists": ["5898072"]
      },
      "content": "This would get passed into the `body` tag, but it's not necessary if you only need to add a post from a gist."
    },
    {
      "metadata": {
        "title": "Blog Post #2",
        "summary": "",
        "categories": [""],
        "layout": "post.hbs",
        "gists": ["5898077", "5898078"]
      }
    },
    {
      "metadata": {
        "title": "Blog Post #3",
        "summary": "",
        "categories": [""],
        "layout": "post.hbs",
        "gists": ["5909393"]
      }
    }
  ]
}

模板.hbs

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>{{site.title}}</title>
    <link href="http://libs.github.io/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <meta name="author" content="{{site.author}}">
  </head>
  <body>
    {{#each gists}}
      {{gist this}}
    {{/each}}
    {{> body }}
    <script src="http://libs.github.io/bootstrap/css/bootstrap.min.js"></script>
  </body>
</html>

我想我只是没有正确设置我的咕噜声文件：

module.exports = function(grunt) {  
    // Project configuration.
    grunt.initConfig({
        assemble: {
            pages: {
                options: {
                    flatten: true,
                    data: './src/data/data.json'
                },
                files: [
                    // currently we need to trick grunt and assemble into putting the pages file into the correct
                    // place using this pattern
                    { dest: './dist/', src: './src/templates/template.hbs' }
                ]
            }
        },
        clean: {
            options: { force: true },
            all: ['./dist/*.html']
        }
    });
    grunt.loadNpmTasks('grunt-assemble');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.registerTask('default', ['clean', 'assemble']);
};

这个问题有诱人的线索，但我不知道如何适应：使用汇编，使用一个模板文件从多个数据文件生成 HTML 文件？

我相信该功能是在此问题之后创建的https://github.com/assemble/assemble/issues/184

我终于想通了：

Gruntfile.js
module.exports = function(grunt) {  
    // Project configuration.
    grunt.initConfig({
        data : grunt.file.readJSON('src/data/data.json'),
        assemble: {
            inline_pages: {
                options: {
                    layout: "./src/templates/post.hbs",
                    site: {
                        title: "A Blog",
                        author: "Jon Schlinkert"
                    },
                    pages: '<%= data.pages %>'
                },
                files: {
                  'dist/': ['!*']
                }
            }
        },
        clean: {
            options: { force: true },
            all: ['./dist/*.html']
        }
    });
    grunt.loadNpmTasks('grunt-assemble');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.registerTask('default', ['clean', 'assemble']);
};

data.json

{
    "pages": [
        {
            "filename": "post1",
            "data": {
                "title": "Blog Post #1",
                "gists": ["5898072"]
            },
            "content": "This would get passed into the `body` tag, but it's not necessary if you only need to add a post from a gist."
        },
        {
            "filename": "post2",
            "data": {
                "title": "Blog Post #2",
                "gists": ["5898077", "5898078"]
            }
        },
        {
            "filename": "post3",
            "data": {
                "title": "Blog Post #3",
                "gists": ["5909393"]
            }
        }
    ]
}

后.HBS

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>{{site.title}}</title>
    <link href="http://libs.github.io/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <meta name="author" content="{{site.author}}">
  </head>
  <body>
    The page title is {{{this.title}}}
    The gist number is {{{this.gists}}}
    This is the body:
    {{> body}}
    <script src="http://libs.github.io/bootstrap/css/bootstrap.min.js"></script>
  </body>
</html>

相关内容

最新更新

热门标签：