Hexo 增加评论系统

发表于 更新于 分类于 ， 本文字数： 5.5k 阅读时长 ≈ 6 分钟

本站博客基本搭建美化完成了, 我本人不太喜欢花里胡哨的博客, 后续也没有计划加更多的CSS或者JS等动态展示的功能, 不过看别的博客都有个评论的功能, 我觉得挺好玩, 记录一下过程

Hexo 博客 NexT 主题的安装使用 | Julian's blog

第三方评论系统之我见 | 云游君的小站

快速上手 | Waline

注册LeanCloud账号(已弃用)

个人更倾向于数据存储在自己手中, 官方的部署方法已弃用

进入LeanCloud国际版, 进行注册, 🔗

LeanCloud国际版

填写用户名, 密码, 邮箱等等,然后需要验证邮箱并添加手机号, 不然无法创建App

创建应用
创建应用

创建完成后, 点击应用设置⚙

进入应用设置

左侧tab页, 点击应用凭证, 然后分别复制AppID+AppKey+MasterKey

应用凭证

准备Docker环境

多数据库服务支持 | Waline

因为我的博客体量并不是很大, 因此我选用SQLite作为数据库, 参照官方手册, 需要先下载初始文件

环境变量名称 必填 默认值 备注
SQLITE_PATH ✅ SQLite 数据库文件的路径，该路径不包含文件名本身
SQLITE_DB waline SQLite 数据库文件名，若文件名变化需要修改该字段值
SQLITE_PREFIX wl_ SQLite 数据表的表前缀
JWT_TOKEN ✅ 用户登录密钥，随机字符串即可

使用Docker构建应用后端服务器

独立部署 | Waline

官方Dockerfile: waline/Dockerfile at main · walinejs/waline

  1. 官方手册推荐方法LeanCloud部署(已废弃)
1
2
3
4
5
6
7
8
9
# 填入上面拿到的AppID等信息
LEAN_ID='xxxx'
LEAN_KEY='xxxx'

docker run -d \
  -e LEAN_ID=${LEAN_ID} \
  -e LEAN_KEY=${LEAN_KEY} \
  -p 8360:8360 \
  lizheming/waline
  1. 使用SQLite作为数据库部署, 通过官方Dockerfile观察可以发现, 全部应用放置于/app目录
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 生成随机密码
RANDOM_TOKEN=$(openssl rand -hex 16)
# 进入博客目录
cd blog

# 下载SQLite文件
wget "https://github.com/walinejs/waline/raw/main/assets/waline.sqlite"

# 指定运行变量
docker run -d \
  -e SQLITE_PATH=/app \
  -e SQLITE_DB='waline' \
  -e JWT_TOKEN=${RANDOM_TOKEN} \
  -v $PWD/waline.sqlite:/app/waline.sqlite \
  -p 8360:8360 \
  lizheming/waline

# 输出注册地址及Token
echo "请通过以下地址进行注册, 首个注册用户会成为管理员"
echo "Register URL: http://localhost:8360/ui/register"
echo "JWT_TOKEN: ${RANDOM_TOKEN}"

为Hexo博客增加支持

官方提示支持NexT主题方式: waline/packages/hexo-next at main · walinejs/waline

一篇说明非常详细的博文: Hexo 博客 NexT 主题的安装使用 | Julian's blog

unpkg.com国内代理: unpkg.com太慢了 unpkg.com国内镜像地址_WonThing的博客-CSDN博客_unpkg国内镜像

Github原文: blog/国内高速前端 Unpkg CDN 替代方案.md at main · lecepin/blog

安装主题支持包

1
npm install @waline/hexo-next --save

添加以下内容到_config.yml中

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
# Waline Config File
# For more information:
# - https://waline.js.org
# - https://waline.js.org/reference/component.html
waline:
  # New! Whether enable this plugin
  enable: true

  # Waline server address url, you should set this to your own link
  serverURL: https://comments.chowrex.com:5001

  # Waline library CDN url, you can set this to your preferred CDN
  # libUrl: https://unpkg.com/@waline/client@v2/dist/waline.js

  # Waline CSS styles CDN url, you can set this to your preferred CDN
  # cssUrl: https://unpkg.com/@waline/client@v2/dist/waline.css
  
  # 修改为jsDelivr代理, 国内被墙
  # cssUrl: https://cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline.css
  
  # 饿了么CDN会出现搜索展示异常问题
  # cssUrl: https://npm.elemecdn.com/@waline/client@v2/dist/waline.css
  
  # 知乎CDN对这个没有收录
  # cssUrl: https://unpkg.zhimg.com/@waline/client@v2/dist/waline.css
  
  # 自己搞吧, 放到自己的七牛云上
  libUrl: https://blog-static.chowrex.com/waline/waline.js
  cssUrl: https://blog-static.chowrex.com/waline/waline.css

  # Custom locales
  locale:
    placeholder: 留下点足迹呗~  # Comment box placeholder

  # If false, comment count will only be displayed in post page, not in home page
  commentCount: true

  # Pageviews count, Note: You should not enable both `waline.pageview` and `leancloud_visitors`.
  pageview: false

  # Custom emoji
  emoji:
  # 修改为国内代理
    - https://npm.elemecdn.com/@waline/emojis@1.0.1/weibo
    - https://npm.elemecdn.com/@waline/emojis@1.0.1/alus
    - https://npm.elemecdn.com/@waline/emojis@1.0.1/bilibili
    - https://npm.elemecdn.com/@waline/emojis@1.0.1/qq
    - https://npm.elemecdn.com/@waline/emojis@1.0.1/tieba
  
  #   - https://unpkg.com/@waline/emojis@1.0.1/weibo
  #   - https://unpkg.com/@waline/emojis@1.0.1/alus
  #   - https://unpkg.com/@waline/emojis@1.0.1/bilibili
  #   - https://unpkg.com/@waline/emojis@1.0.1/qq
  #   - https://unpkg.com/@waline/emojis@1.0.1/tieba
  #   - https://unpkg.com/@waline/emojis@1.0.1/tw-emoji

  # Comment infomation, valid meta are nick, mail and link
  meta:
    - nick
    - mail
    - link

  # Set required meta field, e.g.: [nick] | [nick, mail]
  requiredMeta:
    - nick

  # Language, available values: en-US, zh-CN, zh-TW, pt-BR, ru-RU, jp-JP
  lang: zh-CN

  # Word limit, no limit when setting to 0
  # wordLimit: 0

  # Whether enable login, can choose from 'enable', 'disable' and 'force'
  # login: enable

  # comment per page
  pageSize: 10

搞完CSS和JS文件, 发觉还是应该把所有的emoji也搞到自己的七牛云上, 避免饿了么万一跑路, 当然是不可能的, 以防万一

这个是官方的Repo: walinejs/emojis: Emojis Repo for Waline

七牛云官方SDK: 软件开发工具包 - 七牛开发者中心

七牛云官方Python手册: Python SDK_SDK 下载_对象存储 - 七牛开发者中心

首先进入密钥管理, 添加密钥, 然后复制AKSK

创建密钥

实现七牛云批量上传功能

按照官方给的文档, 修改一下代码, 实现批量上传功能

1
pip install qiniu
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
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
Created on Thu May 19 10:15:08 2022

@author: Rex Chow
"""

import os
from pathlib import Path
from qiniu import Auth, put_file, etag

# 需要填写你的 Access Key 和 Secret Key
ACCESS_KEY = 'AK'
SECRET_KEY = 'SK'
# 要上传的空间
BUCKET_NAME = 'BUCKET'
# 上传后保存的路径
PREFIX = 'waline/emojis'
# 本地目录
LOCAL_DIR = Path('~/Download/emojis-main/')

# 构建鉴权对象
req = Auth(ACCESS_KEY, SECRET_KEY)

for root, dirs, files in os.walk(LOCAL_DIR):
    for file in files:
        # 提取本地路径
        loc_path = Path(os.path.join(root, file))
        # 提取相对路径, 用于构造对象存储Key
        rel_path = os.path.relpath(loc_path, start=LOCAL_DIR)

        key = os.path.join(PREFIX, rel_path)
        print(f'Uploading: {loc_path} -> {key}')

        # 生成上传 Token，可以指定过期时间等
        token = req.upload_token(BUCKET_NAME, key, 600)
        ret, info = put_file(token, key, loc_path, version='v2')
        assert ret['key'] == key
        assert ret['hash'] == etag(loc_path)

修改_config.yml, 更新使用七牛云

1
2
3
4
5
6
7
8
9
10
11
12
...
  # Custom emoji
  emoji:
  # 修改为国内代理
    - https://blog-static.chowrex.com/waline/emojis/weibo
    - https://blog-static.chowrex.com/waline/emojis/alus
    - https://blog-static.chowrex.com/waline/emojis/bilibili
    - https://blog-static.chowrex.com/waline/emojis/qq
    - https://blog-static.chowrex.com/waline/emojis/tieba
    - https://blog-static.chowrex.com/waline/emojis/tw-emoji
...

完成, 现在评论可以以最快速度载入~