【Hexo】使用gitalk给yiliya添加评论功能，部署在自己的服务器上

一、创建一个存放评论的仓库

注意不是创建"Github ID.github.io"的仓库，之前出过一些问题，貌似自己的服务器不能用主页仓库作为评论仓库。
在这里插入图片描述

二、创建OAuth Apps应用

传送门：https://github.com/settings/applications/new
在这里插入图片描述

配置OAuth Apps

在这里插入图片描述
1）Application name 可以随便填一个。

2）Homepage URL 必须是博客仓库的域名（GitHub Pages 的）。

3）Authorization callback URL 必须是博客的域名（http://www.itwanger.com）。

注意：
在这里插入图片描述
记下：
Client ID
Client Secret

三、配置网页Demo

这里先创建一个测试网页作为演示，Hexo中的配置我放到后面：
test.html这里我直接用上面创建的评论仓库和OAuth Apps，填入你的Client Secret，Client ID。

<body>
    <div id="gitalk-container"></div>
</body>

<link rel="stylesheet" href="http://liuyuanlin.xyz/cdn/gitalk/gitalk.css">
<script src="http://liuyuanlin.xyz/cdn/gitalk/gitalk.min.js"></script>
<script type="text/javascript">
var gitalk = new Gitalk({
     
     
    clientID: 'Client ID',
    clientSecret: 'Client Secret',
    repo: 'blogcomment',
    owner: 'MisakaMikoto128',
    admin: ['MisakaMikoto128'],
    id: 'Demo',
    distractionFreeMode: true
});
gitalk.render('gitalk-container');

var language = navigator.language || navigator.userLanguage;
var intro = document.getElementsByClassName('hero-intro')[0];
var beginBtn = document.getElementsByClassName('btn-begin')[0];
var demo = document.getElementsByClassName('demo')[0];
if (language === 'zh-TW') {
     
     
    intro.innerText = '一個基於 Github Issue 和 Preact 開發的評論插件';
    beginBtn.innerText = '開始使用';
} else if (!~language.indexOf('zh')) {
     
     
    intro.innerText = 'A modern comment component based on Github Issue and Preact';
    beginBtn.innerText = 'GET STARTED';
    demo.innerText = 'Demo';
}
</script>

在这里插入图片描述

如果出现Error: Invalid Field
改一下title

<head>
<title>gitalk测试</title>
</head>

四、配置到Hexo中

找到xxx\themes\yilia\layout\post.ejs,填入刚刚的配置文件

<%- partial('_partial/article', {post: page, index: false}) %>
<body>
    <div id="gitalk-container"></div>
</body>

<link rel="stylesheet" href="http://liuyuanlin.xyz/cdn/gitalk/gitalk.css">
<script src="http://liuyuanlin.xyz/cdn/gitalk/gitalk.min.js"></script>
<script type="text/javascript">
var gitalk = new Gitalk({
     
     
    clientID: 'Client ID',
    clientSecret: 'Client Secret',
    repo: 'blogcomment',
    owner: 'MisakaMikoto128',
    admin: ['MisakaMikoto128'],
    id: decodeURI(location.pathname),
    distractionFreeMode: true
});
gitalk.render('gitalk-container');

var language = navigator.language || navigator.userLanguage;
var intro = document.getElementsByClassName('hero-intro')[0];
var beginBtn = document.getElementsByClassName('btn-begin')[0];
var demo = document.getElementsByClassName('demo')[0];
if (language === 'zh-TW') {
     
     
    intro.innerText = '一個基於 Github Issue 和 Preact 開發的評論插件';
    beginBtn.innerText = '開始使用';
} else if (!~language.indexOf('zh')) {
     
     
    intro.innerText = 'A modern comment component based on Github Issue and Preact';
    beginBtn.innerText = 'GET STARTED';
    demo.innerText = 'Demo';
}
</script>

location.pathname这句很重要，不然每篇博客的评论区都会是一个。

id: decodeURI(location.pathname),

问题总汇：

Error: Validation Failed

配置基本完成，但貌似最近github更新过后，issue的名字不能超过50，所以会出现** Error: Validation Failed**报错

具体可以看看这个issue讨论,取其中的一个大佬提的方法，使用md5对title编码，限制长度。

针对中文标题被转码长度变长，我试了下下面的修改：

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: decodeURI(location.pathname),
    distractionFreeMode: '{
    
    { theme.gitalk.distractionFreeMode }}'
})
gitalk.render('gitalk-container')

我添加了一句 id: decodeURI(location.pathname) 使用了JS的解码函数decodeURI()。
这样我生成issue的label貌似就是中文的字符。

然后发现如果以前有评论了的话，可以把对应的issue的label改成新生成的label（注意保证每篇文章Gitalk和该文章lebel的唯一貌似就行了）

Error:Not found

这个是gittalk中的信息填写错了，name随便写；Homepage URL是你的仓库的名字，Authorization callback URL如果你指向了新的域名就填新的，比如说我指向了域名www.test.cn；否则也写仓库的名字就可以。