打造亮点：Solitude 主题文章融入波浪效果

林间的博客

公告

欢迎来到我的博客！这是公告内容。

919 字

5 分钟

打造亮点：Solitude 主题文章融入波浪效果

2025-12-17

技术教程

CSS

/

Hexo

/

主题美化

/

solitude

一. 修改 header.pug#

首先，我们需要定位到 header.pug 文件，其路径如下：

1
themes/
2
└── solitude/
3
    └── layout/
4
        └── includes/
5
            └── header.pug

接下来，在该文件中找到合适的位置（通常是在文章元信息之后），在最后添加以下代码：

1
section.main-hero-waves-area.waves-area
2
  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')
3
    defs
4
      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')
5
    g.parallax
6
      use(href='#gentle-wave', x='48', y='0')
7
      use(href='#gentle-wave', x='48', y='3')
8
      use(href='#gentle-wave', x='48', y='5')
9
      use(href='#gentle-wave', x='48', y='7')

NOTE
需要注意的是，Pug 是一种依赖缩进来表示代码块结构的模板语言（Template Language），因此在复制粘贴时务必保证缩进正确。

二. 注册样式文件#

接下来，我们需要为波浪效果添加对应的 CSS 样式。请将以下 CSS 代码保存为你新建的 css 文件，例如：博客根目录/source/css/baiyi.css。

建议将自定义的资源文件放到博客根目录的 source 文件夹下。这样做的好处是，无论你更换什么主题，这些资源文件都能被正确引用，不会受到主题的影响。而且 Hexo 会默认处理 source 文件夹下的内容，不需要额外的配置。

因此，你可以把 baiyi.css 文件放到 source/css 文件夹中，然后在主题的配置文件里使用 <link rel="stylesheet" href="/css/baiyi.css"> 来引用它。

以下是完整的 CSS 样式代码：

1
/* 波浪css */
2
.main-hero-waves-area {
3
  width: 100%;
4
  position: absolute;
5
  left: 0;
6
  bottom: -11px;
7
  z-index: 5;
8
}
9
.waves-area .waves-svg {
10
  width: 100%;
11
  height: 5rem;
12
}
13
/* Animation */
14

15
.parallax > use {
16
  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
17
}
18
.parallax > use:nth-child(1) {
19
  animation-delay: -2s;
20
  animation-duration: 7s;
21
  fill: #f7f9febd;
22
}
23
.parallax > use:nth-child(2) {
24
  animation-delay: -3s;
25
  animation-duration: 10s;
26
  fill: #f7f9fe82;
27
}
28
.parallax > use:nth-child(3) {
29
  animation-delay: -4s;
30
  animation-duration: 13s;
31
  fill: #f7f9fe36;
32
}
33
.parallax > use:nth-child(4) {
34
  animation-delay: -5s;
35
  animation-duration: 20s;
36
  fill: #f7f9fe;
37
}
38
/* 黑色模式背景 */
39
[data-theme="dark"] .parallax > use:nth-child(1) {
40
  animation-delay: -2s;
41
  animation-duration: 7s;
42
  fill: #18171dc8;
43
}
44
[data-theme="dark"] .parallax > use:nth-child(2) {
45
  animation-delay: -3s;
46
  animation-duration: 10s;
47
  fill: #18171d80;
48
}
49
[data-theme="dark"] .parallax > use:nth-child(3) {
50
  animation-delay: -4s;
51
  animation-duration: 13s;
52
  fill: #18171d3e;
53
}
54
[data-theme="dark"] .parallax > use:nth-child(4) {
55
  animation-delay: -5s;
56
  animation-duration: 20s;
57
  fill: #18171d;
58
}
59

60
@keyframes move-forever {
61
  0% {
62
    transform: translate3d(-90px, 0, 0);
63
  }
64
  100% {
65
    transform: translate3d(85px, 0, 0);
66
  }
67
}
68
/*Shrinking for mobile*/
69
@media (max-width: 768px) {
70
  .waves-area .waves-svg {
71
    height: 40px;
72
    min-height: 40px;
73
  }
74
}

三. 额外可选配置#

如果你希望波浪效果仅在电脑端显示，而在手机端不显示，可以通过媒体查询（Media Query）来实现。只需将上述 CSS 代码包裹在以下媒体查询语句中：

1
/* 仅在屏幕宽度大于 768px 时应用以下样式 */
2
@media (min-width: 769px) {
3
  /* 波浪css */
4
  .main-hero-waves-area {
5
    width: 100%;
6
    position: absolute;
7
    left: 0;
8
    bottom: -11px;
9
    z-index: 5;
10
  }
11
  .waves-area .waves-svg {
12
    width: 100%;
13
    height: 5rem;
14
  }
15
  /* Animation */
16

17
  .parallax > use {
18
    animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
19
  }
20
  .parallax > use:nth-child(1) {
21
    animation-delay: -2s;
22
    animation-duration: 7s;
23
    fill: #f7f9febd;
24
  }
25
  .parallax > use:nth-child(2) {
26
    animation-delay: -3s;
27
    animation-duration: 10s;
28
    fill: #f7f9fe82;
29
  }
30
  .parallax > use:nth-child(3) {
31
    animation-delay: -4s;
32
    animation-duration: 13s;
33
    fill: #f7f9fe36;
34
  }
35
  .parallax > use:nth-child(4) {
36
    animation-delay: -5s;
37
    animation-duration: 20s;
38
    fill: #f7f9fe;
39
  }
40
  /* 黑色模式背景 */
41
  [data-theme="dark"] .parallax > use:nth-child(1) {
42
    animation-delay: -2s;
43
    animation-duration: 7s;
44
    fill: #18171dc8;
45
  }
46
  [data-theme="dark"] .parallax > use:nth-child(2) {
47
    animation-delay: -3s;
48
    animation-duration: 10s;
49
    fill: #18171d80;
50
  }
51
  [data-theme="dark"] .parallax > use:nth-child(3) {
52
    animation-delay: -4s;
53
    animation-duration: 13s;
54
    fill: #18171d3e;
55
  }
56
  [data-theme="dark"] .parallax > use:nth-child(4) {
57
    animation-delay: -5s;
58
    animation-duration: 20s;
59
    fill: #18171d;
60
  }
61

62
  @keyframes move-forever {
63
    0% {
64
      transform: translate3d(-90px, 0, 0);
65
    }
66
    100% {
67
      transform: translate3d(85px, 0, 0);
68
    }
69
  }
70
  /*Shrinking for mobile*/
71
  @media (max-width: 768px) {
72
    .waves-area .waves-svg {
73
      height: 40px;
74
      min-height: 40px;
75
    }
76
  }
77
}

四. 引入样式文件#

最后一步，我们需要在主题的 _config.yml 文件中引入刚才创建的 CSS 文件。具体操作如下：

在 _config.yml 中找到 extends 配置项，并在 head 下添加自定义 CSS 的链接：

1
# --------------------------- start ---------------------------
2
# Extend
3
# 扩展
4
extends:
5
  # Insert in head
6
  # 插入到 head
7
  head:
8
    # 自定义css
9
    - <link rel="stylesheet" href="/css/baiyi.css">
10

11
  # Insert in body
12
  # 插入到 body
13
  body:
14
    #  - <script src="https://cdn.bootcdn.net/ajax/libs/pace/1.2.4/pace.min.js"></script>
15
# --------------------------- end ---------------------------

完成以上步骤后，重新部署你的 Hexo 博客，即可看到文章顶部的动态波浪效果。

打造亮点：Solitude 主题文章融入波浪效果

https://jizhiben.xin/posts/打造视觉亮点solitude-主题文章融入波浪效果/

作者

林间

发布于

2025-12-17

许可协议

MIT

部分信息可能已经过时

Vercel部署Twikoo评论系统保姆级教程