概述

花了一天把博客美化了一下，修改了很多细节，主要是把之前很丑的樱花特效换新了。全部改动集中在 _config.butterfly.yml 和 source/js/yyy.js 两个文件。

butterfly设置

主题色

取消注释启用 theme_color，将链接色从灰蓝 #99a9bf 改为更活泼的天蓝 #49B1F5：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# _config.butterfly.yml
theme_color:
  enable: true
  main: "#49B1F5"
  paginator: "#00c4b6"
  button_hover: "#FF7242"
  text_selection: "#00c4b6"
  link_color: "#49B1F5"
  meta_color: "#858585"
  hr_color: "#A4D8FA"
  code_foreground: "#F47466"
  code_background: "rgba(27, 31, 35, .05)"
  toc_color: "#00c4b6"
  blockquote_padding_color: "#49b1f5"
  blockquote_background_color: "#49b1f5"
  scrollbar_color: "#49b1f5"
  meta_theme_color_light: "ffffff"
  meta_theme_color_dark: "#0d0d0d"

字体

blog_title_font 设置 Google Fonts 链接，font 设置全局字体族：

1
2
3
4
5
6
7
blog_title_font:
  font_link: https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap
  font_family: "'Noto Sans SC', sans-serif"

font:
  font_family: "'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif"
  code_font_family: "'Cascadia Code', 'Fira Code', monospace"

打字机副标题

启用 subtitle，配置 6 条文字轮播：

1
2
3
4
5
6
7
8
9
10
11
subtitle:
  enable: true
  effect: true
  source: false
  sub:
    - 扶摇托羽遐黄日，过眼柔卷万云荫
    - 欢迎来到 Xieqwer の World ~
    - Ciallo～(∠·ω< )⌒☆
    - 二进制世界里的探险者
    - Stay hungry, stay foolish.
    - 记录技术与生活的点滴

点击爱心

1
2
3
click_heart:
  enable: true
  mobile: false

页面加载动画

使用内置全屏加载动画（source: 1）：

1
2
3
preloader:
  enable: true
  source: 1

侧边栏

编辑 aside 下的各子配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
aside:
  card_author:
    enable: true
    description: CTF / 开发 / 摸鱼 · Ciallo～
    button:
      enable: true
      icon: fab fa-github
      text: Wanna_2_github?
      link: https://github.com/xieqwer

  card_tags:
    color: true   # 彩色标签云

  card_webinfo:
    runtime_date: 01/13/2025   # 站点运行起始日

social:
  fab fa-github: https://github.com/xieqwer || Github || '#24292e'

页脚与细节

1
2
3
4
5
6
7
8
9
10
11
footer:
  custom_text: 不烦玉竹扰，不惹片尘埃

hr_icon:
  enable: true
  icon: '\f2dc'   # Font Awesome 羽毛图标

code_blocks:
  macStyle: true   # 代码块红黄绿圆点

rightside_scroll_percent: true   # 滚动百分比

首页布局

1
2
3
4
5
6
7
8
index_layout: 5                    # 封面全宽杂志风
index_post_content:
  method: 2                        # 优先取 description，否则自动截取
  length: 300

post_meta:
  page:
    tags: true                     # 首页显示标签

樱花飘落特效

从头写了新的樱花特效，包括形状和新的樱花飘落运动逻辑（source/js/yyy.js），

花瓣形状

单片新月状花瓣。使用贝塞尔曲线绘制不对称形状，右凸左凹。视觉效果还不错。颜色填充使用 linearGradient 渐变色（瓣尖→基部），并绘制中脉纹理。

1
2
3
4
5
6
7
8
9
10
11
12
function drawPetal(ctx, size) {
  var s = size;
  ctx.beginPath();
  ctx.moveTo(0, -s * 0.55);
  // 右侧外凸弧（花瓣背面）
  ctx.bezierCurveTo(s*0.25, -s*0.38, s*0.42, -s*0.02, s*0.36, s*0.28);
  ctx.bezierCurveTo(s*0.24, s*0.40, s*0.06, s*0.44, 0, s*0.38);
  // 左侧微凹弧（花瓣内面）
  ctx.bezierCurveTo(-s*0.14, s*0.28, -s*0.24, s*0.02, -s*0.10, -s*0.28);
  ctx.bezierCurveTo(-s*0.04, -s*0.46, -s*0.02, -s*0.52, 0, -s*0.55);
  ctx.closePath();
}

花瓣分远景（depth 0~0.3）、中景（0.3~0.65）、近景（0.65~1.0）三层，远景花瓣约 6~10px、透明度 0.45~0.57，近景花瓣约 14~18px、透明度 0.71~0.85。

运动系统

花瓣运动由多力叠加驱动：

1
2
3
// 每帧更新
var baseVy = this.fallSpeed + floatMod;   // 下落 + 飘浮
var baseVx = driftBase + breeze + wind + sway; // 漂移 + 风 + 摆动
状态 条件 行为
风 持续 风向 0.08~0.37，始终向右，正弦波起伏
鼠标慢移 smoothSpeed < 30 px/帧 花瓣跟随鼠标速度+绕圈，绕圈方向跟踪鼠标旋转方向
鼠标快甩 smoothSpeed ≥ 30 px/帧 花瓣以鼠标为中心径向散射
鼠标离开 超出 240px 范围 3 秒内衰减 mouseVx/Vy 至零

鼠标绕圈方向通过追踪鼠标速度叉积检测顺/逆时针：

1
2
3
4
var cross = prevSpeedX * smoothSpeedY - prevSpeedY * smoothSpeedX;
if (Math.abs(cross) > 2 && smoothSpeed > 3) {
  orbitDir = orbitDir * 0.88 + (cross > 0 ? -1 : 1) * 0.12;
}

入场与分布

花瓣从顶部和左侧入场，X 轴采用边缘偏向分布：

1
2
3
4
5
6
function edgeBiasedX() {
  var r = Math.random();
  if (r < 0.40) return Math.random() * W * 0.32;          // 左 32%
  if (r < 0.80) return W * (0.68 + Math.random() * 0.32); // 右 32%
  return W * (0.32 + Math.random() * 0.36);                // 中 36%
}

跟随上限

为避免全屏花瓣同时响应鼠标导致性能问题，设置了跟随上限。每帧按距离排序，仅前 30 片有完整漩涡+拖拽，其余花瓣只受微弱向心偏移（正常力度的 10%）。

1
2
var FOLLOW_LIMIT = 30;
var isFollower = followerRank >= 0 && followerRank < FOLLOW_LIMIT;

动态平衡

初始 114 片花瓣，上限 220 片，每隔 3 秒自动生成 1~2 片新花瓣。总数超过 140 片时，超出屏幕的花瓣直接销毁而不重生，维持动态平衡。

参数 值 说明
初始数量 114 片 远 40 + 中 46 + 近 28
硬上限 220 点击和定时生成不会超过
回收阈 140 超过此数时超界花瓣直接销毁
定时生成 每 3s / 1~2 片 保持画面不缺花瓣

最后更新于 2026-07-28