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