最近工作中的一点空,往博客里添加了分类的页面。效果如下:

分类页面实际上就是把标签对应的博客汇总,点击后跳转到标签对应的博客列表页去。下面是具体的添加步骤。

添加静态页面

添加静态页面,前面的配置博客也提到过。如:Ghost配置5——添加归档页面

添加首页导航

在Ghost后台的Design中,将对应链接填入,并点击添加。

添加分类的模板文件

添加page-pages.hbs文件,放在ghost/content/themes/casper目录下,文件内容如下:

{{!< default}}

<header class="site-header outer">
    <div class="inner">
        {{> "site-nav"}}
    </div>
</header>


<main id="site-main" class="site-main outer">
    <div class="inner">
        <div class="tags"></div>
    </div>
</main>

这里仅仅定义了一个框架html,所有的内容使用injection方式来修改dom即可。

添加CSS

在Ghost后台,分类对应的页面编辑界面中,点击Code Injection设置。在Post Header中加入以下样式代码。

<style type="text/css">


.tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 20px;
}
    
.tag {
  border-radius: 4px;
  border: solid 1px #666;
  margin: 12px;
  width: 20%;
  height: 100px;
  background-size: cover;
}

.tag:hover {
  border: solid 1px #AAA;
  cursor: pointer;
}

.tag-name {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  padding: 4px;
  text-align: center;
  background-color: #333;
  opacity: 0.6;
  color: #EFEFEF;
}

@media (max-width: 650px) {
  .tag {
    width: 100%;
    height: 180px;
  }
}
</style>

添加Javascript处理

在Code Injection的Post Footer中,加入以下处理代码:

<script type = "text/javascript">
/**
 * 调用tag API,取得所有标签数据
 */
jQuery(document).ready(function() {

  $.get(ghost.url.api('tags', {
    limit: 'all',
    include: 'count.posts'
  })).done(function(data) {
    var tags = data.tags;
    for (var i = 0; i < tags.length; i++) {
      tag = tags[i];
      console.log(tag);
      var url = 'http://www.a-lightyear.com/tag/' + tag.slug;
      var tagHtml = 
        "<div class='tag' style='background-image: url(" + tag.feature_image + ")' onclick='window.location.href=\"" + url + "\"'>" +
          "<div class='tag-name'>" + tag.name + "·" + tag.count.posts + "篇</div>" +
        "</div>";
      $(tagHtml).appendTo('.tags');
    }
  })
});
</script>

重启Ghost

以上简单4步完成后,重启Ghost即可查看效果。