当我们浏览文章的详情页时，我们是位于post上下文中，它对应的默认模板就是post.hbs。前面我们讲过，post.hbs是主题必需的一个文件。在这篇教程中，我们将开始构建一个属于自己的文章详情页。

页面元素

在准备构建文章详情页时，首先我们得知道这个页面一般由哪些元素或组件构成，然后我们可以根据自己的需求进行取舍。关于这方面，我们可以去参考一下大部分的 cms 网站都是如何设计的。我一般的话都会参考两个站点，一个是 Ghost 主题市场，专门针对 Ghost 设计的主题，有免费的也有付费的，我们可以参考一下他们的设计思路；另一个是 Theme Forest，一个 cms 的主题市场，覆盖面更广一些，包含 Ghost 主题。

下面我们就来看一下文章详情页的构成吧。

文章内容

首先就是文章内容了，它是主体。通常一篇最简单的文章，包含一个标题和文章详情就可以了。比如前面我们在post.hbs写的如下代码：

{{!< default}}
{{#post}}
  <h1>{{title}}</h1>
  <p>{{content}}</p>
{{/post}}

我们访问详情页，看到的是下图的样子。

对于这个简陋的文章详情来说，我们最重要的就是去设计排版了。大家要知道，对于内容站来说，内容是最重要的，其他的一切都是点缀，锦上添花而已。文章内容最重要的就是排版设计了，怎样让读者看得舒服是最重要的。这里面包含了文字的字体、大小、颜色、间距等等的设计。

文章排版其实也是一个很专业的领域，想要做得很美观并不容易。大家可以看一下国内的技术 cms 站点，比如 csdn、博客园等一些有年代的网站排版做得都不是很美观。还有些站点压根没有考虑到技术博主，像代码都没有用到pre、code标签。我们可以多参考一下各种内容站点，最好是支持 Markdown 格式的，比如：简书、infoq、知乎、segmentfault 等等。

在 ghost0.x 的版本中，它的文章是完全用 Markdown 来书写的，可能考虑到有一些用户没有接触过，后来也开始支持富媒体了。但是作为一个文字编辑或者技术作者来说，我还是推荐大家用 Markdown 来书写，因为一方面节约时间，另一方面文章可以快速发布到多个平台而不用去考虑重新排版。

不管是富媒体也好，Markdown 也好，在样式设计上都是一样的。无非就是 <h1> ~ <h6>、<p>、<img>、<pre>等标签的样式设计。考虑维护性，我们可以给文章内容取一个专门的排版类名，然后把内容排版单独放到一个 css 文件中，如下：

{{!< default}}
{{#post}}
  <h1>{{title}}</h1>
  <article class="md-preview">
    {{content}}
  </article>
{{/post}}

然后所有的排版样式都是在 md-preview 这个类的作用域下。如果不想自己针对一个个标签去调整，可以在网上搜索一下 Markdown css themes，可以找到很多用户自己分享的排版样式。调整好样式后，我们看到的文章详情是这样的，是不是有点样子了。

作者介绍

作者介绍区域一般位于文章的结尾。读者阅读完文章可能会对该作者产生兴趣，想进一步了解。此区域刚好可以提供一个窗口。所以，一般都会包含一个作者的简介、主页、外链等信息。下面给出一些参考：

TOC

前面的教程里面也讲到过 TOC，它是 Table of Contents 的缩写，中文翻译为文章目录。有些 markdown 的编辑器做了对 TOC 的支持，输入[TOC]会自动生成目录。如果没有的话，我们也可以自己实现，主要是通过检索 html 的 h 标签来生成的。

对于技术类教程来说，TOC 还是很重要的。读者可以根据 TOC 迅速抓住文章的脉络，也可以快速找到自己想要的内容。后面我们会具体介绍怎么用代码去实现一篇文章的 TOC。

社会化分享和评论

社会化分享一般起到一个引流的作用，可以把文章分享到各个社区。评论可以让阅读文章的读者与作者或其他的读者针对这篇文章进行沟通。

这块的话，我们一般都是使用第三方来实现，比如畅言，多说等等。但是比较尴尬的一点是，国内的平台找不到变现的方式，都陆陆续续的关闭了；国外的都不太稳定。

Ghost 在持续集成这块花了不少功夫，现在已经集成了很多第三方工具进来了，比如评论插件有以下这些：

国内可以用的也就 Disqus 了吧。我自己的博客，因为不太想折腾都关掉了这个功能。

上一篇、下一篇和推荐阅读

上一篇和下一篇之前也介绍过，这里就不再赘述了。推荐阅读是后面版本更新新加的内容，可以根据文章的特点做一个推荐，比如推荐标签相同的文章等等。

post 上下文

俗话说，工欲善其事必先利其器。前面我们介绍的文章详情页元素，我们想要实现这些内容，就要对 post 上下文和 ghost 提供的一些 helper 很了解。

之前在 index.hbs 中，我们是通过 foreach 助手来输出多篇文章，其实已经介绍过 post 上下文了。这里再提一下该上下文中一些需要注意的内容。

首先，我们最好是使用 {{#post}}{{/post}}来确定好该上下文，所有的代码都写在它们中间。虽然说使用{{post.title}}也可以输出一些属性，但最好不要这样做。因为post这个模型不是一个简单的数据库模型，而是基于 API 的业务模型，里面会包含一些特殊的属性。

比如{{url}}，我们之前讲过，{{#post}} {{url}} {{/post}} 与 {{post.url}}输出的结果是不一样的。还有{{comment_id}}，我们可以用它作为 Disqus 的标识符。

后记

好了，通过这篇教程我们了解到了一个博客的详情页通常有哪些内容。接下来的教程中，我们将分篇来实现这篇教程中提到的各个组件。

示例代码：https://github.com/KINGMJ/maple-test/tree/features/tutorials-10