为hexo增加gitalk评论系统

时间:2022-07-25
本文章向大家介绍为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

拿到idsecret

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

为了加速cssjs文件的加速并且防止cdn链接出现问题而导致评论无法使用的情况,将cdncss,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文件夹下

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

最后一步,修改配置文件

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