Ghost实现归档、标签云、搜索

Feng - 2020-02-05 / Ghost
2020-2-5|最后更新: 2023-4-27|
type
status
date
slug
summary
tags
category
icon
password
前面说过,Ghost本身并不自带类似文章归档、标签云,搜索等(后台不知道会不会改进),虽然官方没有给出,但这也不能阻止民间高手们,通过API就能实现上述这些功能。

归档

  • 首先得在后台的 实验功能 中启用 API ,如图:
    • notion image
  • 新建自定义页面:
1.创建一个静态页面:在ghost后台新建页面,发布为 独立页面 ,标题为Archives,网址可以设置为 域名/archives-post
2.接着创建一个自定义页面模板:该模板是第一步创建的静态页面的模板,创建一个page-url.hbs模板,如果第一步设置的页面网址为 域名/archives-post ,那么模板即为 page-archives-post.hbs 。将该模板上传至主题根目录下即可,此时访问域名/archives-post,即会调用自定义的page-archives-post.hbs这个模板。
  • 在page-archives.hbs中调用Ghost API即可:
相应的CSS代码如下:

标签云

  • 介绍一下 tag_cloud
这是中文版中增加的一个 handlebars 助手(helper),根据标签所关联的文章数量进行逆排序,也就是关联文章多的先输出;支持一个 limit 参数,用于限定输出的标签数量:all 表示输出所有标签;数字(例如 10)指定输出个数。调用方式如下:
  • 使用方法
在需要输出“标签云”的地方调用 tag_cloud 助手即可。我们以 casper 默认主题为例。打开 index.hbs 文件,在 标签后面添加 {{tag_cloud limit=10}} ,保存此文件、重启 Ghost、打开首页,看看是否输出了一堆标签。我是直接放在归档里的,具体放哪又或是新增页面就看各自喜好了,相应的css代码如下:

搜索

使用 jQuery.gsearch.js 插件实现Ghost博客的搜索,gsearch是一款为Ghost量身打造的搜索插件,使Ghost轻松具有搜索功能。效果类似于SwifType,通过Ghost的RSS实现搜索功能,您可以点击右上角搜索图标体验效果。
  • 下载最新版的gsearch,将 dist 文件夹下的 libs partials 文件夹复制到当前主题的根目录下(如果遇到同名文件夹,覆盖即可),并在当前主题的 default.hbs 文件中添加如下代码:
  • 接下来,我们再通过如下代码调用插件即可使用:
这段代码我是直接丢在后台的 插入代码 里注:以上示例使用了 remodal 弹层插件显示搜索信息,可以用其他插件代替,但是需要注意一点:请勿对同一元素重复调用插件。示例中使用jQuery的 .one() 方法来委托事件。关于搜索功能等信息,可详见原作者博客
实现了这三个功能,暂时可以让我消停一下了,要知道菜鸟要实现这些功能可也是花了好久功夫的,这个过程还是挺享受的,这不现地又得找点可以折腾的东西来……
Apache用htaccess来实现强制https访问Ghost博客时间汉化方案
  • Twikoo
  • Waline
  • Cusdis