为hexo增加gitalk评论系统

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

准备工作:

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

开始:

1. 先新建一个仓库,名为blogtalk,默认开启了issues功能,不用再设置

2. 创建一个 OAuth Apps,进入github的个人设置页面

   

new OAuth App

拿到id跟secret

3. 加入页面元素,并修改配置文件

   先加入div 容器

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

1
2
3

  # 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文件夹下

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

最后一步,修改配置文件

1
2
3

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