本博客使用评论插件 Gitalk+Valine

摘要:Gitalk与Valine的使用方法。

Gitalk 地址

Gitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件。

  • 使用 GitHub 登录
  • 支持多语言 [en, zh-CN, zh-TW, es-ES, fr, ru]
  • 支持个人或组织
  • 无干扰模式(设置 distractionFreeMode 为 true 开启)
  • 快捷键提交评论 (cmd|ctrl + enter)

博客主题:Hexo-theme-diaspora 默认含有gitalk.

需要设置你的 GitHub Issue项目,首先需要到GitHub上去新建一个仓库用于存放评论的内容,在设置中打开isue功能。

第二步需要注册一个Github Application 申请地址:https://github.com/settings/applications/new

完成之后便可得到Client ID 和 Client Secret。接下来安装布置即可。每个页面第一次进入需要注册Github Application的账号登录评论模块后刷新页面,就可以正常使用了。

安装gitalk如下:

安装

两种方式

  • 直接引入
1
2
3
4
5
6
7
<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>

<!-- or -->

<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
  • npm 安装
1
2
3
>npm i --save gitalk
>import 'gitalk/dist/gitalk.css'
>import Gitalk from 'gitalk'

使用

首先,您需要选择一个公共github存储库(已存在或创建一个新的github存储库)用于存储评论,

然后需要创建 GitHub Application,如果没有 点击这里申请Authorization callback URL 填写当前使用插件页面的域名。

最后, 您可以选择如下的其中一种方式应用到页面:

方式1

添加一个容器:

1
><div id="gitalk-container"></div>

用下面的 Javascript 代码来生成 gitalk 插件:

1
2
3
4
5
6
7
8
9
10
11
>var gitalk = new Gitalk({
clientID: 'GitHub Application Client ID',
clientSecret: 'GitHub Application Client Secret',
repo: 'GitHub repo',
owner: 'GitHub repo owner',
admin: ['GitHub repo owner and collaborators, only these guys can initialize github issues'],
id: location.pathname, // Ensure uniqueness and length less than 50
distractionFreeMode: false // Facebook-like distraction free mode
>})

>gitalk.render('gitalk-container')

方式2:在React使用

使用以下代码引入Gitalk组件

1
>import GitalkComponent from "gitalk/dist/gitalk-component";

按以下方式在React中使用Gitalk组件

1
2
3
4
5
><GitalkComponent options={{
clientID: "...",
// ...
// 设置项
>}} />

设置

  • 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]。

  • 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.herokuapp.com/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) 提交评论.

实例方法

  • render(String/HTMLElement)

    初始化渲染并挂载插件。

TypeScript

已经包括了配置项和Gitalk类的类型定义,不包括React组件的类型定义。

Valine 地址

Valine 诞生于2017年8月7日,是一款基于LeanCloud的快速、简洁且高效的无后端评论系统。

特性

  • 快速
  • 安全
  • Emoji 😉
  • 无后端实现
  • MarkDown 全语法支持
  • 轻量易用
  • 文章阅读量统计 v1.2.0+

效果如下:

​ Valine的后台数据是放在了LeanCloud里面,所以需要注册一个账号,实名认证后才可创建应用,之后获取应用的APP ID 和 APP Key即可使用;

进入控制台后点击左下角创建应用,应用创建好以后,进入刚刚创建的应用,选择左下角的设置>应用Key,然后就能看到你的APP IDAPP Key了。

安装Valine如下:

修改初始化对象中的appIdappKey的值为上面刚刚获取到的值即可(其他可以默认)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
><head>
..
<script src='//unpkg.com/valine/dist/Valine.min.js'></script>
...
></head>
><body>
...
<div id="vcomments"></div>
<script>
new Valine({
el: '#vcomments',
appId: 'Your appId',
appKey: 'Your appKey'
})
</script>
></body>

npm

Valine 现已发布到npm,可以直接用命令安装:

1
2
># Install valine
>npm install valine --save
1
2
3
4
5
6
7
8
9
>// Use import
>import Valine from 'valine';
>// or Use require
>const Valine = require('valine');

>new Valine({
el:'#vcomments',
// other config
>})

评论数据管理

由于Valine 是无后端评论系统,所以也就没有开发评论数据管理功能。请自行登录Leancloud应用管理。

具体步骤:登录>选择你创建的应用>存储>选择Class Comment,然后就可以尽情的发挥你的权利啦(~ ̄▽ ̄)~

当然,你也可以配合 @DesertsP 开发的 Valine-Admin 进行评论数据管理

安全域名

为了你的数据安全,请设置自己的安全域名

具体配置项见:https://valine.js.org/configuration.html