Ghost V5 博客新主题杂事

淮城一只猫 • • 奇技淫巧
阅读量 0 次 • 评论量 0 个

前言

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

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 文件，这个页面就是最终渲染的归档页面。

喵~