简单实现Ghost Theme的置顶效果

在《手记3：实例教学之Ghost模板定制》里面我提到了在Theme中“指定文章置顶”的方法，但说得不细致。这里便重新写一个简单的指引。

下面的内容以affinity为例，这个Theme在这里：https://github.com/Showfom/Affinity

找到loop

在affinity/partials目录中的loop.hbs是一个关键文件，它通常如下结构（代码在这里）：

<div class="content-cards">
  {{#foreach posts}}
...
  {{/foreach}}
</div>

{{!-- Previous/next page links - displayed on every page --}}
{{pagination}}

我们将这一对{{#foreach}}标签中（含标签本身）的全部内容剪切出来，并放到一个新的的partials/content_post.hbs文件去。然后，将content_post.hbs复制一份，命名为content_featured.hbs。这样，在partials目录中就有了下面三个文件：

partials/loop.hbs
partials/content_post.hbs
partials/content_featured.hbs

在loop中标记置顶贴

现在loop.hbs中还有一对div标签：：

<div class="content-cards">
</div>

我们只需要把下面的代码直接复制到这一对标签之中，就好了：

<!-- 置顶风格 -->
{{^is "paged"}}
  {{! list all feated posts on top }}
  {{#is "index"}}
  {{#get "posts" filter="featured:true" limit="all" include="tags" as |featured|}}
  {{#foreach featured}}
      {{> content_featured}}
  {{/foreach}}
  {{/get}}
  {{/is}}

  {{#is "author"}}
  {{#get "posts" filter="featured:true+author:{{author.slug}}" limit="all" include="tags" as |featured|}}
  {{#foreach featured}}
      {{> content_featured}}
  {{/foreach}}
  {{/get}}
  {{/is}}
{{/is}}

<!-- 普通风格 -->
  {{#foreach posts}}
    {{#is "tag"}}
        {{> content_post}}
    {{else}}
        {{#unless featured}}
        {{> content_post}}
        {{/unless}}
    {{/is}}
  {{/foreach}}

设定置顶贴的效果

现在你只需要修改partials/content_featured.hbs中的样式，就可以定制你需要的置顶贴的效果了。以affinity为例，我在content_featured.hbs中的下面代码位置添加了一个featured类名：

      ...
      <header class="card-header featured">
        <div class="card-title">

然后，找到assets/css/screen.css文件，添加这个类的CSS样式：

.content-cards .featured {
  border: 1px solid red;
}

Ok. 你刷新一下博客效果，每个置顶贴的标题就加了个红框框啦。

更多的效果请自己搞哇。

确认置顶效果会影响的内容

你可以简单地通过下面的方法确认它会影响到的页面：

> cd affinity
> grep -H 'loop' *.hbs
index.hbs:{{!-- The tag below includes the post loop - partials/loop.hbs --}}
index.hbs:{{> "loop"}}
tag.hbs:{{!-- The tag below includes the post loop - partials/loop.hbs --}}
tag.hbs:{{> "loop"}}

这说明tag和index页会受到loop的影响——不过在前面文章里我已经说过，置顶效果是无法影响到tag页的。所以……另外，事实上这里可以列出有index.hbs、author.hbs和tag.hbs三种页面的，只是affinity这个theme没有author.hbs页罢了。

如果没有loop.hbs

如上所提示到的，如果loop.hbs没有单独地放在partials目录中，那么它可能直接用一对标签{{#foreach posts}}放在index、author或tag三个页面中了。找一找？

你可以直接参考本文来处理这个foreach。或者，我建议把这部分内容/代码取出来放在loop.hbs中，然后再照本文所述处理就好啦。

当然，这种情况下你得把loop.hbs作为子模板嵌入到index、author或tag页面中，这个请参考affinity就好了。在这里：https://github.com/Showfom/Affinity/blob/master/affinity/index.hbs