3

我试图弄清楚如何在单个页面上呈现页面集合中的所有页面。我希望我的所有帖子在生成的 中一个接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>

我错过了什么？

4

1 回答 1

3

原谅快速而肮脏的答案，我想尽快把它弄到这里。我会在一两天内把它清理干净。(2013-09-26)

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

索引.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/helpers/helper-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;
  });

};

在这个 repo 中查看所有内容：https ://github.com/marcusstenbeck/marcusstenbeck.github.io/tree/source

于 2013-09-26T08:25:02.037 回答