终于!!!记录如何在hexo next主题下配置gitalk评论系统

本文介绍 gitalk的配置,血与泪的控诉

本文由在当地较为英俊的男子金天大神原创,版权所有,欢迎转载,本文首发地址 https://jinfagang.github.io 。但请保留这段版权信息,多谢合作,有任何疑问欢迎通过微信联系我交流:jintianandmerry

朋友们,这个gitalk集成真的蛋疼啊,首先我必须要说一下,如果你想集成一个评论系统,gitalk应该是最好的选择,因为它维护积极,并且与github紧密的联系在一起,没有比他更适合做评论系统了,这样我们与粉丝的联系其实也更加密切。

朋友们,在这之前声明一下,本篇博客记录在 next 主题下配置gitalk。如果你是一个网页,比如奇异AI的文章页面,你也可以尝试一下,不过我还没有试过,后面会出一期教程,这次我们先看看如何在github博客上集成。

步骤

总览一下步骤,首先其他的主题我不知道如何配置,如果你使用的是next的hexo主题,那么这篇博客完全适合。步骤大概如下:

  1. 修改swig文件,也就是gitalk js文件
  2. 引入那个自定义gitalk文件
  3. 在_config里面配置并且enable gitalk
  4. 关于gitalk的配置以及github方面的配置问题
  5. 你需要在你的域名下进行测试最后是否成功
  6. 自己评论,然后看看github repo下是否自动创建了issue

大概就这么几步,其实所有的难点就来自于同一个问题:github issue的label长度被限制在了50个字,以至于之前的很多配置都无法使用了。解决了这个问题,一切问题都水到渠成了。

接下来一步一步的配置,按照步骤来,最重要的是1-3步骤,当然在这之前你需要去github注册一个APP。点击这里注册一下,请注意里面的AppName随便写,重点是app的回调URL,一定要写你的博客网址,加上https://.

  1. 首先创建gitalk.swig文件

定位到路径 themes/next/layout/_third-party/comments下面,创建一个叫做 gitalk.swig的文件,写入如下内容:

{% if page.comments && theme.gitalk.enable %}
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<script type="text/javascript">
var gitalk = new Gitalk({
clientID: '{{ theme.gitalk.ClientID }}',
clientSecret: '{{ theme.gitalk.ClientSecret }}',
repo: '{{ theme.gitalk.repo }}',
owner: '{{ theme.gitalk.githubID }}',
admin: ['{{ theme.gitalk.adminUser }}'],
id: md5(window.location.pathname),
distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
})
gitalk.render('gitalk-container')
</script>
{% endif %}

这里,我们就解决了那个issue label长度不能超过50的问题, 我们用了一个md5,同时采用了 windows.location.pathname来区分不同的文章。

这里的 ClientIDClientSecret就是刚才创建的APP的对应的东西,最后你的一个博客或者一个网址需要建立一个repo和一个对应的app,来装载comments。上面的代码你不需要修改的,我们在后面的config里面再来具体配置。好了,第一步完成。

  1. 引入这个 gitalk.swig文件

单单创建不行,还得在 上面的同级目录下的 index.swig 里面加入:

{% include 'gitalk.swig' %}

引入上面的文件。

  1. enable和配置

在使能化之前,我们还需要修改或者说是美化一下gitalk的默认样式,如果你不进行这一步也没有影响,可能结果会丑一点。
定位到: themes/next/source/css/_common/components/third-party. 然后你需要创建一个 gitalk.styl 文件。

这个文件里面写入:

.gt-header a, .gt-comments a, .gt-popup a
border-bottom: none;
.gt-container .gt-popup .gt-action.is--active:before
top: 0.7em;

然后同样的,在 third-party.styl里面导入一下:

@import "gitalk";

接着就是使能化,并且在config中配置一下,打开你熟悉的那个主题下面的 _config.yaml 文件。加入如下的内容:

gitalk:
enable: true
githubID: jinfagang
repo: jinfagang.github.io
ClientID: ce0d7116xxx5539d8
ClientSecret: e8f3ca314f8a735fcxxxxxx4ce3b485209b8
adminUser: jinfagang
distractionFreeMode: true

上面的一些字段说明如下:

`githubID`: 你的github ID,用来说明你是个人还是某个组织的,一定需要;
`repo`: 你要新建一个repo来保存这些comments,这里repo就随便新建一个就行;
`ClientID` 和 `ClientSecret`: 就是新建APP的玩意,请注意,这个一定要和你部署的网站的对应起来,一个网站对应一个这个client;
`adminUser`: 你的admin 用户名,通常就是你自己

好了,经过这样,你的next主题下的gitalk评论就搞定了,不信的话,你可以在下方评论一下,测试一下。欢迎来反馈我。如果你遇到了任何问题,feel free to ask me!