Anzhiyu主题下waline样式修改

Roofangs2026-06-292026-06-29

美化？（存疑）
参考了LiuShen’s Blog评论区的样式
理论也适用于原版Butterfly主题（暂未做过测试）

1.样式引入

学习自Akilar的Custom Beautify

方法一

以Anzhiyu主题为例。可以在博客目录\themes\anzhiyu\source\css\目录下新建custom.css文件，填入样式，然后在博客目录\_config.butterfly.yml的inject配置项中引入自定义样式文件。

1
2
3

inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css"  media="defer" onload="this.media='all'">

其中media="defer" onload="this.media='all'是异步加载配置项，确保自定义样式会在页面加载完成后才继续渲染。如果没有需求或效果不好可以不加这个。

保存，hexo clean && hexo g && hexo s，hexo三连查看效果

方法二

以Anzhiyu主题为例。可以在博客目录\themes\anzhiyu\source\css目录下新建_custom文件夹，创建custom.styl文件，填入样式，然后修改博客目录\themes\anzhiyu\source\css中的index.styl配置项，增加一条@import '_custom/*'

  if hexo-config('css_prefix')
    @import 'nib'

  @import '_third-party/normalize.min.css'

  // project
  @import 'var'
  @import '_global/*'
  @import '_highlight/highlight'
  @import '_page/*'
  @import '_layout/*'
  @import '_tags/*'
  @import '_mode/*'
  @import '_third-party/*'
  @import '_extra/**/*.css'
+ @import '_custom/*'

保存，hexo clean && hexo g && hexo s，hexo三连查看效果

2.完整css

/* ======================== Waline 卡片样式美化（兼容深浅模式） ======================== */

/* 定义公共圆角与过渡变量 */
:root {
  --wl-card-radius: 0.75em;      /* 与 waline 原生圆角一致 */
  --wl-card-transition: all 0.2s ease;
}

/* ---------- 评论框悬浮高亮效果 ---------- */
/* 浅色模式悬浮 */
[data-theme="light"] .wl-panel:hover {
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.18) !important;
  transform: translateY(-1px) !important;
  border-color: var(--waline-theme-color) !important;
}

/* 深色模式悬浮 */
[data-theme="dark"] .wl-panel:hover {
  border-color: var(--waline-theme-color) !important;
  background: var(--waline-bg-color-light) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

/* ---------- 1. 评论主面板（输入框区域） ---------- */
.wl-panel {
  border: 1.5px solid var(--waline-border-color) !important;
  border-radius: var(--wl-card-radius) !important;
  background: var(--waline-bg-color) !important;
  transition: var(--wl-card-transition) !important;
}

/* 浅色模式下 panel 阴影 */
[data-theme="light"] .wl-panel {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15) !important;
}
/* 深色模式下 panel 阴影更柔和（或去掉阴影，只保留边框） */
[data-theme="dark"] .wl-panel {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  border-color: #5a5a5a !important; /* 深色模式下边框略微亮一点 */
}

/* ---------- 2. 评论头部（昵称/邮箱输入区域） ---------- */
.wl-header {
  border-bottom: 2px dashed var(--waline-border-color) !important;
}
[data-theme="dark"] .wl-header {
  border-bottom-color: #5a5a5a !important;
}