4. 开始构建我们的主题
Ghost 博客之所以简单，是因为它将后台的一切实现都屏蔽掉。对于主题制作者来说，我们只需关注在前端的 UI 设计和效果实现上就可以了。
在前面的教程中，我们把主题必要的文件都建好了，如下图所示：
我们前面用gscan检测出主题有以下错误和警告信息。首先我们修复一下这些错误和警告信息吧。
default.hbs
Ghost 主题推荐用一个 default.hbs 来作为一个默认的布局模板，它提供了每个页面都需要的<html>，<head>和 <body>等 HTML 标签以及每个页面都必需的{{ghost_head}}和{{ghost_foot}}。
我们首先新建一个default.hbs来修复主题的警告信息吧。
<!DOCTYPE html>
<html lang="{{@site.lang}}">
<head>
{{!-- Document Settings --}}
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
{{!-- Base Meta --}}
<title>{{meta_title}}</title>
<meta name="HandheldFriendly" content="True" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{{!-- Styles'n'Scripts --}}
<link rel="stylesheet" type="text/css" href="{{asset "css/main.css"}}" />
{{!-- This tag outputs SEO meta+structured data and other important settings --}}
{{ghost_head}}
</head>
<body class="{{body_class}}">
<div class="site-wrapper">
{{!-- All the main content gets inserted here, index.hbs, post.hbs, etc --}}
{{{body}}}
</div>
{{ghost_foot}}
</body>
</html>
可以看到，这里面包含了一个 HTML 页面的基本元素，然后我们用到了一些 Helpers。介绍几个比较重要的 Helpers 吧。
asset
asset 属于 Utility Helpers 里面一个比较重要的 Helper。它主要的作用是方便我们管理主题的各种资源，比如 css、js 和图片等资源。它确保了资源的相对路径始终正确，无论 Ghost 安装在哪个目录。
使用它的话，我们需要在主题的根目录中新建一个assets文件夹，然后指定资源的路径都是相对于它的路径。
// Styles
<link rel="stylesheet" type="text/css" href="{{asset 'css/style.css'}}" />
// Scripts
<script type="text/javascript" src="{{asset 'js/index.js'}}"></script>
// Images
<img src="{{asset 'images/my-image.jpg'}}" />
{{{body}}}
{{{body}}}实现的是一个插槽的功能，当其他页面的首行使用了{{!< default}}后，会把该页面的代码插入到{{{body}}}里面。
ghost_head/foot
这两个 Helpers 是每个页面都必须去指定的，它主要提供了一些实验性的功能，比如在后台可以注入一些自定义的代码。所以通过这个也看出来了default.hbs的好处，只需要在该文件指定就可以了，其他的页面只需要引入default.hbs模板。
修复样式错误
在 default.hbs 中我们引入了一个 main.css，当然我们还没有该文件。
<link rel="stylesheet" type="text/css" href="{{asset "css/main.css"}}" />
它的路径是 assets/css/main.css，所以我们创建好文件夹及该文件
gscan 的错误信息中提示我们没有实现那些样式，那么我们先搞定它。
/* gallery and bookmark */
.kg-width-wide{
}
.kg-width-full{
}
.kg-gallery-container{
}
.kg-gallery-row {
}
.kg-gallery-image{
}
.kg-bookmark-card {
}
.kg-bookmark-container{
}
.kg-bookmark-content{
}
.kg-bookmark-title{
}
.kg-bookmark-description{
}
.kg-bookmark-metadata {
}
.kg-bookmark-icon{
}
.kg-bookmark-author{
}
.kg-bookmark-publisher{
}
.kg-bookmark-thumbnail{
}
虽然是空的样式，但我们再次用 gscan 去检测我们的主题，发现已经没有任何错误了。
index.hbs
index.hbs 作为文章列表页面，通常是博客的主页面，我们可以通过 foreach 助手函数 输出文章列表
{{!< default}}
{{#foreach posts}}
<p>{{title}}</p>
{{/foreach}}
保存代码，现在去访问 http://localhost:2368/ , 可以看到页面上显示出了文章的标题
post.hbs
post.hbs 作为文章详情页面，通常显示文章的内容，我们可以通过 post 块级表达式来输出文章的内容
{{!< default}}
{{#post}}
<h1>{{title}}</h1>
<p>{{content}}</p>
{{/post}}
文章详情页我们也写好了，但是这时候我们不知道如何访问文章详情页面，所以我们需要将 index.hbs改变一下，增加一个可以跳转到文章详情页的链接。这里我们使用 Functional Helpers 里面的 link 来实现一个链接
{{!< default}}
{{#foreach posts}}
<p>
{{#link href=url}} {{title}} {{/link}}
</p>
{{/foreach}}
点击链接可以跳转到文章详情页了，显示的就是 post.hbs 里面输出的内容
到这里，我们有文章列表了，也有文章详情了，一个基本的骨架已经出来了。
我们再加上一些样式什么的，为我们的博客披上一件华丽的衣裳，包装一下，就完美了。这也是我们接下来的工作，给这个骨架添砖加瓦，不断地优化。
示例代码：https://github.com/KINGMJ/maple-test/tree/features/tutorials-4
