Neo's 🪴

Ctrl + K

SearchSearch

#hugo #waline 为静态博客搭建评论系统 · yoli の 树洞 bot

Mar 23, 20248 min read

views, comments.

hugowaline 为静态博客搭建评论系统 · yoli の 树洞 bot

Omnivore

Read on Omnivore

Read Original

date_saved: 2024-03-22 02:01:30

date_published: 2023-08-04 02:11:00

Full Content:

由于静态博客没有自带的数据库, 不能在后台进行数据存储和管理, 所以往往都没有用户评论功能, 这样为了实现评论功能, 常见的解决方案是在网站加入第三方评论插件, 比如disqus \ valine等, 或者是引入一些平台的用户评论系统, 比如GitHub平台(评论者需要注册GitHub账号), 据说valine有用户数据泄漏的风险, 所以最终选择了使用valine的衍生版waline评论系统, 搭建时接入的是由使用者自主注册管理的云数据库, 比较安全. 主要参考waline官方的guidebook, 实现一共有以下3个步骤:

  • 注册一个云数据库LeanCloud用于存储数据;
  • 将waline应用部署到Vercel云平台, 并接入LeanCloud数据库, 部署到Vercel的waline支持绑定自定义域名, 以防由于Vercel服务器被墙而无法正常启用;
  • 在本地hugo博客文件系统中配置waline的客户端, 通过配置令它接入vercel服务端, 这样子静态博客也能实现评论功能啦.
    image-20230804191012157

数据库部署-LeanCloud

  • 注册LeanCloud
    最好选择国际版, 这样子之后绑定的自定义域名可以是没有经过备案的, 注册后创建应用:
    image-20230804185902257
    image-20230804190103113进入控制台, 复制设置-应用凭证中的前三项, 作为之后部署到Vercel时的环境变量.

图中仅示例, 凭证无效

  • 部署到服务端-Vercel
    拥有GitHub账号可以直接登陆Vercel基于waline模板创建GitHub仓库repository, 并且跳过创建团队(并非是协作项目). 满屏的烟花意味着部署成功🎉.
    image-20230804190451011
    image-20230804190623844
    在Settings中找到Environment Variables, 新建LEAN_ID \ LEAN_KEY \ LEAN_MASTER_KEY 变量并填入在LeanCloud中获得的值:
    | LEAN_ID | LEAN_ID | LEAN_MASTER_KEY |
    | -------- | -------- | ----------------- |
    | APP ID | APP KEY | Master Key |
  • 进行部署
    环境变量配置完后点击顶部的Deployments, 点击顶部最新的一次部署右侧的Redeploy进行重新部署, 使刚才设置的环境变量生效.
    image-20230804191216195
    此时会跳转到 Overview 界面开始部署, 等待片刻后 STATUS 会变成 Ready. 此时请点击 Visit, 即可跳转到部署好的网站地址, 此地址即为你的服务端地址.
  • 绑定域名
    点击顶部的 Settings - Domains 进入域名配置页, 输入需要绑定的域名并点击 Add:
    image-20230804192258976
    在域名服务器商处(用的cloudflare)管理DNS解析, 按以下值添加新的 CNAME 解析记录:
    | 类型 | 名称 | 内容 |
    | ----- | -------- | -------------------- |
    | CNAME | comments | cname.vercel-dns.com |
    其他保持默认就好, 等待生效, 就可以通过在浏览器输入自定义域名comments.yolichan.fun来访问waline服务端啦.自定义域名之后添加/ui可以进入应用后台管理界面, 第一个注册的用户自动成为管理员账号, 所以应用生成后尽早进行账号注册以免管理员账号被访客注册.

通过html脚本在博客中引入waline客户端

  • 先在主题配置文件config.toml中配置waline服务端参数, 在[params]变量之后插入:
1[params]  
2# 中间是原有的一些配置,如:  
3	defaultContentLanguage = "zh"  
4	# ...  
5	# 然后插入以下说明:  
6	[params.waline]  
7    	enable = true  
8    	serverURL = "https://comments.yolichan.fun/"  #已绑定域名 					# 换成你的serverURL  
9    	# 参考：https://waline.js.org/

填入的serverURL等参数将在引入waline的功能实现脚本comment.html中进行调用.

  • 引入第三方应用的功能实现脚本主要在blog-yoli/layouts/partials/目录下, 在该目录下新建一个comment.html文件:
 1<head>  
 2  <!-- Waline -->  
 3  <!-- ... -->  
 4  <link  
 5    rel="stylesheet"  
 6    href="https://unpkg.com/@waline/client@v2/dist/waline.css"  
 7  />  
 8  <link  
 9    rel="stylesheet"  
10    href="https://unpkg.com/@waline/client@v2/dist/waline-meta.css"  
11  />  
12  <!-- ... -->  
13</head>  
14<body>  
15  <!-- ... -->  
16  <div id="waline"></div>  
17  <script type="module">  
18    import { init } from 'https://unpkg.com/@waline/client@v2/dist/waline.mjs';  
19    const locale = {  
20      nick : '昵称',  
21      placeholder: '欢迎留爪',  
22      sofa: '空空空~',  
23      comment: 'thoughts or moods',  
24      more: '还有~',  
25      emoji: 'emoji',  
26      admin: '爱摸鱼的修理工',  
27      level0: '潜水',  
28      level1: '冒泡',  
29      level2: '吐槽',  
30      level3: '活跃',  
31      level4: '话唠',  
32      level5: '传说',  
33    };  
34  
35    init({  
36      el: '#waline',  
37      serverURL: '{{ .Site.Params.Waline.serverURL }}',  
38      locale,  
39      emoji: 'https://unpkg.com/@waline/emojis@1.1.0/weibo',  
40      texRenderer: false,  
41    });  
42  </script>  
43</body>

自定义语言变量locale的使用参考waline官方教程, 有的设置还需要在vercel服务端添加一些环境变量, 这里就不细讲啦, 也可以不进行配置直接使用默认参数.

  • 博客页面布局主要在blog-yoli/layouts/post/single.html中进行设计, 打开该文件, 在合适的位置插入代码, 表示引入waline评论区:
1<div class="container comment-waline">  
2  {{ partial "comments.html" . }}  
3</div>

一般是在结尾处最后一个{{ end }}标记之前插入, 表示在文章页末加载评论区

  • 关于waline评论区的样式可以在blog-yoli/static/css/den.css中进行设计:
 1/* Comments */  
 2/* waline 全局变量*/  
 3:root{  
 4  /* 主题色 */  
 5  --waline-font-size: 14px !important;  
 6  --waline-theme-color: #f0485388 !important;  
 7  --waline-active-color: #f04853c4 !important;  
 8  --waline-bgcolor-light: #FAF9F7 !important;  
 9  --waline-border-color: rgba(5, 140, 150, 0.278) !important;  
10  --waline-disable-bgcolor: #FAF9F7;  
11  --waline-avatar-size:5rem !important;  
12  --waline-m-avatar-size:calc(var(--waline-avatar-size)*9/13) !important;  
13  --waline-badge-color:rgba(5, 150, 148, 0.425) !important;  
14  --waline-badge-font-size: 0.45em !important;  
15  --waline-info-bgcolor:#f8f8f8 !important;  
16  --waline-info-color:#999999ca !important;  
17  --waline-info-font-size:0.625rem !important;  
18  --waline-border: 1px solid var(--waline-border-color) !important;  
19  --waline-avatar-radius: 50% !important;  
20}  
21.comment-waline{  
22  /*  
23  margin-top: 10px;  
24  position:relative;  
25  float: none;  
26  display: inline;  
27  padding: 10px;  
28  */  
29  background-color: #fff;  
30  margin-top: 18px;  
31  padding-top: 25px;  
32  padding-bottom: 40px;  
33  padding-left: 40px;  
34  padding-right: 40px;  
35  font-weight: 300;  
36  line-height: 1.8;  
37  
38  /*  
39  border-left: 1px solid rgba(0,0,0,0.1);  
40  border-right: 1px solid rgba(0,0,0,0.1);  
41  */  
42}  
43.comment-underline {  
44  display: inline-block;  
45  margin-top: 10px;  
46  margin-bottom: 0px;  
47  width: 50px;  
48  border-bottom: 3px solid #f0485388;  
49}

!important表示强制启用, 避免被其他配置覆盖.

后记

来一张辛苦劳作后的成果快照吧🎉🎉🎉:

image-20230804185016412

Highlights

waline 为静态博客搭建评论系统 ⤴️

Recent Journals

Recent Readings

See 612 more →