自定义 Waline 客户端——修改 CSS

摘要生成中...

AI 摘要

Hunyuan-lite

文章于 260320 解耦自站内文章【索引】定制自己的 Waline 评论系统。

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

如果网站使用了边缘加速服务，更改 CSS 记得对相关缓存进行刷新。

主题颜色修改

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

评论区背景图

截取自 @阿波尔网站：

Hexo 的 Butterfly 主题提供了替换 Waline 背景图的选项，参考：Butterfly 文檔(三) 主題配置 | Butterfly

我的做法是在 css 中加上：

.wl-editor {
    background-image: url(<your-photo-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;
}