惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
博客园_首页
雷峰网
雷峰网
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
WordPress大学
WordPress大学
腾讯CDC
T
Tailwind CSS Blog
A
About on SuperTechFans
H
Hackread – Cybersecurity News, Data Breaches, AI and More
The GitHub Blog
The GitHub Blog
T
The Blog of Author Tim Ferriss
G
Google Developers Blog
The Cloudflare Blog
D
DataBreaches.Net
Recent Announcements
Recent Announcements
Engineering at Meta
Engineering at Meta
B
Blog
博客园 - 聂微东
阮一峰的网络日志
阮一峰的网络日志
月光博客
月光博客
博客园 - 司徒正美
MongoDB | Blog
MongoDB | Blog
Google DeepMind News
Google DeepMind News
Apple Machine Learning Research
Apple Machine Learning Research

又见苍岚

COLMAP PatchMatch Stereo 算法详解 事件驱动的状态机框架:从理论到工程实践 Git 在国内网络环境下无法 Push 的排查与修复 —— 配置 Clash 代理 分段五次多项式插值原理详解 路径插值方法深度对比研究 Claude Code 使用指南 OpenClaw 记忆管理与技能创建指南 CBS(Conflict-Based Search)算法详解 A* 算法及其变种详解 OpenClaw 配置多 Agents Windows Powershell 无法加载文件,因为在此系统上禁止运行脚本问题的解决方案 MaxClaw 安装流程 大模型 AI 名词介绍 AList 网盘聚合工具简介 Protobuf 简介与测试 Claude Code 简介以及 GLM 4.7 模型接入 Github 歌词下载工具 163MusicLyrics Python __getattr__ 懒加载 Python TypedDict 机器人仿真平台 Gazebo 安装记录 机器人仿真平台 Gazebo 简介 多机器人路径规划问题(Multi-Agent Path Finding, MAPF)简介 Python exifread 读取修改过的 jpeg 信息错误问题修复 3D 坐标系变换的理解 3D 旋转矩阵基本概念 MongoDB Compass 介绍 Python 环境管理工具 uv Flutter 开发指南 Snipaste 安装下载与黑屏问题解决方案 全局路径规划算法记录
Fluid -38- 为 Waline 添加装饰挂件
Yiwei Zhang · 2024-01-17 · via 又见苍岚

当前 Fluid 主题貌似没能支持 Waline 挂件功能,参照 廿壴 兄弟的指导,直接 css 安排上就完了。

简介

看到廿壹的 Waline 有挂件感觉很酷,要来代码学习了一下。

效果展示

加入了背景和头像框。

实现原理

背景

wl-editor 类中加入背景

头像框

.wl-cards .wl-user::before 中加入背景,作为头像框

同时还要防止在回复内容中加入,需要屏蔽掉

CSS 代码

背景

1
2
3
4
5
6
7
8
.wl-editor:focus, .wl-input:focus {
background: var(–waline-bgcolor-light);
}

.wl-editor {
background: url("https://pic.rmb.bdstatic.com/bjh/gallery/95ec06d4c3e921fd1e9e7521590f8e148737.png") right top no-repeat;
background-size: contain;
}

头像框

包含 PC 端 与 移动端的不同 css 样式

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
.wl-cards .wl-user::before {
left: -13px;
top: -8px;
content: ' ';
position: absolute;
width: calc((var(--waline-avatar-size) * 19 / 13.7));
height: calc((var(--waline-avatar-size) * 19 / 13.7));
background: url("https://uipv4.zywvvd.com:33030/HexoFiles/images/touxiangkuang.gif") center/cover;
opacity: .85;
pointer-events: none;
z-index: 2;
}

@media screen and (max-width: 767px) {
.wl-cards .wl-user::before {
left: -12px;
top: -9px;
content: ' ';
position: absolute;
width: calc((var(--waline-avatar-size) * 22/21));
height: calc((var(--waline-avatar-size) * 22/21));
background: url("https://uipv4.zywvvd.com:33030/HexoFiles/images/touxiangkuang.gif") center/cover;
opacity: 0.8;
pointer-events: none;
z-index: 2;
}
}

.wl-quote .wl-card-item .wl-user::before {
background: 0 0;
}

参考资料

文章链接:
https://www.zywvvd.com/notes/hexo/theme/fluid/fluid-waline-wapper/fluid-waline-wapper/