Ghost V5 博客新主题杂事

前言

最近半年一直没有更新博客文章,大多数精力放在别的事项,最近一段时间准备拾起写博文的事项,无奈心太浮躁,写不出什么,所以趁着这段时间利用业余时间去维护博客主题,记录一些折腾的笔记。

Ghost v5

大概今年五月份的时候,Ghost 官方推送了 v5 大版本,当时正好赶上频繁搬家和公司事项,对本次更新并没有很关心,只记得当时觉得 v5 和 v4 没有很大的区别,主要性能上确实比之前快了不少。

直到回来后空闲之余查阅文档和源码发现 v5 实际上已经发生了天翻地覆的改变了,新增了很多之前期待已久的功能:

上面涉及三大功能让我惊喜不已,所以最近一个月我开发一套新的主题 - Pomelo Ghost 主题,主题细节上下文再说吧。
除了功能上的大改变还有一些细节上的变化:

  • 丰富的编辑器卡片内容支持,比如原生视频支持、播客、GIF、标注等等,虽然我是 Markdown 党,但是有这些东西总比没有好吧。事实上有些卡片功能挺实用的,特别是书签功能,他可以帮你自动转化书签简介插入你的文章,游客访问的时候很大程度上提高文章的美观性。
  • 电子邮件通讯,感觉这个也相当好用,比如某些情况下可以利用此功能给会员(网站注册用户)推送文章。
  • 速度,速度这一块我已经说烂了,根据 Ghost 官方负载测试,v5 版本性能上比 v4 又提高了 20% 以上。嗯,目前体验上没啥感觉,但快确实是真的。
  • 原生搜索支持,除了内容不能检索之前,其他都可以做到,比如:标题,标签和作者,如果需要内容检索还是老老实实上 Algolia 吧。不过在大陆开启这个功能还需要多做些步骤,下文会提到的。
  • 原生评论支持,新版本也添加此功能支持了,唯一缺点不支持匿名评论,必须要注册本站会员才能留言,不过现在大陆的环境,还是老老实实做个登录评论吧。
  • 自定义主题选项支持,这个功能是我最期待的,对大多数 Ghost 主题开发者而言,不能自定义主题特有设置是最最最蛋疼的事情,不过体验一段时间发现,设置主题字段名字还有各种限制,虽然难受了一点,但好歹也能用。

Pomelo 主题

本来这个主题是今年 2 月份春节要发布的,结果被我咕咕了,今年 10 月份总算憋出来了。先说说这个主题的特性吧:

  • 原汁原味的 SoldOut 主题风格,没错,风格上还是搬照去年的风格,谁叫去年的主题我看了一年没看腻,不过后面我会增加新的排版风格。
  • Dark Mode 重写,新主题的 Dark Mode 触发机制已经重写了,不会像去年的主题那么混乱。
  • 全新的正文内容样式渲染,目前还在优化
  • 全新的主题自定义设置偏好
  • 添加搜索、评论支持
  • 添加多种模板支撑:归档、友链、关于
  • 搜索功能支持中文关键词搜索(标题、正文、标签、作者)

从今年开始,这个主题维护周期可能更长了,主要年年出一个新的主题真的累死人,但我能保证新主题能够及时使用 Ghost 新特征功能。

主题源码:Pomelo Ghost Theme

为什么命名 Pomelo:错过的人就不必再重逢,毫无意义的名字,却贯彻今年人生的主题。


好了,不 emo 了,该讲解下主题的使用注意事项吧:

问:如果启用搜索评论在前端页面发现 cdn.jsdelivr.net 引用库怎么办?

Ghost 在前端页面默认使用下列资源:

  • https://cdn.jsdelivr.net/ghost/portal@~2.15/umd/portal.min.js
  • https://cdn.jsdelivr.net/ghost/sodo-search@~1.1/umd/sodo-search.min.js
  • https://cdn.jsdelivr.net/ghost/sodo-search@~1.1/umd/main.css
  • https://cdn.jsdelivr.net/ghost/comments-ui@~0.10/umd/comments-ui.min.js
  • https://cdn.jsdelivr.net/ghost/comments-ui@~0.10/umd/main.css

令人遗憾的是,大陆前段时间屏蔽了 jsdelivr 访问,所以在大陆访问博客会出现卡死的问题,所以为了保持博客加载速度,建议把上面的资源下载到博客本地或者放在大陆的 CDN 资源上,然后修改 Ghost 服务器中的 config.production.json 配置,在 JSON 文件最下面添加下列字段:

{
  "portal": {
    "url": false
  },
  "sodoSearch": {
    "url": "https://你的博客地址/assets/sodo-search.min.js?v=20221025",
    "styles": "https://你的博客地址/assets/sodo-search.min.css?v=20221025",
    "version": "1.0.0"
  },
  "comments": {
    "url": false
  }
}

记得修改地址,修改后重启下 Ghost 服务即可,然后在控制台看看资源地址是否正确生效。

如果你的博客不需要相应的功能,比如不需要评论功能就修改如下:

{
  "comments": {
    "url": false
  }
}

这样在前端不会加载对应的 css 和 js 文件了,包括搜索和门户也一样这么做。


问:我发现博客加载头像很慢,这怎么办?

和上文同理,修改 config.production.json 配置文件添加下面字段:

{

  "gravatar": {
    "url": "https://gravatar.loli.net/avatar/{hash}?s={size}&r={rating}&d={_default}"
  }
}

gravatar.loli.net 可以换成你想要的 gravatar 源,这些你可以去 Google 搜索。


问:归档页面怎么创建?

打开后台设置 Settings - Labs - Routes 下载路由文件,修改文件内容:

routes:
  /archives/:
    controller: channel
    template: archives

collections:
  /:
    permalink: /{slug}/
    template: index
  
taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

主要新增上面的 archives 路径和模板,主题里面有个 archives.hbs 文件,这个页面就是最终渲染的归档页面。