hexo next主题深度优化(五),评论系统换成gittalk

2019年11月24日 阅读数:21
这篇文章主要向大家介绍hexo next主题深度优化(五),评论系统换成gittalk,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。


我的博客: https://mmmmmm.me
源码: https://github.com/dataiyangu/dataiyangu.github.io

背景:

以前一直用的是来必力的评论系统,还不错,可是由于我加入了pjax,能力有限,虽然降来必力的js重现,可是每次返回到首页都会报错id notfound ,阅读了来必力的api,全是并无找到不少好的答案。遂换成gittalk的评论系统。css

开始:

新建comments_git.js

注:配置文件中的详细,本身网上查查。html


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)vue

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

引入代码

_layour.swigjava

<script src="/js/src/pjax/comments/comments.gitalk.js"></script>

在这里引入而再也不require引入的缘由,就像个人另外一篇文章,define只能定义一次,引不进去。
main.jsjquery

//
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.swiggit

 <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便可github

遇到的问题

全部的页面共享的一个评论issue

这个好像到如今的版本,人家已经优化的很好了。
注意上年的comments_git.js
中的配置id 改成location.pathname,即web

id: location.pathname

意思是,根据目录建立不一样的issvue-router

本地4000启动报错401 没有权限

push到远端就没问题了。api

未找到相关的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是根据访问的路径名字来进行建立的,发现原本评论了的再次访问没有了,就是由于,在缺乏了/的路径里面进行了评论,下次访问的时候系统加上了/,因此数据没有对应上。