Butterfly 主题的可配置度很高，但主题界面上比较朴素。Butterfly 原有的文章页面显得有些生硬，于是想着给页面添加一些动态效果。波浪效果在大多数博客页面都有使用到，个人也比较喜欢，主要是因为波浪动效不会让人感觉到浮躁，还增加了页面的生动性。

新增模板

在 themes/butterfly/layout/includes/header 下新增 wave.pug 文件:

1
2
3
4
5
6
7
8
9
10
11
<svg class="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 id="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"></path>
  </defs>
  <g class="parallax">
    <use href="#gentle-wave" x="48" y="0"></use>
    <use href="#gentle-wave" x="48" y="3"></use>
    <use href="#gentle-wave" x="48" y="5"></use>
    <use href="#gentle-wave" x="48" y="7"></use>
  </g>
</svg>

修改页面

在 themes/butterfly/layout/includes/header/index.pug 文件中的指定位置处新增如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
header#page-header(class=`${isHomeClass+isFixedClass}` style=bg_img)
  !=partial('includes/header/nav', {}, {cache: true})
  if top_img !== false
    if is_post()
      include ./post-info.pug
+     include ./wave.pug
    else if is_home() 
      #site-info
        h1#site-title=site_title
        if theme.subtitle.enable
          - var loadSubJs = true
          #site-subtitle
            span#subtitle
        if(theme.social)
          #site_social_icons
            !=partial('includes/header/social', {}, {cache: true})
      #scroll-down
        i.fas.fa-angle-down.scroll-down-effects
    else
      #page-site-info
        h1#site-title=site_title

新增样式

在 themes/butterfly/source/css/_layout 下新增样式文件 wave.styl:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
@media (max-width: 768px) {
  .waves-svg {
    display: none;
  }
}

.waves-svg {
  --wave-background: $web-bg || var(--global-bg);
  position: absolute;
  bottom: -10px;
  width: 100%;
  height: 60px;
}

.parallax>use {
  animation: move-forever 30s cubic-bezier(.55,.5,.45,.5) infinite;
}

.parallax>use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
  fill: var(--wave-background);
  opacity: .5;
}

.parallax>use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
  fill: var(--wave-background);
  opacity: .6;
}

.parallax>use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
  fill: var(--wave-background);
  opacity: .7;
}

.parallax>use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
  fill: var(--wave-background);
}

@keyframes move-forever {
  from {
    transform: translate3d(-90px,0,0);
  }
  to {
    transform: translate3d(85px,0,0);
  }
}

进一步优化

由于新增了波浪效果后，文章的发布信息会被波浪遮挡一部分，所以这里进一步扩展 butterfly 主题的配置。

在 themes/butterfly/sources/css/var.styl 文件中新增样式变量：

1
2
3
4
$index_top_img_height = hexo-config('index_top_img_height') ? convert(hexo-config('index_top_img_height')) : 100vh
$index_site_info_top = hexo-config('index_site_info_top') ? convert(hexo-config('index_site_info_top')) : 43%
+ $post_top_img_height = hexo-config('post_top_img_height') ? convert(hexo-config('post_top_img_height')) : 400px
+ $post_site_info_top = hexo-config('post_site_info_top') ? convert(hexo-config('post_site_info_top')) : 30%

修改 themes/butterfly/source/css/_layout/head.styl 文件中的样式：

1
2
3
// post
&.post-bg
  height: $post_top_img_height

主题配置文件 _config.butterfly.yml 中新增相关配置：

1
2
+ post_site_info_top: 40%
+ post_top_img_height: 400px