写在前面

把博客迁移到阿里云以后,访问速度快了许多,备案也在走流程,趁着这个空档,给博客搭建一个 Tags 归档页。

现在这个阶段的我,喜欢简洁事物,所以也想让博客尽可能的保持简洁,博客的默认主题是自己写的 nanboone,有很多不重要的 feature 都没有加到博客里,想专注写内容,保证博客的简单明了。Tags 是个例外,本身 Ghost 默认的主题是没有提供 Tags 归档功能的,增加 Tags 也为了方便查找,算是 UED 的一部分吧。

开始

  • 基于Ghost 2.x 版本

网上很多教程都需要后台开启 Public API 功能(Settings –> Labs –> Beta features),然后调用 API 来生成归档页面的内容。可是我在我的后台没有找到这个开关,不知道是版本问题还是我的使用姿势不正确,所以我用了其它的方式来实现。

创建页面

进入后台,选择 MANAGE --> Pages --> New Page 创建一个页面,在打开的页面中,填写 Page Title,确认 Page URL 填写的内容是:tags。填写完毕后,点击 Publish 发布页面。

63

创建模板文件

在主题目录中,创建一个新文件并将其命名为 page-tags.hbs,然后把下面的代码写入文件。

  • 需要重新启动 Ghost 服务器,新页面才能生效。
  • 下面的代码可根据自己的需要进行修改。
{{!< default}}{{#post}}<main id="site-main" class="site-main outer" role="main">    <div class="inner">        <div class="o-tag-grid">            <div class="row">                <div class="col-6">                    <div class="o-tags-title">                        <h2>{{title}}</h2>                    </div>                </div>            </div>        </div>        {{#get 'tags' limit='all' include='count.posts' order='count.posts desc'}}        <div class="o-tag-grid">            <div class="row">                {{#foreach tags}}                <div class="col-2">                    <div class="o-tag-card">                        <a href="{{url}}"                            style="background-image: url({{feature_image}})">                            <h2 class="o-tag-card-title">                                <span class="o-tag-card-title-name">                                    {{ name }}                                    <span class="o-tag-font-size-tiny">                                        ({{ count.posts }})                                    </span>                                </span>                            </h2>                        </a>                    </div>                </div>                {{/foreach}}            </div>        </div>        {{/get}}    </div></main>{{/post}}

在上面的代码里,#get 'tags' limit='all' include='count.posts' order='count.posts desc' 用于获取所有的 tags。include 属性用于返回该 tag 所有的文章数量,order 属性用于排序,foreach 用于循环遍历输出标记,并呈现最终的列表。

Code Injection 添加样式

返回 Ghost 博客后台,编辑 00×1 步骤添加的 Tags Page,右侧选择 设置 --> Code Injection,在 Page Header 或 Page Footer 中注入下面的样式并保存:

<style type="text/css">.o-tag-grid{    margin: 0 auto;    max-width: 1200px;}.row:before,.row:after {    content:"";    display: table ;    clear:both;}[class*='col-'] {    float: left;    min-height: 1px;    width: 16.66%;    padding-left: 12px;    padding-right: 12px;}.col-1{ width: 16.66%; }.col-2{ width: 33.33%; }.col-3{ width: 50%;    }.col-4{ width: 66.66%; }.col-5{ width: 83.33%; }.col-6{ width: 100%;   }.outline, .outline *{    outline: 1px solid #F6A1A1;}[class*='col-'] > p { background-color: #FFC2C2; padding: 0; margin: 0; text-align: center; color: white;} .o-tags-title {    padding: 32px;    margin-bottom: 32px;    background-color: #f4f6f8;    margin-top: 55px;}.o-tags-title h2 {    margin:0;}.o-tag-card {    position: relative;    margin-bottom: 32px;    background-color: #f4f6f8;}.o-tag-card a {    display: block;    background-position: 50%;    background-repeat: no-repeat;    background-size: cover;    -webkit-transition: all .5s ease-in-out;    transition: all .5s ease-in-out;}.o-tag-card a:hover {	text-decoration: none;}.o-tag-card a::before {	position: absolute;    top: 0;    bottom: 0;    left: 0;    right: 0;    content: "";    -webkit-transition: .5s;    transition: .5s;    background: -webkit-gradient(linear,left bottom,left top,color-stop(0,rgba(0,0,0,.4)),color-stop(32%,transparent));    background: linear-gradient(0deg,rgba(0,0,0,.4) 0,transparent 32%);}.o-tag-card-title {    color: #fff;}.o-tag-card-title::after {    display: block;    content: "";    width: 100%;    padding-bottom: 75%;}.o-tag-card-title-name {    position: absolute;    bottom: 0;    left: 0;    right: 0;    margin-bottom: 0;    padding: 16px;    font-size: 20px;    font-weight: 400;}.o-tag-font-size-tiny {    font-size: 14px;    line-height: 19px;}/*-- 屏幕宽度小于 800px --*/@media all and (max-width:800px){    .col-1{ width: 33.33%;    }    .col-2{ width: 50%;        }    .col-3{ width: 83.33%;    }    .col-4{ width: 100%;    }    .col-5{ width: 100%;    }    .col-6{ width: 100%;      }    .row .col-2:last-of-type{        width: 100%;    }    .row .col-5 ~ .col-1{        width: 100%;    }}@media all and (max-width:650px){    .col-1{ width: 50%;        }    .col-2{ width: 100%;    }    .col-3{ width: 100%;    }    .col-4{ width: 100%;    }    .col-5{ width: 100%;    }    .col-6{ width: 100%;      }}</style>
新建导航

返回后台,选择 SETTINGS --> Design --> Navigation,创建一个新的导航,名称可以自己定义,路径填写 http(s)://yousites.com/tags/,点击 Save 按钮保存即可。

以上,一个 Tags 归档页面就完成了,具体的样式可以根据自己需求进行修改完善。

参考

Ghost 其他文章