Question

我正在试图弄清楚如何在一个页面上呈现页面集合中的所有页面。我想在生成的index.html中将所有帖子放在彼此之后，就像在博客的首页上一样。

文件结构是

src/
  index.hbs
  posts/
    post-1.hbs
    post-2.hbs
    post-3.hbs

以下几乎是我正在寻找的。

<section>
{{#each pages}}
  <article>
    <header>
      <h2>{{data.title}}</h2>
    </header>
    {{page}}
  </article>
{{/each}}
</section>

我错过了什么？

Answer 1

请原谅快速而肮脏的答案，我想尽快在这里得到它。我会在一两天内把它清理干净。（2013年9月26日）

在完成这项工作之后，我最终制作了一个Handlebars帮助器，我可以在index.hbs模板中使用它。有了它，我最终得到index.hbs下面的Handlebars模板。

<强> index.hbs

---
title: Home
---
<p>I'm a dude. I live in Stockholm, and most of the time I work with <a href="http://www.gooengine.com/">Goo</a>.</p>

<section>
  {{#md-posts 'src/posts/*.*'}}
  <article>
    <h2>{{title}}</h2>
    {{#markdown}}
      {{{body}}}
    {{/markdown}}
  </article>
  {{/md-posts}}
</section>

文件夹结构

src/
  index.hbs
  posts/
    post-1.hbs
    post-2.hbs
    post-3.md // <--- Markdown with Handlebars

<强> Gruntfile.coffee

assemble:
  options:
    flatten: true
    layout: 'layouts/default.hbs'
    assets: 'public/assets'
    helpers: 'src/helpers/helper-*.js'
  root: // this is my target
    src: 'src/*.hbs' // <--- Only assemble files at source root level
    dest: 'public/'

<强>的src /助手/辅助-MD-posts.js

这个帮助器接受一个glob表达式，读取文件，提取YAML前端物质，编译主体源，最后将它们全部添加到Handlebars块上下文中。 助手有点误名，因为它实际上并没有编译Markdown ......所以欢迎命名建议。

var glob = require('glob');
var fs = require('fs');
var yamlFront = require('yaml-front-matter');

module.exports.register = function(Handlebars, options) {

  // Customize this helper
  Handlebars.registerHelper('md-posts', function(str, options) {

    var files = glob.sync(str);
    var out = '';
    var context = {};
    var data = null;
    var template = null;

    var _i;
    for(_i = 0; _i < files.length; _i++) {
      data = yamlFront.loadFront(fs.readFileSync(files[_i]), 'src');

      template = Handlebars.compile(data.src); // Compile the source

      context = data; // Copy front matter data to Handlebars context
      context.body = template(data); // render template

      out += options.fn(context);
    }

    return out;
  });

};

在此回购中查看全部内容：https://github.com/marcusstenbeck/marcusstenbeck.github.io/tree/source

如何在一个页面上呈现页面集合中的所有页面？

1 个答案: