博客 / 詳情

返回

Hexo-Anatolo主題添加gitalk評論系統

一開始準備使用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,複製保留
image.png

主題更改

定位到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

效果

image.png

user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.