其他评论系统教程:
[[Hexo-Next使用Twikoo评论系统]]

一、介绍

官网:Gitalk Demo | Aotu.io「凹凸实验室」

  • 使用 GitHub 登錄
  • 支持多語言 [en, zh-CN, zh-TW, es-ES, fr, ru, de, pl, ko, fa, ja]
  • 支持個人或組織
  • 無干擾模式(設置 distractionFreeMode 為 true 開啟)
  • 快捷鍵提交評論 (cmd|ctrl + enter)

二、安装配置

2.1、修改获取Github信息

访问GitHub,登陆自己的账户,选择个人设置中Developer setting

点击New Oauth app创建一个新的应用

填写相关信息:

  • Application name:应用名称
  • Homepage URL:应用地址
  • Application description:应用描述
  • Authorization callback URL:应用授权后的回调地址
  • Enable Device Flow:不需要开启

填写成功之后,记下这里的Client Id、ClientSecret,等下修改站点配置文件会使用到

2.2、增加主题支持配置

如果Next v7以上版本应该已经内置了Gittalk插件,进行开启即可,如果没有,请使用如下进行安装

导入Npm包:

npm install gitalk --save

在Next主题_config加入配置文件:Next中内置的话,配置文件是一样的,这里建议不要开启这个无干扰模式,可能会与主题神色模式冲突。

gitalk:
enable: true # 是否开启
github_id: gitHUb用户名
repo: gitTalk存储的仓库地址
client_id: 你的GithubApp Clinet ID
client_secret: GithubApp Client密钥
admin_user: 仓库管理员
distraction_free_mode: true # 评论是否开启遮罩,无干扰模式
proxy: https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token # 官方Github的登陆代理,默认不需要修改
# Available values: en | es-ES | fr | ru | zh-CN | zh-TW
language: zh-CN # 显示的语言

特别的,在Next8版本中,站点配置文件中新增了一个配置,这里需要修改为gittalk,如果采用其他评论系统,请不要开启默认显示的评论系统(此处不支持的话)

# 多评论系统支持
comments:
# 菜单或者按钮切换 buttons tabs
style: tabs
# 默认显示的评论系统
# Available values: disqus | disqusjs | changyan | livere | gitalk | utterances
active:
# 是否记住访问者选择的评论系统
storage: true
# 是否开启懒加载
lazyload: true
# 修改评论系统导航栏的优先级
nav:
#disqus:
# text: Load Disqus
# order: -1
#gitalk:
# order: -2

官方可选配置:

  • clientID String
    必須. GitHub Application Client ID.
  • clientSecret String
    必須. GitHub Application Client Secret.
  • repo String
    必須. GitHub repository.
  • owner String
    必須. GitHub repository 所有者,可以是個人或者組織。
  • admin Array
    必須. GitHub repository 的所有者和合作者 (對這個 repository 有寫權限的用戶)。
  • id String
    Default: location.href.
    頁面的唯一標識。長度必須小於50。
  • number Number
    Default: -1.
    頁面的 issue ID,若未定義number屬性則會使用id進行定位。
  • labels Array
    Default: ['Gitalk'].
    GitHub issue 的標籤
  • title String
    Default: document.title.
    GitHub issue 的標題。
  • body String
    Default: location.href + header.meta[description].
    GitHub issue 的內容。
  • language String
    Default: navigator.language || navigator.userLanguage.
    設置語言,支持 [en, zh-CN, zh-TW, es-ES, fr, ru, de, pl, ko, fa, ja]。
  • perPage Number
    Default: 10.
    每次加載的數據大小,最多 100。
  • distractionFreeMode Boolean
    Default: false。
    類似Facebook評論框的全屏遮罩效果.
  • pagerDirection String
    Default: ‘last’
    評論排序方式, last為按評論創建時間倒敘,first為按創建時間正序。
  • createIssueManually Boolean
    Default: false.
    如果當前頁面沒有相應的 isssue 且登錄的用戶屬於 admin,則會自動創建 issue。如果設置為 true,則顯示一個初始化頁面,創建 issue 需要點擊 init 按鈕。
  • proxy String
    Default: https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token.
    GitHub oauth 請求到反向代理,為了支持 CORS。 為什麼要這樣?
  • flipMoveOptions Object
    Default:
    {
    staggerDelayBy: 150,
    appearAnimation: 'accordionVertical',
    enterAnimation: 'accordionVertical',
    leaveAnimation: 'accordionVertical',
    }
    評論列表的動畫。 參考
  • enableHotKey Boolean
    Default: true.
    啟用快捷鍵(cmd|ctrl + enter) 提交評論.

2.3、进行一键三连部署博客

  • hexo clean
  • hexo g
  • hexo deploy
  • hexo server:本机使用NodeJs进行Http服务(发布为静态不需要执行)

此时,打开自己站点进行初始化GItTalk,如果为初始化会显示如下界面,点击使用Github进行登陆,当认证成功后会进行创建评论,注意每个博文都需要进行授权开启

授权成功之后,显示效果如下:

至此GitTalk集成完成