大家好，我是码农刚子。在 Hexo Butterfly 主题中，默认的文章顶部样式比较简洁。如果你希望增加一些动态视觉效果，可以在文章顶部（封面图下方）添加一层流动的波浪动画。本文将一步步教你如何实现。

最终效果预览

在每篇文章的顶部封面图下方，会显示一层由多条半透明波浪线组成的动画，波浪缓慢移动，增加页面的灵动感，并且支持深色模式自动适配颜色。

实现步骤

第一步：修改 Pug 模板文件

找到 Butterfly 主题目录下的以下文件：
themes/butterfly/layout/includes/header/index.pug

大约在第 33 行附近（即 <img#post-top-bg 标签之前），找到 if top_img !== false 代码块，在 include ./post-info.pug 之后、#post-top-cover 之前，插入波浪的 HTML 结构。

修改后的代码示意：

if top_img !== false
  if is_post()
    include ./post-info.pug
    // 添加波浪结构（新增部分）
    section.main-hero-waves-area.waves-area
      svg.waves-svg(xmlns='http://www.w3.org/2000/svg', xlink='http://www.w3.org/1999/xlink', viewBox='0 24 150 28', preserveAspectRatio='none', shape-rendering='auto')
        defs
          path#gentle-wave(d='M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z')
        g.parallax
          use(href='#gentle-wave', x='48', y='0')
          use(href='#gentle-wave', x='48', y='3')
          use(href='#gentle-wave', x='48', y='5')
          use(href='#gentle-wave', x='48', y='7')
    #post-top-cover
      img#post-top-bg(class='nolazyload' src=bg_img)
  else if is_home()
    #site-info
      ...

为了方便直接复制，以下是需要添加的核心 Pug 代码块：

section.main-hero-waves-area.waves-area
  svg.waves-svg(xmlns='http://www.w3.org/2000/svg', xlink='http://www.w3.org/1999/xlink', viewBox='0 24 150 28', preserveAspectRatio='none', shape-rendering='auto')
    defs
      path#gentle-wave(d='M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z')
    g.parallax
      use(href='#gentle-wave', x='48', y='0')
      use(href='#gentle-wave', x='48', y='3')
      use(href='#gentle-wave', x='48', y='5')
      use(href='#gentle-wave', x='48', y='7')

第二步：添加自定义 CSS 样式

波浪效果需要 CSS 来控制位置、大小、颜色和动画。你可以通过以下两种方式之一添加样式：

  • 方式一（推荐）：在 Butterfly 主题配置文件 _config.butterfly.yml 中，找到 inject.head 项，引入一个自定义 CSS 文件。
  • 方式二：直接编辑主题的 CSS 文件（不推荐，升级主题时会丢失）。

假设你新建了 /source/css/waves.css，则在 _config.butterfly.yml 中添加：

inject:
  head:
    - <link rel="stylesheet" href="/css/waves.css">

将以下完整 CSS 代码保存到 waves.css 中：

/* 波浪容器定位 */
.main-hero-waves-area {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -11px;
  z-index: 5;
}

/* SVG 波浪尺寸 */
.waves-area .waves-svg {
  width: 100%;
  height: 5rem;
}

/* 波浪动画 */
.parallax > use {
  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}

/* 每一层波浪的延迟、时长和颜色（亮色模式） */
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
  fill: #f7f9febd;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
  fill: #f7f9fe82;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
  fill: #f7f9fe36;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
  fill: #f7f9fe;
}

/* 深色模式下的波浪颜色 */
[data-theme="dark"] .parallax > use:nth-child(1) {
  fill: #18171dc8;
}
[data-theme="dark"] .parallax > use:nth-child(2) {
  fill: #18171d80;
}
[data-theme="dark"] .parallax > use:nth-child(3) {
  fill: #18171d3e;
}
[data-theme="dark"] .parallax > use:nth-child(4) {
  fill: #18171d;
}

/* 关键帧动画：波浪水平移动 */
@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }
  100% {
    transform: translate3d(85px, 0, 0);
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .waves-area .waves-svg {
    height: 40px;
    min-height: 40px;
  }
}

第三步：调试与自定义

  • 调整波浪颜色：修改 CSS 中各 fill 属性的值。建议让最内层（nth-child(4)）的颜色与文章背景色相近或一致，外层半透明波浪叠加效果更自然。
  • 修改动画速度：调整 animation-duration 和 animation-delay 数值。
  • 波浪高度：修改 .waves-area .waves-svg 的 height 值（默认 5rem）。

第四步：重新生成并预览

hexo clean && hexo g && hexo s

访问任意文章页，即可在顶部看到动态波浪效果。

常见问题

Q：波浪没有显示？
A：检查 Pug 文件缩进是否正确（Butterfly 主题使用 2 空格缩进），并确认 CSS 文件已被正确引入。

Q：波浪遮挡了文字或图片？
A：调整 .main-hero-waves-area 的 bottom 值（如改为 -5px）或 z-index。

Q：移动端波浪太大？
A：CSS 中已包含 @media 查询，可自行调整移动端高度。

总结

通过修改 Butterfly 主题的 Pug 模板并添加一段 CSS，即可为所有文章顶部增添优雅的动态波浪效果。该方法不影响原有功能，同时支持深色模式自适应，提升博客的视觉吸引力。动手试试吧！