0%

hexo博客打造评论系统

发表于 更新于 阅读次数： Valine：
本文字数： 2.5k 阅读时长 ≈ 2 分钟

  本文主要讲述使用gitalk和Valine两种方式打造hexo博客评论系统的完整过程，并讲述两种评论系统的使用感受，本人使用它的主题为next，其他主题配置可能略有不同，如果在配置过程中产生任何问题，欢迎留言交流。

image

使用gitalk打造评论系统

1. Github注册OAuth应用

  在GitHub上注册新应用，链接：https://github.com/settings/applications/new

image

参数说明：

  • Application name： # 应用名称，随意

  • Homepage URL： # 网站URL

  • Application description # 描述，随意

  • Authorization callback URL：# 网站URL

  点击注册后，页面跳转如下，其中Client ID和Client Secret在后面的配置中需要用到，到时复制粘贴即可：

image

2. 新建gitalk.swig

  新建themes/next/layout/_third-party/comments/gitalk.swig文件，并添加内容：

:themes/next/layout/_third-party/comments/gitalk.swig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% if page.comments && theme.gitalk.enable %}
  <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
  <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
  <script src="/js/src/md5.min.js"></script>
   <script type="text/javascript">
        var gitalk = new Gitalk({
          clientID: '{{ theme.gitalk.ClientID }}',
          clientSecret: '{{ theme.gitalk.ClientSecret }}',
          repo: '{{ theme.gitalk.repo }}',
          owner: '{{ theme.gitalk.githubID }}',
          admin: ['{{ theme.gitalk.adminUser }}'],
          id: md5(location.pathname), # 使用md5确保id长度不超过50，关键
          distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
        })
        gitalk.render('gitalk-container')
    </script>
{% endif %}

  为了配合其中的md5函数能够使用，这里要引入js脚本。将 md5.min.js 文件下载下来放到 themes/next/source/js/src/ 路径下。

3. 修改comments.swig

  修改themes/next/layout/_partials/comments.swig，添加内容如下，与前面的elseif同一级别上：

1
2
{% elseif theme.gitalk.enable %}
 <div id="gitalk-container"></div>

image

4. 修改index.swig

  修改themes/next/layout/_third-party/comments/index.swig，在最后一行添加内容：

1
{% include 'gitalk.swig' %}

5. 新建gitalk.styl

  新建/source/css/_common/components/third-party/gitalk.styl文件，添加内容：

1
2
3
4
.gt-header a, .gt-comments a, .gt-popup a
  border-bottom: none;
.gt-container .gt-popup .gt-action.is--active:before
  top: 0.7em;

6. 修改third-party.styl

  修改themes/next/source/css/_common/components/third-party/third-party.styl，在最后一行上添加内容，引入样式：

1
@import "gitalk";

7. 修改_config.yml

  在主题配置文件themes/next/next/_config.yml中添加如下内容：

themes/next/next/_config.yml
1
2
3
4
5
6
7
8
gitalk:
  enable: true
  githubID: github帐号
  repo: 仓库名称
  ClientID: Client ID
  ClientSecret: Client Secret
  adminUser: github帐号 #指定可初始化评论账户
  distractionFreeMode: true

8.修改index.md文件使about、tag、categories页面不显示评论页面

  上面的操作步骤完成后，tag的页面显示如下,about和categories页面类似:

image

​

  这里只需要在source/文件夹下分别新建 about、categories、tags 文件夹，每个文件夹里面都新建一个 index.md 文件（已有的直接添加comment: false），内容为

1
2
3
4
5
---
title:  # 标题
type: "about"  # about、categories、tags
comments: false
---

  就可以正常显示了

image

分类页面

最终呈现效果：

image

博主使用github账号登录后其他用户可以正常使用评论

image

部署

9.文章评论自动初始化

  到上面一步虽然评论系统已经可以使用，但是每篇文章都需要博主去手工进行初始化，非常的繁琐，因此在这里提供一个自动化进行评论初始化的脚本，可实现直接对全部脚本的初始化。

  要使用该脚本首先要在github上穿件一种新的认证方式——Personal access token，点击Generate New token，如下填写

image

  保存Token:

image

  安装依赖：

1
sudo gem install faraday activesupport sitemap-parser

  在根目录下新建gitalk_inti.rb,内容如下：

/gitalk.rb
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
username = "xxx" # GitHub 用户名
token = "xxx"  # GitHub Token
repo_name = "xxx.github.io" # 存放 issues
sitemap_url = "https://anchorety.github.io/sitemap.xml" # sitemap
kind = "gitalk" # "Gitalk" or "gitment"

require 'open-uri'
require 'faraday'
require 'active_support'
require 'active_support/core_ext'
require 'sitemap-parser'
require 'digest'

puts "正在检索URL"

sitemap = SitemapParser.new sitemap_url
urls = sitemap.to_a

puts "检索到文章共#{urls.count}个"

conn = Faraday.new(:url => "https://api.github.com") do |conn|
  conn.basic_auth(username, token)
  conn.headers['Accept'] = "application/vnd.github.symmetra-preview+json"
  conn.adapter  Faraday.default_adapter
end

commenteds = Array.new
`
  if [ ! -f .commenteds ]; then
    touch .commenteds
  fi
`
File.open(".commenteds", "r") do |file|
  file.each_line do |line|
      commenteds.push line
  end
end

urls.each_with_index do |url, index|
  url.gsub!(/index.html$/, "")

  if commenteds.include?("#{url}\n") == false
    url_key = Digest::MD5.hexdigest(URI.parse(url).path)
    response = conn.get "/search/issues?q=label:#{url_key}+state:open+repo:#{username}/#{repo_name}"

    if JSON.parse(response.body)['total_count'] > 0
      `echo #{url} >> .commenteds`
    else
      puts "正在创建: #{url}"
      title = open(url).read.scan(/<title>(.*?)<\/title>/).first.first.force_encoding('UTF-8')
      response = conn.post("/repos/#{username}/#{repo_name}/issues") do |req|
        req.body = { body: url, labels: [kind, url_key], title: title }.to_json
      end
      if JSON.parse(response.body)['number'] > 0
        `echo #{url} >> .commenteds`
        puts "\t↳ 已创建成功"
      else
        puts "\t↳ #{response.body}"
      end
    end
  end
end

  最后可直接输入：

1
ruby gitalk_init.rb

网上大量自动初始化脚本多次提交会出现多次创建issue问题，该脚本不存在多提交多次创建issue的问题，可以放心使用。

使用Valine打造评论系统

  Valine 是基于 LeanCloud 作为数据存储的，是一款商用的软件，与gitalk相比具有以下优势：

  1. 稳定性更好
  2. 不存在初始化问题
  3. 自带了文章阅读量显示功能
  4. 具备更加方便的邮箱提醒功能

下面将对使用Valine打造评论系统的详细过程进行介绍：

1.账号注册

  因为是商用软件，因此使用Valine首先要进行的就是登陆LeanCloud网站进行账号注册。

因为网络安全法的出台，现在LeanCloud账号注册必选要进行实名认证后才能正常使用

2.创建应用

  点击创建应用，输入应用名称，选择开发版进行创建。

image

  创建成功后，出现界面

image

3. 打开应用存储，创建存储表

  打开应用，选择左边的存储，进入后点击创建Class，分别创建Counter和Comment两个Class，创建时全向都选择无任何限制，面向全部用户。

Counter为文章阅读计数存储表，Comment为评论存储表。

  创建成功后如下：

image

4.关闭其他服务，设置Web安全域名

  点击左侧导航栏设置选项，点击安全中心，关闭除数据存储外其他选型，然后在Web安全域名中填写博客地址。

image

5.点击应用key，获取应用的AppID、AppKey

image

6.修改主题配置文件进行配置

  打开主题目录下_config.yml文件搜索valine对其进行配置。

themes/next/_config.yml
1
2
3
4
5
6
7
8
valine:
  enable: true   
  appid: xxx #上面保存的APPID
  appkey: xxx #上面保存的AppKey
  visitor: true #阅读统计
  guest_info: nick,mail #评论用户信息设置
-  language: zh-CN
+  language: zh-cn

这里language只能是小写，大写会造成评论区域不显示

  博客重新部署后，就可以正常使用Valine评论了。

image

参考文献