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

发表于 | 更新于: | 分类于 | |
字数统计: 1,591 | 阅读时长 ≈ 6

写在前面

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

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

为什么选择Gitalk

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

Gitalk和nexT主题目录的简要介绍

在实际修改之前，我们先了解下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接口

  • 将post、sidebar和header-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;
}
  • 其他修改。参考文章见文末。

后记

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

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

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


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


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