如何在汇编中创建博客帖子列表?

时间:2015-05-20 12:08:27

标签: node.js gruntjs handlebars.js assemble

我有咕噜声和汇编设置,你可以在帖子文件夹中添加帖子,每个帖子都被汇编并添加到/ dist / news /我可以访问新闻项目列表(希望?)目前我可以去我的网站和访问/新闻/我得到一个奇怪的目录,我可以访问帖子,但这没有显示任何样式,我不知道它来自哪里:

enter image description here

目录在我的文件结构中有这个:

/dist
 /news/
   first-post.html
   post-two.html

当我点击上一页上的链接时,我可以看到此网址中的帖子:http://localhost:9000/news/first-post.html

我想要做的是尝试在我的模板页面上复制它,但我找不到页面来设置样式或从中获取代码。这是我到目前为止的设置:

Gruntfile.js

assemble: {
      options: {
        collections: [
          {
            name: 'navMain',
            sortby: 'number',
            sortorder: 'ascending' 
          },
          {
            name: 'posts',
            sortby: 'posted',
            sortorder: 'descending'
          },
          {
            name: 'footerNav',
            sortby: 'name',
            sortorder: 'ascending'
          }
        ]

      },
      pages: {
        options: {
          flatten: true,
          assets: '<%= config.dist %>/assets',
          layout: '<%= config.src %>/templates/layouts/default.hbs',
          data: '<%= config.src %>/data/*.{json,yml}',
          partials: '<%= config.src %>/templates/partials/*.hbs'
        },
        files: {
          '<%= config.dist %>/': ['<%= config.src %>/templates/pages/*.hbs']
        }
      },
      misc: {
        files: {
          '<%= config.dist %>/': ['<%= config.src %>/templates/misc/*.hbs']
        }
      },
      blog: {
        options: {
          flatten: true,
          assets: '<%= config.dist %>/assets',
          layout: '<%= config.src %>/templates/layouts/default.hbs',
          data: '<%= config.src %>/data/*.{json,yml}',
          partials: '<%= config.src %>/templates/partials/*.hbs',
          collections: [{name: 'posts', inflection: 'post'}]
        },
        files: {
            '<%= config.dist %>/news/': ['<%= config.src %>/templates/posts/*.hbs']
        }
      },
    }

然后在里面的每个帖子中:

/src/templates/posts
  first-post.md

我在里面用YAML获取数据:

---
title: this post
posts:
 - news
posted: 2014-10-01
author: James
---
{{title}}

这一切都很好,但我真的需要这个更好地工作,我需要能够在各个地方的列表中显示这些,而不仅限于我添加的上述图片。

有人可以对此有所了解吗?

1 个答案:

答案 0 :(得分:0)

看起来您的Web服务器正在根据文件结构为/news/提供默认索引页。您帖子的自定义索引列表可能如下所示:

<h1>News Index</h1>
<div>
    {{#each posts}}
        {{#is post "news"}}
            {{#withSort pages "data.posted" dir="desc"}}
                <div>
                    <h2><a href="/{{relativeLink}}">{{data.title}}</a></h2>
                    <p>By {{data.author}} on {{data.posted}}</p>
                    <p><a href="/{{relativeLink}}">more...</a></p>
                </div>
            {{/withSort}}
        {{/is}}
    {{/each}}
</div>

我已经写过关于building a blog with Assemble的文章,可能会对您有所帮助。