给hexo博客nexT主题添加Gitalk评论系统

写在前面

注意,此插件基于github开发,授权阶段需要获取的权限不局限于issues,还包括编辑你代码的权限,因此对这应用授权时需要十分小心
authorization

前段时间因为hexonexT主题崩了(载入博客时显示全白,原因在这),换了material主题,这主题很有安卓的风格,我也写过对它的一些折腾:hexo博客主题–material折腾笔记
这些都不是重点,重点的是今年6月份,多说离开了。为此我专门注册了disqus,搭配着material主题进行使用。使用期间,让我很郁闷的是连黄图哥都懒得评论QAQ,再加上前几天博客莫名的多出来了很多有规律的访问(没错,是爬虫),所以为了防止攻击,我又回归了nexT的怀抱。
下面主要记录下我将评论系统Gitalk集成到nexT的过程。

为什么选择Gitalk

多说消失后,原先与多说竞争最激烈的disqus看起来似乎是最大赢家。然而在天朝的环境中,它没有像想象中那样一跃成为主流的评论系统。而在国内,随着多说的消失,畅言网易云跟帖等等产品都跃跃欲试,想取代多说。然而现实是,网易云跟帖活了不到两个月官方就宣布不再为第三方博客提供服务,畅言虽然很活跃,但鉴于国内的大环境,我还是决定寻找一款国外的评论系统。
nexT主题集成了很多第三方评论系统,其中有一款很和我意:gitment。它由国内大神编写,基于GitHub Issues编写。详细的内容可以看这里。然而不幸的是,作者似乎弃坑了,不再进行维护,而且查看issues发现gitment在移动端貌似使用不了。
然后,我就发现了Gitalk,这个评论系统和gitment类似,且有人一直在维护,移动端也可以使用。因此我决定模仿gitmentGitalk集成到nexT主题中。

GitalknexT主题目录的简要介绍

在实际修改之前,我们先了解下Gitalk和nexT项目的目录文件,这方便我们理解后续集成的思路和使用的方法。

Gitalk 简介

Gitalk 是一个基于 Github Issue 和 Preact 开发的评论插件。

  • 特性:
    • 使用 Github 登录
    • 支持多语言 [en, zh-CN, zh-TW, es-ES, fr]
    • 无干扰模式(设置 distractionFreeMode 为 true 开启)
    • 快捷键提交评论 (cmd|ctrl + enter)

以上内容摘自github,详细的内容请查看Gitalk中文文档

nexT 目录说明

nexT 主题的源码结构非常清晰,下面对目录树进行简要说明。注意:主题迭代频繁,博主使用的版本是5.1.3,开发前请确认自己使用的版本目录树是否与本文所写一致

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
├── languages            博客语言配置
├── layout 博客的整体布局
│   ├── _custom 用户自定义配置文件(仅支持对主界面布局进行修改)
│   ├── _macro
│   ├── _partials 博客组件的配置
│   ├── _scripts
│   └── _third-party 第三方插件
├── scripts
│   └── tags
├── source 博客使用的样式目录
│   ├── css
│   ├── fonts
│   ├── images
│   ├── js
│   └── lib
└── test

集成的步骤

如果要达到我们最初的目的,需要修改以下内容:

  • layout/_partials/comments.swig
  • layout/_third-party/comments/index.swig
  • _config.yml
    还需要在layout/_third-party/comments/路径下,添加我们自己的文件gitalk.swig。下面我们一步一步来。

编写我们自己的插件文件gitalk.swig

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname %}
{% if theme.gitalk.enable and theme.gitalk.client_id %}
<!-- LOCAL: You can save these files to your site and update links -->
{% set CommentsClass = "Gitalk" %}
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
<!-- END LOCAL -->

{% if page.comments %}
<script type="text/javascript">
function renderGitalk(){
var gitalk = new {{CommentsClass}}({
owner: '{{ theme.gitalk.github_user }}',
repo: '{{ theme.gitalk.github_repo }}',
clientID: '{{ theme.gitalk.client_id }}',
clientSecret: '{{ theme.gitalk.client_secret }}',
admin: '{{ theme.gitalk.admin }}',
{% if theme.gitalk.distractionFreeMode %}
distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
{% endif %}
});
gitalk.render('gitalk-container');
}
renderGitalk();
</script>
{% endif %}

{% endif %}
{% endif %}

把编写好的插件添加到hexo主题中

layout/_third-party/comments/index.swig中添加下面语句:

1
{% include 'gitalk.swig' %}

根据条件判断是否启用该插件

layout/_partials/comments.swig中相应的地方加入如下语句:

1
2
3
4
{% elseif theme.gitalk.enable %}
<div class="comments" id="comments">
<div id="gitalk-container"></div>
</div>

在主题配置文件中配置有关Gitalk的信息

编辑_config.yml文件,在需要配置gitalk的地方加入如下内容:

1
2
3
4
5
6
7
8
gitalk:
enable: true
github_user: # owner
github_repo: # repo
client_id: # clientID
client_secret: # clientSecret
admin: # Github repository collaborators. (Ensure having write access to this repository)
distractionFreeMode: # Facebook-like distraction free mode

至此,大功告成。但需要注意的是: 当使用hexo s -d本地调试时你可能会看到

1
2
未找到相关的 Issues 进行评论
请联系 @whtis 初始化创建

出现了这个提示不要紧,你只要部署后,使用github登录就好了。

博客的其他修改

  • 因为很喜欢material主题同步bing每日壁纸的功能,所以也把hexo的背景图片与bing壁纸进行同步。实现这个功能,只需要编辑source/css/_custom/custom.styl文件,加入如下内容即可:
    1
    2
    3
    4
    5
    6
    7
    8
    html, body {
    height: 100%;
    background-image: url("http://api.dujin.org/bing/1920.php");
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
    background-size: cover;
    }

其中,image的url是其他博主提供的api接口,目前看来还是很稳定的。后续也可以考虑自己抓取bing的壁纸,有关这部分内容,可以参考这篇博文:获取Bing每日图片API接口

  • postsidebarheader-inner透明度调成80%,这是为了较好的突出背景。实现方法:编辑source/css/_custom/custom.styl文件,加入如下内容即可:
1
2
3
4
5
6
7
8
9
10
11
.header-inner {
opacity: 0.8;
}

.main-inner {
opacity: 0.8;
}

.sidebar {
opacity: 0.8;
}
  • 其他修改。参考文章见文末。

后记

看了nextissues发现已经有人在两个月前Pull requests了,但还在open状态,怪不得我clone的时候找不到这个插件。

最后,有同学如果也研究过hexo的,欢迎教我怎么把文章那块(post-block)调成半透明的。。。楞是没有找到修改哪里才能生效⊙﹏⊙

最后的最后,附一个比较全面的hexo折腾总结:hexo的next主题个性化教程:打造炫酷网站



本文章首发www.whtis.com,转载请注明出处


如果觉得这篇文章还有用的话,请我喝杯饮料呗~~