Vincent Sit

前言
为 Ghost 博客添加 Archive 功能

为 Ghost 博客添加 Archive 功能

0x00

博客开通这些年,折腾过很多博客工具,最后还是回到 Ghost。主要原因有几个,一是我没空自己开发一个博客,就自己那几篇文章也不值得折腾。二是我想要博客是一个动态的网站,静态生成器折腾起来比较麻烦。三是我几年前买了一个 Ghost 的主题,甚是喜爱,不用可惜,所以又折腾回了 Ghost。

再折腾回来 Ghost 已经走到 2.x 了,变化还是有的。依然没有 Archive(归档)和搜索功能。虽然没几篇文章,但还是按耐不住折腾的心,趁着中午吃完饭花了大半个钟做了个 Archive 页面,顺便为博客加个了简单的 cdn。

0x01

首先你需要进入 Ghost 后台(<your-domain>/ghost)开启 Public API 功能(位于 Settings --> Labs --> Beta features),因为无论你选择手动调用 API 还是使用 Ghost 内置函数,都依赖此功能。

然后新建一个名为 page-archives.hbs 的模板文件。在里面调用内置函数 {{#get "posts"}}{{/get}} 获取你所有的文章:

{{!-- 0 --}}
{{#get "posts" limit="all"}}
    {{!-- 1 --}}
    {{#foreach posts}}
        <div class="archivemain">
            
            {{!-- 2 --}}
            <div class="archivemeta-published">
                <time datetime="{{date format="YYYY-MM-DD"}}">{{date published_at format="MMMM Do, YYYY"}}</time></a
            ></div>
            
            {{!-- 3 --}}
            <h2 class="archiveitem-title">
                <a href="{{url}}">{{title}}</a>
            </h2>
            
            {{!-- 4 --}}
            {{#if featured}}
                <svg class="archiveitem-featured svg-icon svg-icon-stroke svg-icon-bookmark">
                    <use xlink:href="{{asset "svg/icons.svg"}}#bookmark"></use>
                </svg>
            {{/if}}
        </div>
    {{/foreach}}
{{/get}}
  • 0,获取文章列表。
  • 1,遍历文章。
  • 2,设置文章发布日期。
  • 3,设置文章表示。
  • 4,如果是精选文章,加一个标识符号。

最后在 Ghost 后台创建一个新的导航页面(位于 Settings --> Design --> Navigation),名称你自定义,路径填入 archives,保存后会自动帮你展开为绝对路径。

这样一个 Archive 页面就完成了,配上一些样式,就可以见人了。

点击前往我的归档

作者

Vincent Sit

查看评论
上一篇

博客重新开张,说点什么