hexo+github建站之评论
hexo搭建的博客下,有多种评论系统可供选择:Disqus、多说和友言等。
Valine
Valine是基于Leancloud的评论系统,无需额外注册账号,无后端,Next可完美适配(最新的Next删除的Valine,不过之前的Next代码库可以)。
注册 LeanCloud
注册登陆后,访问控制台,创建应用,选择开发版
创建好之后就生成了
App ID
和App Key
,之后再设置 -> 应用keys也可以查到点击存储,查看是否有
Comment
和Counter
,没有则创建,权限设为无限制然后点击设置 > 安全中心 ,将除了数据存储的服务全部关闭。
配置Next主题
_config.yaml
文件1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18# Valine
# For more information: https://valine.js.org, https://github.com/xCss/Valine
valine:
enable: true
appid: # Your leancloud application appid
appkey: # Your leancloud application appkey
notify: false # Mail notifier
verify: false # Verification code
placeholder: Just go go # Comment box placeholder
avatar: mm # Gravatar style
guest_info: nick,mail,link # Custom comment header
pageSize: 10 # Pagination size
language: # Language, available values: en, zh-cn
visitor: false # Article reading statistic
comment_count: true # If false, comment count will only be displayed in post page, not in home page
recordIP: false # Whether to record the commenter IP
serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
#post_meta_order: 0
其他设置
Valine支持头像配置、邮件提醒、多语言支持、文章阅读量统计及自定义表情。
指定文章(页面)评论功能是否开启
在 Hexo 博客中,评论的功能是在所有页面都默认开启的,但是有的时候我们在页面上不需要显示评论功能,例如分类,标记页面我们并不需要评论功能。
我们可以在 Front-matter 中通过comments
属性设置true或false控制该页面或者是文章的评论功能是否打开,如我设置标签页面的评论功能关闭:
1 | title: 标签 |
自定义头像
Gitment
OAuth Application
OAuth Application是一种认证机制,可参考简述 OAuth 2.0 的运作流程。
使用gitmen第一步就是需要注册一个新的 OAuth Application。
- Application name,可以随便填写。
- Homepage URL,网站主页,可以填写github给的网址(以io结尾)。
- Application description,应用描述,可不填。
- Authorization callback URL,应用调用返回页。可和 Homepage URL一样,最好填写私有网址。
注册之后得到一个 client ID 和一个 client secret,这两个是之后要用到的值。也可以通过以下方式查询
1 | github settings -->> Developer settings -->> OAuth Apps |
gitment配置
gitment创作者列出的配置方法比较简单,本文以next主题为例进行详细介绍。
配置主题配置文件。
在主题配置文件_config.yaml中添加以下代码
1
2
3
4
5
6
7
8
9# Gitment
# Introduction: https://imsun.net/posts/gitment-introduction/
gitment:
enable: true
githubID: your github name
repo: your repository name
ClientID: --
ClientSecret: --
lazy: true- githubID,github 账号的 name。配置id不生效,会报错。获取方式,之前的文章已经介绍。
- repo,仓库名,用来存放评论。gitment以github issues为基础,所以此仓库可以是属性为public的任意仓库。
- ClientID、ClientSecret,OAuth Application相关。
- lazy,懒加载。进入文章后,评论全部显示(false)或者仅显示一个按钮(true)。
懒加载按钮显示设置
主题languages是一些文字的各种语言版本。在en.yml文件中添加
1
gitmentbutton: Show comments from Gitment
在zh-Hans.yml文件中添加
1
gitmentbutton: 显示 Gitment 评论
其他语言课根据个人需求进行配置。
按钮事件
在主题layout/_partials/comments.swig文件中添加代码,以使文件最后类似
1
2
3
4
5
6
7
8
9
10
11
12{% elseif theme.valine.appid and theme.valine.appkey %}
<div id="vcomments"></div>
{% elseif theme.gitment.enable %}
{% if theme.gitment.lazy %}
<div onclick="ShowGitment()" id="gitment-display-button">{{ __('gitmentbutton') }}</div>
<div id="gitment-container" style="display:none"></div>
{% else %}
<div id="gitment-container"></div>
{% endif %}
{% endif %}
</div>
{% endif %}文件中增加了“elseif theme.gitment.enable” 事件域。
增加对应页面生成JS代码
在主题layout/_third-party/comments/目录中添加文件gitment.swig,内容为
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37{% if theme.gitment.enable %}
{% set owner = theme.gitment.githubID %}
{% set repo = theme.gitment.repo %}
{% set cid = theme.gitment.ClientID %}
{% set cs = theme.gitment.ClientSecret %}
<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
{% if not theme.gitment.lazy %}
<script type="text/javascript">
var gitment = new Gitment({
id: window.location.pathname,
owner: '{{owner}}',
repo: '{{repo}}',
oauth: {
client_id: '{{cid}}',
client_secret: '{{cs}}',
}});
gitment.render('gitment-container');
</script>
{% else %}
<script type="text/javascript">
function ShowGitment(){
document.getElementById("gitment-display-button").style.display = "none";
document.getElementById("gitment-container").style.display = "block";
var gitment = new Gitment({
id: window.location.pathname,
owner: '{{owner}}',
repo: '{{repo}}',
oauth: {
client_id: '{{cid}}',
client_secret: '{{cs}}',
}});
gitment.render('gitment-container');
}
</script>
{% endif %}
{% endif %}文件中使用了两个线上文件,可以把路径复制,在浏览器(谷歌可用)中打开来查看。
添加完文件后,在同目录index.swig文件中添加
1
{% include 'gitment.swig' %}
以引入新创建的文件。
设置CSS样式
在主题source/css/_common/components/third-party/目录下添加gitment.styl文件,设置button的样式
1
2
3
4
5
6
7
8
9
10
11
12
13#gitment-display-button{
display: inline-block;
padding: 0 15px;
color: #0a9caf;
cursor: pointer;
font-size: 14px;
border: 1px solid #0a9caf;
border-radius: 4px;
}
#gitment-display-button:hover{
color: #fff;
background: #0a9caf;
}在目录third-party.styl中添加
1
@import "gitment";
以引入新创建的文件。
至此,评论配置完成。
调试点
文件中空格、结尾空行最好保持不变。
本地只能调试是否有页面错误,其他功能最好线上调试。
调试引用的线上js代码时,可以下载到本地进行修改。代码引用本地修改后的文件。例如替换为
1
src="{{ url_for(theme.js) }}/src/test.js
test.js为下载到本地加入调试信息的文件。
最易出错的地方应该是字段置换错误(layout/_third-party/comments/gitment.swig文件调用js时,字段已经置换)。可进入浏览器调试模式(F12)进行调试。
问题
redirect_uri_mismatch
一般为 Authorization callback URL 设置错误。设置为自己的网站首页,例如”https://chengqian90.com/"。
初始化评论时,Error: Validation Failed
更改gitment.swig 文件中gitment ID。
1
2
3
4
5
6
7function renderGitment(){
var gitment = new {{CommentsClass}}({
- id: window.location.pathname,
+ id: '{{ page.date }}',
owner: '{{ theme.gitment.github_user }}',
repo: '{{ theme.gitment.github_repo }}',
……