2013-09-23 2 views
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> 

무엇이 누락 되었습니까?

답변

3

신속하고 더러운 답변을 죄송합니다. 가능한 한 빨리 여기에 올리고 싶습니다. 나는 하루나 이틀 만에 그것을 정리할 것이다. (2013-09-26)

이 작업을 마친 후에 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

이 헬퍼는 글로브 식을 걸립니다, 파일을 읽는 YAML 서문을 추출, 몸 소스를 컴파일하고, 마지막으로 핸들 블록 컨텍스트에 모두 추가합니다. 도우미는 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

+1

헤이 @Marcus, 좋은 도우미에 일이에 대한 해결책을 찾는. 도우미의 이름은 '인라인'은 어떨까요? 그것이 기술적으로 당신이하는 일이기 때문입니다. 또한이 도우미와 함께 [handlebars-helpers] (https://github.com/assemble/handlebars-helpers) 라이브러리에 pull 요청을하고 싶다면 그것을 병합해도 좋을 것입니다. – jonschlinkert

+0

@jonschlinkert, _md-posts_에서 _inline_로 이름을 변경 하시겠습니까? 풀 요청을하게되어 기쁩니다. 또한 첫 번째 오픈 소스가 될 것입니다. 오늘은 좋은 날이에요. :) – marcusstenbeck

+0

"md-posts에서 인라인으로 이름 바꾸기"가 정확합니다. :-) 우리는 친절한 군중입니다. 첫 번째 기고에 대해 질문이 있으면 기꺼이 도와 드리겠습니다. – jonschlinkert

관련 문제