Hexo - Next使用GitTalk评论系统
其他评论系统教程:
[[Hexo-Next使用Twikoo评论系统]]
一、介绍
- 使用 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: |
特别的,在Next8版本中,站点配置文件中新增了一个配置,这里需要修改为gittalk
,如果采用其他评论系统,请不要开启默认显示的评论系统(此处不支持的话)
# 多评论系统支持 |
官方可选配置:
- 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集成完成
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Bai's Blog!