还记得我们在 开始构建我们的主题 这篇教程里，输出了 index.post 里的文章列表吗？
每个主题都有一个 index.hbs 文件，该文件展示我们博客所有的文章，通常作为网站的主页。在 作为一个程序员，我该如何设计我的博客 这篇教程里，我们也讲到过博客主页的风格及元素设计。这篇教程我们就做一个很简单的半屏式头版风格的主页吧，最终的样子如下：
页面组件拆分
在做任何一件事情的时候，我们不要一上来就开干，首先思考一下怎么去做会更简洁。对于 index.hbs ，我们可以根据自己最终要设计的样子把整个页面拆分成各个不同的组件。
最简单的方式，我们都知道一个页面通常会由 header、content 和 footer 三部分组成。content 部分就是我们文章列表了。所以我们可以先简单地把 index.hbs 拆分为 header.hbs、list-post.hbs 和 footer.hbs。为了保证博客的风格统一，通常我们的 header 和 footer 在各个页面都会表现一致，所以这样我们还可以在各个页面去重用它们。
partials
为了实现上面所说的组件拆分和重用，我们需要借助 Ghost 提供的 partials 助手。它的使用方式很简单，只需两步即可。
- 新建一个
partials目录，把我们要拆分的组件（比如header.hbs）放到它里面 - 使用的地方通过
{{> header}}即可引入
需要注意的是，如果在 partials 目录里继续分目录的话，使用相对路径引入即可。比如：partials/custom/social-icon.hbs，那么使用 {{> custom/social-icon}} 即可引入。
我们可以尝试一下，新建好这些文件，index.post 如下：
{{!< default}}
{{> header}}
{{> list-post}}
{{> footer}}
header.hbs
接着我们来实现一下 header.hbs，这里我们简单地输出博客的标题，介绍和背景图片吧，然后用样式让它变得美观一些。
主题的基础样式我们借助一下 bootstrap4，由于不需要用到它的组件，我们只需 css 就可以了。直接把它放在 src/css 目录里面，借助 gulp 构建，我们无需额外再引入。
bootstrap4 的 flex 布局支持使得我们在布局设计上十分方便。
<header style="background-image: url({{@site.cover_image}})"
class="site-header d-flex flex-column justify-content-center">
<div class="header-content d-flex flex-column align-items-center">
<a href="{{@site.url}}" class="site-title">{{@site.title}}</a>
<h5 class="site-description">{{@site.description}}</h5>
</div>
</header>
在样式的组织上面，讲一下我是怎么去设计的吧。
如上图，在 less 文件夹中，我会建立一个 partials 文件夹，里面会新建跟 partials 对应的样式文件。
components 里面对应的是一些更零散的小型组件样式设计。variable.less 里面存放的是一些变量，比如字体颜色等等，方便我们全局更改主题的风格。mixin.less 则是利用 less 的 mixin 特性做一些混合的样式。
在前期我们要尽可能地去规范我们主题资源的设计，这对后期的扩展和维护来说都是很重要的。
list-post.hbs
index 上下文中提供给了我们一个 posts 数组和一个分页的对象。前面我们通过 {{#foreach}} 遍历输出了博客的所有文章标题。在 index 的上下文中，我们是可以拿到 post 里面所有的信息的，可以根据需要进行取舍。
最终的文章列表如下：
需要注意的几个地方：
-
一篇文章可能有多个作者，Ghost 提供了
primary_author可以替代authors.[0]这种写法；标签也是一样，使用primary_tag。 -
使用
date输出文章的发布时间，可以格式化成自己想要的格式。具体参考官网 -
字体文件用的是 Font Awesome，由于字体资源基本不会怎么改变，我是直接放在
assets文件夹中。
文章分页我们可以通过 pagination 助手来实现：{{pagination}}。默认的分页器可能不是我们想要的，可以在 partials 里面新建一个 pagination.hbs 来覆盖默认的效果。
该上下文中有一些特殊的助手，我们要注意一下：
{{page_url}}：接收prev、next或页码作为参数，输出第几页的数据{{page}}：输出当前的页码{{pages}}：输出总页数
为了方便看到效果，我们可以把 package.json 里的 posts_per_page数值设置小一点，或者多建几篇文章。
footer.hbs
在很多主题中，我们会发现 footer 里面通常会有最近文章、推荐文章、标签云等信息。在后续的教程中，我们会分别介绍这些是怎么实现的，目前的话就写个版权信息吧。
到这里，我们完成了一个博客主题的主页设计，虽然承载的内容不是很多，但也是一个可以拿的出手的设计。
示例代码：https://github.com/KINGMJ/maple-test/tree/features/tutorials-8