3

ページ コレクション内のすべてのページを 1 つのページにレンダリングする方法を見つけようとしています。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

迅速で汚い答えを許してください。できるだけ早くここに上げたかったのです。1日か2日できれいになります。(2013-09-26)

これに取り組んだ後、index.hbsテンプレートで使用できる Handlebars ヘルパーを作成しました。これで、以下の のハンドルバー テンプレートができあがりましたindex.hbs。

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/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;
  });

};

このリポジトリですべてを参照してください: https://github.com/marcusstenbeck/marcusstenbeck.github.io/tree/source

于 2013-09-26T08:25:02.037 に答える