前言

博客文章质量是内核，但视觉效果是第一印象。Butterfly 主题本身已经很能打，但默认配置下还有大量优化空间。这次一口气做了 10 项美化改动，每一项都只需要改配置或加几行 CSS，不需要改主题源码，不会影响后续升级。

最终效果：https://www.lkl-zero.top

一、预加载动画（Preloader）

作用：页面首次加载时展示全屏 loading 动画，避免白屏和布局闪烁，大幅提升首屏体验。

1
2
3
4
# _config.butterfly.yml
preloader:
  enable: true
  source: 1   # 1 = 全屏动画，2 = 进度条

二、点击涟漪效果

作用：鼠标点击页面任意位置产生水波纹扩散，替代默认无反馈的点击体验，有质感但不喧宾夺主。

相比烟花和爱心特效，涟漪更克制、更耐看，适合技术博客。

JS

1
2
3
4
5
6
7
8
9
10
11
12
// source/js/click-ripple.js
document.addEventListener('click', function(e) {
  if (e.target.closest('a') || e.target.closest('button') || 
      e.target.closest('pre') || e.target.closest('code') ||
      e.target.closest('#twikoo-wrap')) return;

  var ripple = document.createElement('span');
  ripple.className = 'click-ripple';
  ripple.style.cssText = 'left:' + (e.clientX - 10) + 'px;top:' + (e.clientY - 10) + 'px;';
  document.body.appendChild(ripple);
  ripple.addEventListener('animationend', function() { ripple.remove(); });
});

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* source/css/custom.css */
.click-ripple {
  position: fixed;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(73, 177, 245, 0.6);
  pointer-events: none;
  z-index: 9999;
  animation: rippleOut 0.6s ease-out forwards;
}

@keyframes rippleOut {
  0% { transform: scale(0); opacity: 0.8; }
  100% { transform: scale(8); opacity: 0; }
}

注入

1
2
3
inject:
  bottom:
    - <script src="/js/click-ripple.js"></script>

三、默认暗色模式

作用：博客默认以暗色模式展示，配合星空背景让定制 CSS 的光晕效果直接生效。

1
display_mode: dark

光晕动画是在 [data-theme="dark"] 选择器下生效的，默认亮色时访客根本看不到，切成暗色模式才出效果。

四、固定导航栏

作用：页面滚动时导航栏始终在顶部可见，不用滚回顶部才能切换页面。

1
2
nav:
  fixed: true

五、Mac 风格代码块

作用：代码块左上角加上红黄绿三色圆点，技术博客的经典视觉元素。

1
2
code_blocks:
  macStyle: true

六、侧边栏最近文章 + 最新评论

作用：侧边栏增加两块动态内容——最近发布的文章和最新评论。文章页看完后直接侧边栏点下一篇，评论区有人说话也能立刻看到。

1
2
3
4
5
6
7
8
9
aside:
  card_recent_post:
    enable: true
    limit: 5
    sort: date
  card_newest_comments:
    enable: true
    limit: 6
    avatar: true

七、头像旋转动效 + 减速

作用：鼠标悬停在侧边栏头像上时缓慢旋转一圈，是一个不突兀的小细节。默认 0.3 秒太快像陀螺，减速到 0.8 秒才优雅。

1
2
avatar:
  effect: true
1
2
3
4
5
/* source/css/custom.css */
/* 默认转速过快，覆盖为 0.8s */
.avatar-img img {
  transition: transform 0.8s ease !important;
}

八、关闭不蒜子，换 Twikoo 统计

作用：不蒜子（busuanzi.ibruce.info）是免费站点统计，但频繁 502。Twikoo 的 visitor: true 能顺带实现页面阅读量统计，一举两得。

1
2
3
4
5
6
7
busuanzi:
  site_uv: false
  site_pv: false
  page_pv: false

twikoo:
  visitor: true

九、已启用的效果整理

这些是之前就开着、保留的效果：

效果 配置位置 说明
星空粒子背景 source/js/universe.js 暗色模式下满屏流动的星点
打字机副标题 subtitle.effect: true 首页自动打字效果
Activate Power Mode activate_power_mode.enable: true 打字时彩色粒子飞出
点击飘字 clickShowText.enable: true 点击时随机飘出文字
页脚渐变色 source/css/页脚渐变.css 底部渐变流动动画
分类条 categoryBar.enable: true 首页分类卡片展示
Swiper 轮播 swiper.enable: true 首页文章轮播
信笺留言板 envelope_comment.enable: true 留言板邮件风格样式
WOW.js 动画 wowjs.enable: true 元素滚动入场动画
Live2D 看板娘 live2d.enable: true 右下角二次元角色
暗光光晕文字 custom.css 暗色模式下标题发光变色

十、最终配置清单

一口气改动汇总：

# 改动项 配置字段
1 开启预加载动画 preloader.enable: true
2 点击涟漪效果 自定义 JS + CSS
3 默认暗色模式 display_mode: dark
4 固定导航栏 nav.fixed: true
5 Mac 风格代码块 code_blocks.macStyle: true
6 侧边栏最近文章 card_recent_post.enable: true
7 侧边栏最新评论 card_newest_comments.enable: true
8 头像旋转动效 avatar.effect: true
9 头像转速减慢 CSS 覆盖
10 关闭不蒜子 busuanzi 全部 false

总结

这 10 项改动，每一项都只需要改配置或加几行代码，不用动主题源码，Butterfly 主题升级不受影响。

核心思路：在克制中提升质感。技术博客的读者是来看内容的，视觉效果要做的是”让人待得舒服”而不是”炫技”。动态太多反而分散注意力——所以我们选了涟漪而不是烟花，选了慢速头像旋转而不是更多弹跳动画。

博客永远在打磨的路上，有新想法再分享。