折腾 Hexo 第三弹 —— 集成一个自制插件,并使用 CI 实现自动升级主题,自动部署

探索折腾博客的终极意义

折腾博客的意义是什么?这两天看到群里有个人说的很对:虽然明知没人来看自己博客,但是折腾起来就是很爽。就像虽然看起来我像是博客 3 个多月没更新了,但实际上实际上我网站已经折腾了好几个月了,只是没有新写文章而已。总的来说,我把我原来对 NexT 主题的修改重新集成为一个 npm 插件,方便其他人使用。另外我添加了更多自动化的操作,不但以后只需要 push 新的文章,CI 就能自动更新网站。并且,Travis 的定时运行任务功能可以方便地自动拉取主题的最新代码,自动更新主题版本,从此再也没有主题过时的烦恼,简直爽歪歪。

当然写这篇文章的最终目的,那当然就是来推广我的 nppm 插件的。所以下面让我来介绍一下这个插件 hexo-disqus-php-api

hexo-disqus-php-api

总的来说,这是一个集成 Disqus 服务的评论插件。我一直使用 disqus-php-api 来解决国内无法直接访问 Disqus 的问题,它依赖一个 PHP 后端来转发 Disqus API 请求,从而实现了直接评论的功能,并且这个项目还实现了很多 Disqus 评论框支持的额外功能比如表情投票、相关文章推荐等等。简直可以媲美原生的 Disqus 评论框了,相比那些只能看不能评论的反向代理插件不知道高到哪里去了。

插件集成

这一段我会介绍原来的集成方法,如果只想了解使用方法可以跳过这一部分。由于 NexT 主题本身没有这个项目的相关支持,因此在此之前,我是手动修改主题中的相关 swig 代码,那个时候 NexT 还是 7.1 版本,NexT 对于第三方评论插件的集成方式还比较混乱,有多混乱?看下面这段代码就差不多知道了。

layout/_third-party/comments/index.swig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{% if theme.disqus.enable %}
{% include 'disqus.swig' %}
{% if theme.disqusapi.enable %}
{% include 'disqusapi.swig' %}
{% elif ... and ... and ... %}
{% include ... %}
{% elif ... and ... and ... %}
{% include ... %}
{% endif %}

{% if page.comments %}
{% if theme.livere_uid %}
{% include 'livere.swig' %}
{% elif ... %}
{% include 'gitment.swig' %}
......
{% endif %}
{% endif %}

这还只是其中的一部分,你可以在 这里这里 找到更多的类似这样的丑陋代码。这些代码导致如果想要集成一个新的评论集成,你就得再补一个 elif 上去,估计这些代码也是经过一次次的 elif 变的越来越臃肿的。同时这也导致另一个问题,每次主题更新的时候,你需要合并这些你自己的修改,但是一旦上游对这些文件进行了部分修改,Git 的自动合并就很容易失败,到时候你就得打开这些文件,对着丑陋的代码一行一行看了。

长痛不如短痛,NexT 主题在下一个版本中进行了巨大的重构,这些代码被通过 Hexo 提供的一个叫做 theme_inject 的功能干掉了,所以之前我更新主题的时候发现,呀!代码怎么全变了呢?这要我如何修改,所以之前的很长一段时间我的主题都停留在 7.1.2 版本,主要原因就是重构太大没办法把我自己修改的代码合并进去了。

所以趁最近一段时间,我大概重新了解了一下 NexT 进行的重构内容,仿照它实现其他第三方主题插件的思路,以插件的形式把 disqus-php-api 集成到了 NexT 主题中。

使用方法

现在,你不需要对 NexT 主题代码进行任何修改了。你只需要使用以下命令安装 npm 插件即可。

1
$ npm install hexo-disqus-php-api

然后只需要在 Hexo 的配置文件 _config.yml 中添加相应的设置项

1
2
3
4
5
6
7
8
disqusapi:
enable: true
api: # Your server endpoint
forum: # Your disqus shortname
mode: 2
timeout: 2000
emojipreview: true
relatedtype: Related

这些配置项的含义可以在 disqus-php-api 中找到。好了!一切完成!

CI 集成

由于从此不再需要修改任何主题代码了,而主题的配置文件也可以通过 source/_data/next.yml 重写,所以主题就已经完全和网站的任何配置解耦合了,那么为啥不直接把主题文件夹从仓库中删除,然后让 Travis 自动下载呢?

达成这一目的很简单,只需要在 travis.yml 中额外添加两行命令:

.travis.yml
1
2
3
4
5
...
before_install:
- mkdir -p themes/next
- "curl -s https://api.github.com/repos/theme-next/hexo-theme-next/releases/latest | grep tarball_url | cut -d '\"' -f 4 | wget -i - -O- | tar -zx -C themes/next --strip-components=1"
...

这两行代码表示创建对应的文件夹,并从 NexT 项目中拉取最新的稳定版代码。

最后你只需要给 Travis 设置定时运行任务,比如每周,这样 Travis 每周就会帮你部署一次网站,你的网站也可以在每周都保持最新版本了。

总结

最后再引用一句来自群友的评论

I like NexT, beacuse there is a large num of developers had a good maintenance of this theme. In the meanwhile, I dislike NexT, because there was huge differences between two edtions.

作为 NexT 的活跃贡献者之一,我真诚希望 NexT 能继续积极开发维护,带来更多更有趣的功能及特色。

评论