Hexo - Next使用GitTalk评论系统

发表于 更新于 分类于 ， 阅读次数： 阅读次数： Artalk： 本文字数： 2.8k 阅读时长 ≈ 3 分钟

其他评论系统教程：
[[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包：

1
npm install gitalk --save

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

1
2
3
4
5
6
7
8
9
10
11
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，如果采用其他评论系统，请不要开启默认显示的评论系统（此处不支持的话）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 多评论系统支持
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:
    1
    2
    3
    4
    5
    6
    {
      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集成完成