hexo博客butterfly主题单独设置顶部图，顶部图波浪特效

单独设置顶部图

  如果要在配置文件里面设置顶部图的显示或者不显示，只能全局设置，不能单独设置某一个页面顶部图显示与否。但是我们可以通过改源码文件来实现。修改themes/butterfly/layout/includes/header/index.pug。我这里设置的是除了文章页其他的都禁用顶部图，修改对应部分即可。

if !theme.disable_top_img && page.top_img !== false
  if is_post()
    - var top_img = page.top_img || page.cover || theme.default_top_img
  else if is_page()
    - var top_img = false
  else if is_tag()
    - var top_img = theme.tag_per_img && theme.tag_per_img[page.tag] 
    - top_img = top_img ? top_img : (theme.tag_img !== false ? theme.tag_img || theme.default_top_img : false)
  else if is_category()
    - var top_img = theme.category_per_img && theme.category_per_img[page.category]
    - top_img = top_img ? top_img : (theme.category_img !== false ? theme.category_img || theme.default_top_img : false)
  else if is_home()
    - var top_img = false
  else if is_archive()
    - var top_img = false
  else
    - var top_img = page.top_img || theme.default_top_img

{% note info simple %} 参考文章https://blog.csdn.net/zzq0523/article/details/122954271 {% endnote %}

设置顶部图波浪特效

  顶部图波浪特效是从大佬安知鱼的文章借鉴的，首先需要改一下源码themes/butterfly/layout/includes/header/index.pug,需要把以下代码粘贴到合适位置（大概33行）。

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文件并引入,如果位置不对，改一改bottom就可以了

/* 波浪css */
.main-hero-waves-area {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -108px;
    z-index: 5;
  }
  .waves-area .waves-svg {
    width: 100%;
    height: 5rem;
  }
  /* Animation */
  
  .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) {
    animation-delay: -2s;
    animation-duration: 7s;
    fill: #18171dc8;
  }
  [data-theme="dark"] .parallax > use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
    fill: #18171d80;
  }
  [data-theme="dark"] .parallax > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
    fill: #18171d3e;
  }
  [data-theme="dark"] .parallax > use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
    fill: #18171d;
  }
  
  @keyframes move-forever {
    0% {
      transform: translate3d(-90px, 0, 0);
    }
    100% {
      transform: translate3d(85px, 0, 0);
    }
  }
  /*Shrinking for mobile*/
  @media (max-width: 768px) {
    .waves-area .waves-svg {
      height: 40px;
      min-height: 40px;
    }
  }

  最终效果： {% note info simple %} 参考文章https://anzhiy.cn/posts/98c4.html {% endnote %}