给 Ghost 博客添加 Tags 归档页

给 Ghost 博客添加 Tags 归档页

写在前面

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

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

开始

Ghost 版本 2.x

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

0x01 创建页面

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

63

0x02 创建模板文件

在主题目录中,创建一个新文件并将其命名为 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 用于循环遍历输出标记,并呈现最终的列表。

0x03 Code Injection 添加样式

返回 Ghost 博客后台,编辑 00x1 步骤添加的 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>
0x04 新建导航

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

以上,一个 Tags 归档页面就完成了,具体的样式可以根据自己需求进行修改完善。可以点击这里查看本博客的归档效果。

参考

https://docs.ghost.org/api/handlebars-themes/helpers/tags/

Ghost 其他文章

Vultr 主机搭建 Ghost 博客
为了更“快”的体验,把博客从 Vultr 搬到了阿里云

可能还喜欢下面的内容

为了更“快”的体验,把博客从 Vultr 搬到了阿里云

为了更“快”的体验,把博客从 Vultr 搬到了阿里云

ins@heyrock