通过Gitalk免费给你的Hexo博客添加评论模块

Hexo
,

1.申请Github第三方登录授权

申请地址
JQoLO1.jpg

字段 说明
Application name 应用名，可以随便填
Homepage URL 主页地址，填写博客首页即可。例如: https://fengzxia.gitee.io/
Application description 应用说明，可以随便填
Authorization callback URL 回调地址，填首页即可https://fengzxia.gitee.io/

申请成功后会生成Client ID和Client Secret保存稍后备用
JQTL9g.jpg

也可在Settings->Developer settings->OAuth Apps下找到我们刚才申请的应用
JQ7ZuR.jpg

2.安装Gitalk插件

  • hexo-plugin-gitalk: Hexo 整合 gitalk 组件实现博客评论功能

    安装

    1
    npm install hexo-plugin-gitalk --save

用法

  1. 在根目录下的_config.yml，添加如下配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    plugins:
      gitalk:
        clientID: xxx
        clientSecret: xxxxxx
        repo: blog_comment
        owner: FENG1000
        admin: 
          - FENG1000
        distractionFreeMode: false

    • clientID: 刚才保存的clientID

    • clientSecret: 刚才保存的clientSecret

    • repo: 仓库名(可以自己随意填写)。需要再创建一个专门存放评论的仓库，只需要写仓库名即可

    • owner: 所有者。填自己的用户名即可

    • admin: 管理员。填用户名即可，如果还有其他用户为管理员也可添加他的用户名

    • distractionFreeMode: 是否开启。类似Facebook评论框的全屏遮罩效果.

    • 注: repo创建的仓库必须是Public，并且该仓库要开始issue。还要在issue中创建一个Gitalk的标签(label)进行初始化。否则会报Error Note Found.错误*
      JQLUyQ.jpg

      添加标签

    1. JQODnH.jpg
    1. JQOM1U.jpg

  2. 重新hexo clean，hexo generate重新生成页面。hexo server本地启动即可看到效果：
    JQjFds.jpg
    之所以看到此页面是因为他需要管理员先登录一次，因为在管理员登录后会自动在评论仓库blog_comment的issue中初始化该篇文章的评论信息。管理员登录访问过后效果：
    JQjiZj.jpg

这样基于Gitalk的评论模块就配置成功了，有些主题可能没有适配Gitalk，样式可能会不太好看