为hexo增加gitalk评论系统

​ 所有操作再hexo next主题的基础上完成

准备工作:

1. 新建一个github仓库,使用issues作为评论容器
2. 注册gitalk,获取id,secret
3. 给页面增加gitalk元素及引入gitalk样式表及js文件

开始:

1. 先新建一个仓库,名为blogtalk,默认开启了issues功能,不用再设置
2. 创建一个 OAuth Apps,进入github的个人设置页面

1588671265242

1588671347611

new OAuth App

1588671405735

拿到id跟secret

1. 加入页面元素,并修改配置文件 先加入div 容器

1588671747938

为了加速css及js文件的加速并且防止cdn链接出现问题而导致评论无法使用的情况,将cdn的css,js文件下载到本地使用

# Gitalk
  # gitalk_js: //cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js
  # gitalk_css: //cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css

将上面的两个文件下载下来保存到主题文件夹下的css,js文件夹下

1588672004557

修改布局文件中的gitalk,修改资源的加载路径

1588672102302

最后一步,修改配置文件

1588672310349

hexo clean && clean g && clean s
//重新生成静态文件即可看到效果
//或者 git push到github仓库使用上篇的自动部署