关于hexo:HexoAnatolo主题添加gitalk评论系统

6次阅读

共计 1297 个字符,预计需要花费 4 分钟才能阅读完成。

一开始筹备应用 gitment 作为评论零碎,然而搭完发现曾经不可用,随后找到了差不多的 gitalk
gitalk 曾经有很多主题集成,然而很遗憾我应用的 Anatolo 还没有,尝试了下还算简略,当初把大略步骤写一下

相干地址

Anatolo 主题:https://github.com/Ben02/hexo…
gitalk 评论:https://github.com/gitalk/gitalk
md5:https://github.com/blueimp/Ja…(issue label name 不容许超过 50 字符,所以应用 md5 生成 id)

应用

筹备工作

抉择一个公共 github 存储库(已存在或创立一个新的 github 存储库)用于存储评论
创立 GitHub Application,Authorization callback URL 填写博客地址(点此申请)
生成 Client Id 及 Client Secret,复制保留

主题更改

定位到 Anatolo 主题文件夹内,关上 {Anatolo Path}/layout/partial/comments.pug 文件
最下方增加此段代码

if theme.gitalk
    if theme.gitalk.enable == true
        a#comments
        #vcomments(style="margin:0 30px;")
        link(rel='stylesheet' href='https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css')
        script(src='https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js')
        script(src='https://cdn.jsdelivr.net/npm/blueimp-md5@2.19.0/js/md5.min.js')
        script.
            var gitalk = new Gitalk({clientID: '#{theme.gitalk.client_id}',
                clientSecret: '#{theme.gitalk.client_secret}',
                owner: '#{theme.gitalk.owner}',
                repo: '#{theme.gitalk.repo}',
                admin: ['#{theme.gitalk.admin}'],
                id: md5(location.pathname),      // Ensure uniqueness and length less than 50
                distractionFreeMode: false  // Facebook-like distraction free mode
            })
            gitalk.render('vcomments')

增加配置

在主题文件夹下 _config.yml 或根目录下 _config.anatolo.yml 增加 gitalk 配置

gitalk:
  enable: true
  owner: #owner
  repo: #repo name
  admin: #admin name
  client_id: #client_id
  client_secret: #client_secret

成果

正文完
 0