实战教程: 个人博客问题修正 pt.3

创建 Github 远程 Repo

这里使用 Github 存储 Waline 服务端, 因此需要先创建它对应的 Github 远程 Repo.

注意:
为行文方便, 这里以 waline-railway.blog.zhaijia.fun 作为示例的域名和 Repo 名.
请勿照抄, 务必将其替换为你自己的域名!

你必须要有一个 Github 账号, 如果没有, 点击此处免费注册.

这里将此 Repo 的类型设置为 “Private” (私有的), 意为其中存放的目录/文件只对你自己可见.

部署 Waline 服务端至 Railway

Railway 是一个可免费使用的 Serverless 部署平台, 免费套餐包含 5 美元/月的免费额度, 且仅限当月使用, 不累计. 一旦运行中的部署的花费超过当月的免费额度, 其将被关闭.

为 Railway 授权

点击此处部署.

创建 Railway App

在进行下一步之前先去 Github 删除刚才创建的存储库 waline-railway.blog.zhaijia.fun.

这是因为本着权限最小化原则, 此前为 Railway 授权时只指定了一个存储库, 也就是 waline-railway.blog.zhaijia.fun, 但 Railway 接下来必须创建而不能选择该存储库, 因此必须先将其删除, 再由 Railway 重新创建.

这里将此 Repo 的类型设置为 “Private” (私有的), 意为其中存放的目录/文件只对你自己可见.

其余的 PostgreSQL 数据库的配置无需修改, 直接点击右下角的 “Deploy” 开始部署.

等待直至部署完毕, 并记下地址 (图中红线所示的部分), 类似: xxx.xxx.railway.app

初始化数据库

点击左侧的 “PostgreSQL”, 再点击右侧的 “Query”, 粘贴下列 SQL 语句:

 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

CREATE SEQUENCE wl_comment_seq;

CREATE TABLE wl_comment (
  id int check (id > 0) NOT NULL DEFAULT NEXTVAL ('wl_comment_seq'),
  user_id int DEFAULT NULL,
  comment text,
  insertedAt timestamp(0) with time zone NOT NULL DEFAULT CURRENT_TIMESTAMP,
  ip varchar(100) DEFAULT '',
  link varchar(255) DEFAULT NULL,
  mail varchar(255) DEFAULT NULL,
  nick varchar(255) DEFAULT NULL,
  pid int DEFAULT NULL,
  rid int DEFAULT NULL,
  sticky boolean DEFAULT NULL,
  status varchar(50) NOT NULL DEFAULT '',
  "like" int DEFAULT NULL,
  ua text,
  url varchar(255) DEFAULT NULL,
  createdAt timestamp(0) with time zone NULL DEFAULT CURRENT_TIMESTAMP,
  updatedAt timestamp(0) with time zone NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (id)
) ;


CREATE SEQUENCE wl_counter_seq;

CREATE TABLE wl_counter (
  id int check (id > 0) NOT NULL DEFAULT NEXTVAL ('wl_counter_seq'),
  time int DEFAULT NULL,
  url varchar(255) NOT NULL DEFAULT '',
  createdAt timestamp(0) with time zone NULL DEFAULT CURRENT_TIMESTAMP,
  updatedAt timestamp(0) with time zone NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (id)
) ;


CREATE SEQUENCE wl_users_seq;

CREATE TABLE wl_users (
  id int check (id > 0) NOT NULL DEFAULT NEXTVAL ('wl_users_seq'),
  display_name varchar(255) NOT NULL DEFAULT '',
  email varchar(255) NOT NULL DEFAULT '',
  password varchar(255) NOT NULL DEFAULT '',
  type varchar(50) NOT NULL DEFAULT '',
  label varchar(255) DEFAULT NULL,
  url varchar(255) DEFAULT NULL,
  avatar varchar(255) DEFAULT NULL,
  github varchar(255) DEFAULT NULL,
  twitter varchar(255) DEFAULT NULL,
  facebook varchar(255) DEFAULT NULL,
  google varchar(255) DEFAULT NULL,
  weibo varchar(255) DEFAULT NULL,
  qq varchar(255) DEFAULT NULL,
  "2fa" varchar(32) DEFAULT NULL,
  createdAt timestamp(0) with time zone NULL DEFAULT CURRENT_TIMESTAMP,
  updatedAt timestamp(0) with time zone NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (id)
) ;

该 SQL 语句的最新版本在此处.

点击 “Run query”.

注册管理员

点击地址 (图中红线所示的部分)

再点击 “登录” -> “用户注册” (实际地址类似: https://xxx.xxx.railway.app/ui/register), 完成首个用户的注册.

注册完成后, 该用户即为管理员.

点击管理员的名字或在浏览器中访问类似 https://xxx.xxx.railway.app/ui 的地址并使用刚才注册的管理员账号登录后即可对评论, 用户数据进行管理, 也可导入/导出数据.

手动集成 Waline v2.x

Stack 主题 (v3.11.0) 本身已集成 Waline v1.6.0, 但版本较旧.

这里手动集成 Waline v2.x.

1
2
3
4
5
#### 进入对应的博客网站项目目录
cd blog.zhaijia.fun

#### 创建布局目录, 路径类似 themes/hugo-theme-stack 下的同名目录
mkdir -p layouts/partials/comments/provider

在该目录下创建文件 waline.html:

 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
<!-- 脚本文件 -->
<script src="https://unpkg.com/@waline/client@v2/dist/waline.js"></script>
<!-- 样式文件 -->
<link
  rel="stylesheet"
  href="https://unpkg.com/@waline/client@v2/dist/waline.css"
/>
<div id="waline" class="waline-container"></div>
<style>
    .waline-container {
        background-color: var(--card-background);
        border-radius: var(--card-border-radius);
        box-shadow: var(--shadow-l1);
        padding: var(--card-padding);
    }
    .waline-container .vcount {
        color: var(--card-text-color-main);
    }
</style>

{{- with .Site.Params.comments.waline -}}
{{- $config := dict "el" "#waline" "dark" `html[data-scheme="dark"]` -}}
{{- $replaceKeys := dict "serverurl" "serverURL" "requiredmeta" "requiredMeta" "wordlimit" "wordLimit" "pagesize" "pageSize" "avatarcdn" "avatarCDN" "avatarforce" "avatarForce" -}}

{{- range $key, $val := . -}}
    {{- if $val -}}
        {{- $replaceKey := index $replaceKeys $key -}}
        {{- $k := default $key $replaceKey -}}

        {{- $config = merge $config (dict $k $val) -}}
    {{- end -}}
{{- end -}}

<script>
    /// Waline client configuration see: https://waline.js.org/guide/client/intro.html
    Waline.init({{ $config | jsonify | safeJS }});
</script>
{{- end -}}

该文件相比主题内置的 themes/hugo-theme-stack/layouts/partials/comments/provider/waline.html 适配了 Waline v2.x.

这里虽然有两个 waline.html, 但 Hugo 会优先使用 layouts/partials/comments/provider/waline.html.

在网站配置 config.yaml 中设置 Waline

只需在 config.yaml 中查找并修改相关的配置即可.

 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
        # Waline client configuration see: https://waline.js.org/guide/client/intro.html
        waline:
            # Waline 的服务端地址
            serverURL: https://xxx.xxx.railway.app
            # 语言
            lang: zh-CN
            # 表情设置
            emoji:
                - https://unpkg.com/@waline/[email protected]/weibo
                - https://unpkg.com/@waline/[email protected]/bilibili
            # 设置必填项
            requiredMeta:
                - nick
            # 登录模式状态
            login: enable
            # 评论字数限制. 设置为 0 时无限制.
            wordLimit: 0
            # 评论列表分页, 每页条数.
            pageSize: 10
            # 禁用图片上传
            imageUploader: false
            # 是否显示页脚版权信息
            copyright: true
            # 文章评论数统计, 填入字符串时会作为 CSS 选择器.
            comment: false
            # 文章浏览量统计, 填入字符串时会作为 CSS 选择器.
            pageview: false
            locale:
                # 评论框默认文字
                placeholder: 请留言⌨️
                # 评论区为空时的显示文字
                sofa: 欢迎留言👏

启用评论并切换至 Waline:

1
2
3
    comments:
        enabled: true
        provider: waline

页面效果: