文章目录
- 背景：
- 开始：
- pjax加入gitalk
- 遇到的问题
- 所有的页面共享的一个评论issue
- 本地4000启动报错401 没有权限
- 未找到相关的Issues 进行评论，请联系xxx初始化创建
- gitalk自己的博客登录成功后报错 Error: Validation Failed.
- 如果出现Error: Container not found, document.getElementById: gitalk-container
- GET https://api.github.com/user 401 (Unauthorized)
- vue-router.esm.js?8c4f:1905 ReferenceError: Gitalk is not defined
- NetWork Error
- 2019.1.30更新
- Mixed Content: The page was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint
个人博客：https://mmmmmm.me
源码：https://github.com/dataiyangu/dataiyangu.github.io
背景：
之前一直用的是来必力的评论系统，还不错，但是因为我加入了pjax，能力有限，虽然降来必力的js重现，但是每次返回到首页都会报错id notfound ，阅读了来必力的api，全是并没有找到很多好的答案。遂换成gittalk的评论系统。
开始：
新建comments_git.js
注：配置文件中的详细，自己网上查查。
if($('#gitalk-container').length>0){
var gitalk = new Gitalk({
// gitalk的主要参数
clientID: `Github Application clientID`,
clientSecret: `Github Application clientSecret`,
repo: `Github 仓库名`,//存储你评论 issue 的 Github 仓库名（建议直接用 GitHub Page 的仓库名）
owner: 'Github 用户名',
admin: ['Github 用户名'], //这个仓库的管理员，可以有多个，用数组表示，一般写自己,
id: 'window.location.pathname', //页面的唯一标识，gitalk 会根据这个标识自动创建的issue的标签,我们使用页面的相对路径作为标识
});
gitalk.render('gitalk-container');
}
找到comments.swig在最后一个endif之前
（目录：themes/next/layout/_partials/comments.swig）
<div id="gitalk-container"></div>
引入代码
_layour.swig
<script src="/js/src/pjax/comments/comments.gitalk.js"></script>
在这里引入而不再require引入的原因，就像我的另一篇文章，define只能定义一次，引不进去。
main.js
//
require.config({
paths: {
"music": "/dist/music",
"aplayer": "/js/src/aplayer",
"backgroudLine": "/js/src/backgroudLine",
"category": "/js/src/category",
"jquery.share.min":"/js/src/pjax/share/jquery.share.min",
/*不显示图标的话替换fonts*/
"share":"/js/src/pjax/share",
"css":"/js/src/pjax/css",
"comments":"/js/src/pjax/comments_git",
},
shim: {
'share': {
deps: [
'css!/js/src/pjax/share/share.min','jquery.share.min'
]
},
'comments': {
deps: [
'css!https://unpkg.com/gitalk/dist/gitalk'
]
}
}
});
require(['backgroudLine','music','aplayer','category','jquery.share.min','share','css','comments'], function (){
});
如果没有用require的直接在_layout.swig
<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
//再引入comments_git.js
<script src="xxxxxxxxxx/comments_git.js">
pjax加入gitalk
同样重新调用comments_git.js即可
遇到的问题
所有的页面共享的一个评论issue
这个好像到现在的版本，人家已经优化的很好了。
注意上年的comments_git.js
中的配置id 改为location.pathname，即
id: location.pathname
意思是，根据目录创建不同的iss
本地4000启动报错401 没有权限
push到远端就没问题了。
未找到相关的Issues 进行评论，请联系xxx初始化创建
这个issue每次需要管理员，即作者你创建，怎么创建呢？在你自己的博客进入评论，登录自己的github账号，访问没有创建issues的博客，就初始化了。
这样岂不是很麻烦？
解决博客：https://link.jianshu.com/?t=https%3A%2F%2Fdraveness.me%2Fgit-comments-initialize
这个方法，我试过，没有成功，时间有限，就不深追了~
tips：里面的sitmap地图，如果是next地图在网址:https://你的博客地址/sitemap.xml
以后有时间或者能力允许的话，可能会写一个类似爬虫的脚本，完成这一操作~
发现自己的留言板明明评论了却不显示
原因：自己加入了pjax导致
手动刷新的地址是：https://mmmmmm.me/message/
pjax刷新的地址是：https://mmmmmm.me/message
因为gitalk创建issues是根据地址来创建的，所以不同的地址当然issues是不一样的啊。
gitalk自己的博客首次需要登录github进行初始化，初始化的时候跳转到了blog首页。
原因：
md文件的名字不能中间和结尾不能有空格，尤其是结尾
md文件的名字不能有特殊符号
md文件的名字不能有汉字，汉字会转码，最好的英文
也可能和tittle有关，不过改了md之后应该就没问题了
gitalk自己的博客登录成功后报错 Error: Validation Failed.
md文件的名字太长（根本原因）导致，因为issus是根据md文件名字来创建的
注意点:
1.md文件的名字不能太长，最好用英文，因为中文转码后会变长很多
2.一般md的文件名字是显示在地址栏的，具体的文章标题在md文件里面的tittle里面设置成汉字就行了，并不影响阅读。
如果出现Error: Container not found, document.getElementById: gitalk-container
确保本地启动没这个报错，可能是service 缓存的问题
也有可能是真的没有初始化gitalk-container div
为解决这个问题，对已经scriptGitalk的页面重新建立gitalk-container div
GET https://api.github.com/user 401 (Unauthorized)
无影响
我本人遇到了，是因为原来网站是http的后来强制变成了https issue需要重新初始化。我重新建了gitalk服务，并且删掉了原来的issue
vue-router.esm.js?8c4f:1905 ReferenceError: Gitalk is not defined
js包还在下载中，找不到Gitalk
NetWork Error
一开始还以为是js加载顺序的问题（于是把拖了快一个月问题3的bug修了）
后来才发现那段时间GitHub Api不稳定 你频繁请求的时候 是会出现Network Error的状态
这个就无解了
以上三个错误摘自：https://wyydsb.com/javaScript/comment.html
2019.1.30更新
遇到新的错误
GET https://api.github.com/user 401 (Unauthorized)
无影响
我本人遇到了，是因为原来网站是http的后来强制变成了https issue需要重新初始化。我重新建了gitalk服务，并且删掉了原来的issue，重新建立
Mixed Content: The page was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint
描述：pjax在本地完美实现，但是通过域名访问，发现其他的pjax还好，但是在转到message（留言板）页面的时候，还是会全部刷新，pjax失效了，通过打开调试功能发现报错如下：
Mixed Content: The page at 'https://cootrandesenv.tjdft.jus.br/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://cootrandesenv-api.tjdft.jus.br/api/v1.0/contratos/'. This request has been blocked; the content must be served over HTTPS.
从字面上理解是我的这个页面是https的，但是因为我博客中加入了pjax，在pjax中重新定向调用了http的请求，所以是不成功的，但是我发现我的gitalk中并没有调用相关的东西呀。最后终于通过
https://discuss.emberjs.com/t/mixed-content-the-page-was-loaded-over-https-but-requested-an-insecure-xmlhttprequest-endpoint/13876
这篇文章找到了答案。非常感谢！
大概意思就是在访问的路径中“/”反斜杠的问题。
menu:
home: / || home
about: /about/ || user
top: /top/ || signal
categories: /categories/ || th
tags: /tags/ || tags
archives: /archives/ || archive
message: /message/ || heart
在hexo next主题下的config文件中有关于跳转页面的配置信息，最后一行中的message: /message/ || heart 我原来写的是message: /message || heart，所以默认请求的是https://mmmmmm.me/message 这个时候自动重定向到了http://mmmmmm.me/message/ ,所以出现了上面的错误。
至此完美解决。
这里末尾不加/ 这个反斜杠，还会导致一个问题就是因为gitalk的issue是根据访问的路径名字来进行创建的，发现本来评论了的再次访问没有了，就是因为，在缺少了/的路径里面进行了评论，下次访问的时候系统加上了/，所以数据没有对应上。