这也许是一篇索引文章

温馨提示,文章包含大量站内站外链接,建议加入收藏夹/集锦以备不时之需。

Waline 定制无非涉及以下几个地方:

  1. 修改环境变量达到自定义效果。
  2. 服务端配置自定义的逻辑选项。Vercel 托管着 GitHub 仓库,通过在 index.js 使用服务端 API 即可实现复杂逻辑。
  3. 客户端配置选项。根据自身的主题,在客户端中自定义 Waline 前端选项。
  4. 修改 waline.jswaline.css 文件
本文评论区可以测试,不过请尽量发有意义的内容。不要单纯评论 123test 等。

Waline 邮件通知

Waline 邮件通知以及个性化邮件的设置 ,文章介绍为网站建设邮件服务以及设置信纸的操作步骤。

image.png

头像服务配置

Waline 默认的头像服务加载速度还是不够快,且对于大多数用户没有进行正确的头像匹配。

image.png

Waline 配置头像服务(含常用公共头像服务介绍) ,这篇文章包含「修改 Waline 默认头像」、「通过 QQ 邮箱自动获取头像」的方法。

客户端自定义——显示文字、表情选项卡定制

image.png

学会通过看文档配置 Butterfly 主题中的 Waline 客户端 介绍 Butterfly 主题下配置显示文字、表情选项卡定制等客户端配置内容。

评论安全

Waline 评论安全 介绍最大限度减少垃圾评论的措施,包括 IP 黑名单、关键词屏蔽以及发言频率限制等。

评论区外链中间页跳转

中间页主要是为了规避外链风险。一般 Hexo 渲染插件无法对 Waline 评论系统进行处理,我们可以通过安装 Waline 插件完成中间页替换的功能。

具体做法详见这篇文章:Hexo 博客与 Waline 评论区实现外链跳转中间页

image.png

魔改 CSS

本来涉及 CSS 的修改,应该另写 css 文件再通过 inject 引入的(这也是 Waline 官方推荐的做法)。但是试了不太成功,所以打算把 waline.css 下载到本地,再将 CDN 指向本地位置。不优雅,但能凑合用。

主题颜色修改

CSS 下载到了本地就好办了。根据官方给的 CSS 变量 说明,我们可以自己更改 css 文件。

评论区背景图

image.png

我的做法是在 css 中加上:

1
2
3
4
5
6
7
8
9
10
11
12
13
.wl-editor {
background-image: url(<图片地址>);
background-size: 10%;
background-repeat: no-repeat;
background-position: right bottom;
background-color: rgba(255, 255, 255, 0);
resize: vertical
}
.wl-editor:focus{
background-position-x: 800px;
background-position-y: 1000px;
transition: all 0.2s ease-in-out 0s;
}

记得隔一段时间就和官网 CSS 同步一下。

参考文章:Hexo 中 Buttefly 主题 Valine 评论系统配置以及美化(七) - 知乎 (zhihu.com)

为评论区增加输入提醒

为评论区的输入增加气泡提示。

image.png

具体做法详看这篇文章:为评论系统增加输入提醒【Waline】