给博客装上二次元皮肤:看板娘 + 音乐 + Argon 折腾记

博客不止是写字的地方,更是个人的"数字客厅"。这篇文章记录我给博客装的二次元皮肤:Argon 主题 + 看板娘 + 音乐播放器,外加一段手写的全局 CSS。

一、选主题:Argon

WordPress 主题里 Argon 是折腾党的心头好:设计简约、功能丰富,支持暗色模式、文章目录、代码高亮,还内置了 Live2D 看板娘支持。我选了单栏布局,主打极简。

主题色用的靛蓝 #5e72e4——稳重里带一点二次元感。

二、Poetize 极简风格

整体走 Poetize 风格:单栏居中、卡片圆角 16px、悬浮上浮阴影、Banner 渐变压暗 + 底部渐隐。顶部导航毛玻璃,滚动后自动吸附,现代感拉满。

三、二次元三件套

  • Live2D 看板娘:页面角落一个会动的二次元角色,自托管 waifu 资源,不依赖外链;
  • 音乐播放器:APlayer 悬浮固定,随机播放,主题色跟随 #5e72e4;
  • 二次元 Banner:自定义背景图 + 渐变遮罩,标题加粗留白。

三件套都是自托管,外网加载全走自己的域名,一个请求也不落到第三方。

四、一段 170 行的全局 CSS

最核心的颜值工作,其实是一段内联在 functions.php 里的全局 CSS(forwardzz_global_css hook):滚动条配色、选中文字颜色、卡片 hover 上浮、正文行高 1.95、代码块深色圆角、引用块主题色左边框、页脚毛玻璃……全部不碰主题文件,升级主题也不会丢。

.post.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(15,23,42,0.08);
}
.article-content { font-size: 16px; line-height: 1.95; letter-spacing: 0.3px; }

CSS 的好处是即时生效,改完刷新就能看,迭代成本极低。

五、折腾的意义

有人觉得博客好看有什么用,能用就行。但折腾的意义恰恰在于:让每个细节都贴合自己的审美。字距、圆角、阴影、渐变的每一个像素,都是"这是我的地盘"的证明。

上一篇