anzhiyu主题一图流

anzhiyu主题一图流

摘要

这篇文章介绍了如何使用anzhiyu主题的一图流教程，包括新建js和css文件、引入文件、配置懒加载和图片方法等。文章还提供了一些链接和代码示例，讲解如何进行配置和修改。通过这些步骤，可以实现主题的一图流效果和优化加载背景的效果。文章还介绍了如何美化首页背景图和实现自适应切换。读者可以根据自身需求自行调整代码。

教程

新建js

新建文件source/js/imgloaded.js新增以下内容，并按照注释调整照片路径

// 首页一图流加载优化
/**
 * @description 实现medium的渐进加载背景的效果
 */
(function() {
    class ProgressiveLoad {
      constructor(smallSrc, largeSrc) {
        this.smallSrc = smallSrc;
        this.largeSrc = largeSrc;
        this.initTpl();
        this.container.addEventListener('animationend', () => {
          this.smallStage.style.display = 'none'; 
        }, {once: true});
      }
  
      initTpl() {
        this.container = document.createElement('div');
        this.smallStage = document.createElement('div');
        this.largeStage = document.createElement('div');
        this.smallImg = new Image();
        this.largeImg = new Image();
        this.container.className = 'pl-container';
        this.smallStage.className = 'pl-img pl-blur';
        this.largeStage.className = 'pl-img';
        this.container.appendChild(this.smallStage);
        this.container.appendChild(this.largeStage);
        this.smallImg.onload = this._onSmallLoaded.bind(this);
        this.largeImg.onload = this._onLargeLoaded.bind(this);
      }
  
      progressiveLoad() {
        this.smallImg.src = this.smallSrc;
        this.largeImg.src = this.largeSrc;
      }
  
      _onLargeLoaded() {
        this.largeStage.classList.add('pl-visible');
        this.largeStage.style.backgroundImage = `url('${this.largeSrc}')`;
      }
  
      _onSmallLoaded() {
        this.smallStage.classList.add('pl-visible');
        this.smallStage.style.backgroundImage = `url('${this.smallSrc}')`;
      }
    }
  
    const executeLoad = (config, target) => {
      console.log('执行渐进背景替换');
      const isMobile = window.matchMedia('(max-width: 767px)').matches;
      const loader = new ProgressiveLoad(
        isMobile ? config.mobileSmallSrc : config.smallSrc,
        isMobile ? config.mobileLargeSrc : config.largeSrc
      );
      if (target.children[0]) {
        target.insertBefore(loader.container, target.children[0]);
      }
      loader.progressiveLoad();
    };
  
    const ldconfig = {
      light: {
        smallSrc: 'https://lsky.mnchen.cn/i/2023/10/24/6536faa024dfa.jpg', //浅色模式 小图链接 尽可能配置小于100k的图片 
        largeSrc: 'https://lsky.mnchen.cn/i/2023/10/24/6536faa024dfa.jpg', //浅色模式 大图链接 最终显示的图片
        mobileSmallSrc: 'https://lsky.mnchen.cn/i/2023/10/24/6536faa024dfa.jpg', //手机端浅色小图链接 尽可能配置小于100k的图片
        mobileLargeSrc: 'https://lsky.mnchen.cn/i/2023/10/24/6536faa024dfa.jpg', //手机端浅色大图链接 最终显示的图片
        enableRoutes: ['/'],
        },
      dark: {
        smallSrc: 'https://lsky.mnchen.cn/i/2023/11/10/654e3e6d29b3f.png', //深色模式 小图链接 尽可能配置小于100k的图片 
        largeSrc: 'https://lsky.mnchen.cn/i/2023/11/10/654e3e6d29b3f.png', //深色模式 大图链接 最终显示的图片
        mobileSmallSrc: 'https://lsky.mnchen.cn/i/2023/11/10/654e3e6d29b3f.png', //手机端深色模式小图链接 尽可能配置小于100k的图片
        mobileLargeSrc: 'https://lsky.mnchen.cn/i/2023/11/10/654e3e6d29b3f.png', //手机端深色大图链接 最终显示的图片
        enableRoutes: ['/'],
        },
      };
  
      const getCurrentTheme = () => {
        return document.documentElement.getAttribute('data-theme'); 
      }
  
      const onThemeChange = () => {
        const currentTheme = getCurrentTheme();
        const config = ldconfig[currentTheme];
        initProgressiveLoad(config);
        document.addEventListener("DOMContentLoaded", function() {
          initProgressiveLoad(config);
        });
      
        document.addEventListener("pjax:complete", function() {
          onPJAXComplete(config);
        });
      }
  
      let initTheme = getCurrentTheme();
      let initConfig = ldconfig[initTheme];
      initProgressiveLoad(initConfig);
  
    const observer = new MutationObserver(mutations => {
      mutations.forEach(mutation => {
        if (mutation.attributeName === "data-theme" && location.pathname === '/') {
          onThemeChange();
        }
      });
    });
    
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["data-theme"]  
    });
  
    function initProgressiveLoad(config) {
      const container = document.querySelector('.pl-container');
      if (container) {
        container.remove();
      }
      const target = document.getElementById('page-header');
      if (target && target.classList.contains('full_page')) {
        executeLoad(config, target);
      }
    }
  
    function onPJAXComplete(config) {
      const target = document.getElementById('page-header');
      if (target && target.classList.contains('full_page')) {
        initProgressiveLoad(config);
      }
    }
  
  })();

新建css

新建文件source/css/custom.css新增以下内容，并按照注释自行决定调整内容

/* 首页头图加载 */
.pl-container {
    width: 100%;
    height: 100%;
    z-index: -2;
    position: fixed;
    overflow: hidden;
    will-change: transform; /* 添加性能优化 */
    animation: blur-to-clear 2s cubic-bezier(.62,.21,.25,1) 0s 1 normal backwards running, scale 1.5s cubic-bezier(.62,.21,.25,1) 0s 1 both;
  }
  .pl-img {
    width: 100%;
    height: 100%;
    position: absolute;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1s;
  }
  
  @keyframes blur-to-clear {
    0% {
      filter: blur(50px);
      opacity: 1;
    }
    100% {
      filter: blur(0);
      opacity: 1;
    }
  }
  
  @keyframes scale {
    0% {
      transform: scale(1.5) translateZ(0);
      opacity: 0;
    }
    to {
      transform: scale(1) translateZ(0);
      opacity: 1;
    }
  }
  
  .pl-visible {
    opacity: 1;
  }
  
  .pl-blur {
   /* 小图锯齿多，增加高斯模糊 */
    filter: blur(50px);
  }

/* 首页头图加载 */
.pl-container {
    width: 100%;
    height: 100%;
    z-index: -2;
    position: fixed;
    overflow: hidden;
    will-change: transform; /* 添加性能优化 */
    animation: blur-to-clear 2s cubic-bezier(.62,.21,.25,1) 0s 1 normal backwards running, scale 1.5s cubic-bezier(.62,.21,.25,1) 0s 1 both;
  }
  .pl-img {
    width: 100%;
    height: 100%;
    position: absolute;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1s;
  }
  
  @keyframes blur-to-clear {
    0% {
      filter: blur(50px);
      opacity: 1;
    }
    100% {
      filter: blur(0);
      opacity: 1;
    }
  }
  
  @keyframes scale {
    0% {
      transform: scale(1.5) translateZ(0);
      opacity: 0;
    }
    to {
      transform: scale(1) translateZ(0);
      opacity: 1;
    }
  }
  
  .pl-visible {
    opacity: 1;
  }
  
  .pl-blur {
   /* 小图锯齿多，增加高斯模糊 */
    filter: blur(50px);
  }

/* 页脚与头图透明 */
#footer {
  background: transparent !important;
}
#page-header {
  background: transparent !important;
}

/* 白天模式遮罩透明 */
#footer::before {
  background: transparent !important;
}
#page-header::before {
  background: transparent !important;
}

/* 夜间模式遮罩透明 */
[data-theme="dark"] #footer::before {
  background: transparent !important;
}
[data-theme="dark"] #page-header::before {
  background: transparent !important;
}

在这个css中我稍微添加了几行代码使主题的页脚底部和文章更多的位置进行了透明，可以跟据自己的喜好选择是否修改

引入文件

• 在_config.anzhiyu.yml主题配置文件下inject配置项中head和bottom处

• 分别引入custom.css和imgloaded.js文件

inject:
  head:
    # 自定义css
    - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">

  bottom:
    # 自定义js
    # - <script src="/js/xxx"></script>
     - <script async data-pjax src="/js/imgloaded.js?1"></script> # 首页图片渐进式加载

在安知鱼主题中可以直接把head中的取消注释在bottom中引入js就好了,如果是其他文件夹就把herf的路径修改一下就好了

配置懒加载

在_config.anzhiyu.yml中修改懒加载lazyload将field修改为psot

lazyload:
  enable: true
  field: post # site/post
  placeholder:
  blur: true
  progressive: true

配置图片的方法

我们需要在_config.anzhiyu.yml中的index_img进行修改

# The banner image of home page
index_img: "background: url() top / cover no-repeat"

注意在url()的括号中不需要进行填写地址，图片会由js进行渲染
修改图片的地址在imgloaded.js中进行修改

const ldconfig = {
  light: {
    smallSrc: 'https://lsky.mnchen.cn/i/2023/10/24/6536faa024dfa.jpg', //浅色模式 小图链接 尽可能配置小于100k的图片 
    largeSrc: 'https://lsky.mnchen.cn/i/2023/10/24/6536faa024dfa.jpg', //浅色模式 大图链接 最终显示的图片
    mobileSmallSrc: 'https://lsky.mnchen.cn/i/2023/10/24/6536faa024dfa.jpg', //手机端浅色小图链接 尽可能配置小于100k的图片
    mobileLargeSrc: 'https://lsky.mnchen.cn/i/2023/10/24/6536faa024dfa.jpg', //手机端浅色大图链接 最终显示的图片
    enableRoutes: ['/'],
    },
  dark: {
    smallSrc: 'https://lsky.mnchen.cn/i/2023/11/10/654e3e6d29b3f.png', //深色模式 小图链接 尽可能配置小于100k的图片 
    largeSrc: 'https://lsky.mnchen.cn/i/2023/11/10/654e3e6d29b3f.png', //深色模式 大图链接 最终显示的图片
    mobileSmallSrc: 'https://lsky.mnchen.cn/i/2023/11/10/654e3e6d29b3f.png', //手机端深色模式小图链接 尽可能配置小于100k的图片
    mobileLargeSrc: 'https://lsky.mnchen.cn/i/2023/11/10/654e3e6d29b3f.png', //手机端深色大图链接 最终显示的图片
    enableRoutes: ['/'],
    },
  };

按照代码中的注释进行修改就好了,在配置完成后hexo三连就能看到效果了

页脚与头图透明

1.在[BlogRoot]\source文件夹下新建一个文件夹css，该文件夹用于存放自定义的css样式，再新建一个名为custom.css，在里面写入以下代码：

/* 页脚与头图透明 */
#footer {
  background: transparent !important;
}
#page-header {
  background: transparent !important;
}

/* 白天模式遮罩透明 */
#footer::before {
  background: transparent !important;
}
#page-header::before {
  background: transparent !important;
}

/* 夜间模式遮罩透明 */
[data-theme="dark"] #footer::before {
  background: transparent !important;
}
[data-theme="dark"] #page-header::before {
  background: transparent !important;
}

2.在主题配置文件[BlogRoot]\_config.butterfly.yml文件中的inject配置项的head子项加入以下代码，代表引入刚刚创建的custom.css文件（这是相对路径的写法）

inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">

星空背景和流星特效

1.在 [Blogroot]\themes\source\js\ 目录下新建 universe.js 输入：

function dark() {window.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame;var n,e,i,h,t=.05,s=document.getElementById("universe"),o=!0,a="180,184,240",r="226,225,142",d="226,225,224",c=[];function f(){n=window.innerWidth,e=window.innerHeight,i=.216*n,s.setAttribute("width",n),s.setAttribute("height",e)}function u(){h.clearRect(0,0,n,e);for(var t=c.length,i=0;i<t;i++){var s=c[i];s.move(),s.fadeIn(),s.fadeOut(),s.draw()}}function y(){this.reset=function(){this.giant=m(3),this.comet=!this.giant&&!o&&m(10),this.x=l(0,n-10),this.y=l(0,e),this.r=l(1.1,2.6),this.dx=l(t,6*t)+(this.comet+1-1)*t*l(50,120)+2*t,this.dy=-l(t,6*t)-(this.comet+1-1)*t*l(50,120),this.fadingOut=null,this.fadingIn=!0,this.opacity=0,this.opacityTresh=l(.2,1-.4*(this.comet+1-1)),this.do=l(5e-4,.002)+.001*(this.comet+1-1)},this.fadeIn=function(){this.fadingIn&&(this.fadingIn=!(this.opacity>this.opacityTresh),this.opacity+=this.do)},this.fadeOut=function(){this.fadingOut&&(this.fadingOut=!(this.opacity<0),this.opacity-=this.do/2,(this.x>n||this.y<0)&&(this.fadingOut=!1,this.reset()))},this.draw=function(){if(h.beginPath(),this.giant)h.fillStyle="rgba("+a+","+this.opacity+")",h.arc(this.x,this.y,2,0,2*Math.PI,!1);else if(this.comet){h.fillStyle="rgba("+d+","+this.opacity+")",h.arc(this.x,this.y,1.5,0,2*Math.PI,!1);for(var t=0;t<30;t++)h.fillStyle="rgba("+d+","+(this.opacity-this.opacity/20*t)+")",h.rect(this.x-this.dx/4*t,this.y-this.dy/4*t-2,2,2),h.fill()}else h.fillStyle="rgba("+r+","+this.opacity+")",h.rect(this.x,this.y,this.r,this.r);h.closePath(),h.fill()},this.move=function(){this.x+=this.dx,this.y+=this.dy,!1===this.fadingOut&&this.reset(),(this.x>n-n/4||this.y<0)&&(this.fadingOut=!0)},setTimeout(function(){o=!1},50)}function m(t){return Math.floor(1e3*Math.random())+1<10*t}function l(t,i){return Math.random()*(i-t)+t}f(),window.addEventListener("resize",f,!1),function(){h=s.getContext("2d");for(var t=0;t<i;t++)c[t]=new y,c[t].reset();u()}(),function t(){document.getElementsByTagName('html')[0].getAttribute('data-theme')=='dark'&&u(),window.requestAnimationFrame(t)}()};
dark()

2.在[Blogroot]\themes\source\css\目录下新建 universe.css 输入：

/* 背景宇宙星光  */
#universe{
  display: block;
  position: fixed;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

3.在 [Blogroot]\_config.butterfly.yml 的 inject 配置项中bottom下填入：

inject:
  bottom:
+		# 星空背景
+    - <canvas id="universe"></canvas>
+    - <script defer src="/js/universe.js"></script>

4.在 [Blogroot]\_config.butterfly.yml 的 inject 配置项中 head 下填入：

inject:
  head:
+    ## 星空背景
+    - <link rel="stylesheet" href="/css/universe.css">
---

昼夜转换动画

1.新建 [Blogroot]\themes\butterfly\layout\includes\custom\sun_moon.pug, 这部分其实实质上就是一个 svg 文件，通过 js 操作它的旋转显隐，淡入淡出实现动画效果。

svg(aria-hidden='true', style='position:absolute; overflow:hidden; width:0; height:0')
  symbol#icon-sun(viewBox='0 0 1024 1024')
    path(d='M960 512l-128 128v192h-192l-128 128-128-128H192v-192l-128-128 128-128V192h192l128-128 128 128h192v192z', fill='#FFD878', p-id='8420')
    path(d='M736 512a224 224 0 1 0-448 0 224 224 0 1 0 448 0z', fill='#FFE4A9', p-id='8421')
    path(d='M512 109.248L626.752 224H800v173.248L914.752 512 800 626.752V800h-173.248L512 914.752 397.248 800H224v-173.248L109.248 512 224 397.248V224h173.248L512 109.248M512 64l-128 128H192v192l-128 128 128 128v192h192l128 128 128-128h192v-192l128-128-128-128V192h-192l-128-128z', fill='#4D5152', p-id='8422')
    path(d='M512 320c105.888 0 192 86.112 192 192s-86.112 192-192 192-192-86.112-192-192 86.112-192 192-192m0-32a224 224 0 1 0 0 448 224 224 0 0 0 0-448z', fill='#4D5152', p-id='8423')
  symbol#icon-moon(viewBox='0 0 1024 1024')
    path(d='M611.370667 167.082667a445.013333 445.013333 0 0 1-38.4 161.834666 477.824 477.824 0 0 1-244.736 244.394667 445.141333 445.141333 0 0 1-161.109334 38.058667 85.077333 85.077333 0 0 0-65.066666 135.722666A462.08 462.08 0 1 0 747.093333 102.058667a85.077333 85.077333 0 0 0-135.722666 65.024z', fill='#FFB531', p-id='11345')
    path(d='M329.728 274.133333l35.157333-35.157333a21.333333 21.333333 0 1 0-30.165333-30.165333l-35.157333 35.157333-35.114667-35.157333a21.333333 21.333333 0 0 0-30.165333 30.165333l35.114666 35.157333-35.114666 35.157334a21.333333 21.333333 0 1 0 30.165333 30.165333l35.114667-35.157333 35.157333 35.157333a21.333333 21.333333 0 1 0 30.165333-30.165333z', fill='#030835', p-id='11346')

2.新建 [Blogroot]\themes\butterfly\source\css\layout\sun_moon.styl：

.Cuteen_DarkSky,
.Cuteen_DarkSky:before
  content ''
  position fixed
  left 0
  right 0
  top 0
  bottom 0
  z-index 88888888

.Cuteen_DarkSky
  background linear-gradient(#feb8b0, #fef9db)
  &:before
    transition 2s ease all
    opacity 0
    background linear-gradient(#4c3f6d, #6c62bb, #93b1ed)

.DarkMode
  .Cuteen_DarkSky
    &:before
      opacity 1

.Cuteen_DarkPlanet
  z-index 99999999
  position fixed
  left -50%
  top -50%
  width 200%
  height 200%
  -webkit-animation CuteenPlanetMove 2s cubic-bezier(0.7, 0, 0, 1)
  animation CuteenPlanetMove 2s cubic-bezier(0.7, 0, 0, 1)
  transform-origin center bottom


@-webkit-keyframes CuteenPlanetMove {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes CuteenPlanetMove {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.Cuteen_DarkPlanet
  &:after
    position absolute
    left 35%
    top 40%
    width 9.375rem
    height 9.375rem
    border-radius 50%
    content ''
    background linear-gradient(#fefefe, #fffbe8)

.search
  span
    display none

.menus_item
  a
    text-decoration none!important
//按钮相关，对侧栏按钮做过魔改的可以调整这里的数值
.icon-V
  padding 5px

3.新建 [Blogroot]\themes\butterfly\source\js\sun_moon.js, 去除了冗余代码，去 jquery：

function switchNightMode() {
  document.querySelector('body').insertAdjacentHTML('beforeend', '<div class="Cuteen_DarkSky"><div class="Cuteen_DarkPlanet"></div></div>'),
    setTimeout(function() {
      document.querySelector('body').classList.contains('DarkMode') ? (document.querySelector('body').classList.remove('DarkMode'), localStorage.setItem('isDark', '0'), document.getElementById('modeicon').setAttribute('xlink:href', '#icon-moon')) : (document.querySelector('body').classList.add('DarkMode'), localStorage.setItem('isDark', '1'), document.getElementById('modeicon').setAttribute('xlink:href', '#icon-sun')),
        setTimeout(function() {
          document.getElementsByClassName('Cuteen_DarkSky')[0].style.transition = 'opacity 3s';
          document.getElementsByClassName('Cuteen_DarkSky')[0].style.opacity = '0';
          setTimeout(function() {
            document.getElementsByClassName('Cuteen_DarkSky')[0].remove();
          }, 1e3);
        }, 2e3)
    })
  const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
  if (nowMode === 'light') {
    activateDarkMode()
    saveToLocal.set('theme', 'dark', 2)
    GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
    document.getElementById('modeicon').setAttribute('xlink:href', '#icon-sun')
  } else {
    activateLightMode()
    saveToLocal.set('theme', 'light', 2)
    document.querySelector('body').classList.add('DarkMode'), document.getElementById('modeicon').setAttribute('xlink:href', '#icon-moon')
  }
  // handle some cases
  typeof utterancesTheme === 'function' && utterancesTheme()
  typeof FB === 'object' && window.loadFBComment()
  window.DISQUS && document.getElementById('disqus_thread').children.length && setTimeout(() => window.disqusReset(), 200)
}

4.修改 [Blogroot]\themes\butterfly\layout\includes\head.pug, 在文件末位加上一行：

//- global config
!=partial('includes/head/config', {}, {cache: true})

include ./head/config_site.pug
include ./head/noscript.pug

!=fragment_cache('injectHeadJs', function(){return inject_head_js()})

!=fragment_cache('injectHead', function(){return injectHtml(theme.inject.head)})
+ include ./custom/sun_moon.pug

5.修改 [Blogroot]\themes\butterfly\layout\includes\rightside.pug, 把原本的昼夜切换按钮替换掉：

when 'translate'
  if translate.enable
    button#translateLink(type="button" title=_p('rightside.translate_title'))= translate.default
when 'darkmode'
  if darkmode.enable && darkmode.button
-     button#darkmode(type="button" title=_p('rightside.night_mode_title'))
-       i.fas.fa-adjust
+     a.icon-V.hidden(onclick='switchNightMode()',  title=_p('rightside.night_mode_title'))
+       svg(width='25', height='25', viewBox='0 0 1024 1024')
+         use#modeicon(xlink:href='#icon-moon')

6.修改 [Blogroot]_config.butterfly.yml, 引入一下 js：

inject:
  head:
  bottome:
    - <script src="/js/sun_moon.js" async></script>

7.重启项目并切换夜间模式即可看见效果

hexo cl; hexo s

昼夜转换动画2.0

逛博客看见别人的切换动画有月亮，而且颜色也很好看，于是一顿f12操作下大概看懂原理，再结合现在的动画改进一下就是了。(注意：在做本魔改前，请先完成店长的夜间模式切换动画，同时最好也要有引入Vue+Element弹窗。本动画是基于店长的样式改进的，加入了弯月，切换到夜间模式是太阳变月亮，切换到白天模式是月亮变太阳，同时背景颜色也改为了我喜欢的。)

1.替换原来的[BlogRoot]\source\js\sun_moon.js为以下代码，这里主要改进是由原来的after遮罩换为两个元素，再通过定时器来控制各自元素的透明度达到绘制太阳和月亮的目的：

function switchNightMode() {
    document.querySelector('body').insertAdjacentHTML('beforeend', '<div class="Cuteen_DarkSky"><div class="Cuteen_DarkPlanet"><div id="sun"></div><div id="moon"></div></div></div>'),
        setTimeout(function () {
            document.querySelector('body').classList.contains('DarkMode') ? (document.querySelector('body').classList.remove('DarkMode'), localStorage.setItem('isDark', '0'), document.getElementById('modeicon').setAttribute('xlink:href', '#icon-moon')) : (document.querySelector('body').classList.add('DarkMode'), localStorage.setItem('isDark', '1'), document.getElementById('modeicon').setAttribute('xlink:href', '#icon-sun')),
                setTimeout(function () {
                    document.getElementsByClassName('Cuteen_DarkSky')[0].style.transition = 'opacity 3s';
                    document.getElementsByClassName('Cuteen_DarkSky')[0].style.opacity = '0';
                    setTimeout(function () {
                        document.getElementsByClassName('Cuteen_DarkSky')[0].remove();
                    }, 1e3);
                }, 2e3)
        })
    const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
    if (nowMode === 'light') {
        // 先设置太阳月亮透明度
        document.getElementById("sun").style.opacity = "1";
        document.getElementById("moon").style.opacity = "0";
        setTimeout(function () {
            document.getElementById("sun").style.opacity = "0";
            document.getElementById("moon").style.opacity = "1";
        }, 1000);

        activateDarkMode()
        saveToLocal.set('theme', 'dark', 2)
        // GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
        document.getElementById('modeicon').setAttribute('xlink:href', '#icon-sun')
        // 延时弹窗提醒
        setTimeout(() => {
            new Vue({
                data: function () {
                    this.$notify({
                        title: "关灯啦🌙",
                        message: "当前已成功切换至夜间模式！",
                        position: 'top-left',
                        offset: 50,
                        showClose: true,
                        type: "success",
                        duration: 5000
                    });
                }
            })
        }, 2000)
    } else {
        // 先设置太阳月亮透明度
        document.getElementById("sun").style.opacity = "0";
        document.getElementById("moon").style.opacity = "1";
        setTimeout(function () {
            document.getElementById("sun").style.opacity = "1";
            document.getElementById("moon").style.opacity = "0";
        }, 1000);
        
        activateLightMode()
        saveToLocal.set('theme', 'light', 2)
        document.querySelector('body').classList.add('DarkMode'), document.getElementById('modeicon').setAttribute('xlink:href', '#icon-moon')
        setTimeout(() => {
            new Vue({
                data: function () {
                    this.$notify({
                        title: "开灯啦🌞",
                        message: "当前已成功切换至白天模式！",
                        position: 'top-left',
                        offset: 50,
                        showClose: true,
                        type: "success",
                        duration: 5000
                    });
                }
            })
        }, 2000)
    }
    // handle some cases
    typeof utterancesTheme === 'function' && utterancesTheme()
    typeof FB === 'object' && window.loadFBComment()
    window.DISQUS && document.getElementById('disqus_thread').children.length && setTimeout(() => window.disqusReset(), 200)
}

2.替换原来的[BlogRoot]\themes\butterfly\source\css\_layout\sun_moon.styl为以下代码，主要改变是的绘制太阳和月亮的矢量信息，还有背景颜色改进：

.Cuteen_DarkSky,
.Cuteen_DarkSky:before
  content ''
  position fixed
  left 0
  right 0
  top 0
  bottom 0
  z-index 88888888

.Cuteen_DarkSky
  background linear-gradient(to top, #f8cd71 0, #5bfde9 80%)
  &:before
    transition 2s ease all
    opacity 0
    background linear-gradient(to top, #30cfd0 0, #330867 100%)

.DarkMode
  .Cuteen_DarkSky
    &:before
      opacity 1

.Cuteen_DarkPlanet
  z-index 99999999
  position fixed
  left -50%
  top -50%
  width 200%
  height 200%
  -webkit-animation CuteenPlanetMove 2s cubic-bezier(0.7, 0, 0, 1)
  animation CuteenPlanetMove 2s cubic-bezier(0.7, 0, 0, 1)
  transform-origin center bottom


@-webkit-keyframes CuteenPlanetMove {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes CuteenPlanetMove {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.Cuteen_DarkPlanet
  #sun
    position absolute
    border-radius 100%
    left 44%
    top 30%
    height 6rem
    width 6rem
    background #ffee94
    box-shadow 0 0 40px #ffee94
    // opacity 0

  #moon
    position absolute
    border-radius 100%
    left 44%
    top 30%
    position absolute
    border-radius 100%
    height 6rem
    width 6rem
    box-shadow -1.8em 1.8em 0 0.2em #fff
    // opacity 1

  // &:after
  //   position absolute
  //   left 42%
  //   top 30%
  //   width 6rem
  //   height 6rem
  //   border-radius 50%
  //   content ''
  //   background #ffef9e
  //   box-shadow 0 0 30px #ffef9e

.search
  span
    display none

.menus_item
  a
    text-decoration none!important
//按钮相关，对侧栏按钮做过魔改的可以调整这里的数值
// .icon-V
//   padding 5px

3.重启项目并切换夜间模式即可看到效果：

hexo cl; hexo s

配置手机PC页面白天黑夜共四个背景图

1.首先是PC端的白天黑夜双背景，修改[BlogRoot]\themes\butterfly\layout\includes\layout.pug

+ - var DefaultBg = page.defaultbg ? page.defaultbg : theme.background.default
+ - var DDMBg = theme.background.darkmode ? theme.background.darkmode : DefaultBg
+ - var DarkmodeBg = page.darkmodebg ? page.darkmodebg : DDMBg
  if theme.background
    #web_bg
+     if page.defaultbg || page.darkmodebg
+       style.
+         #web_bg{
+           background: #{DefaultBg} !important;
+           background-attachment: local!important;
+           background-position: center!important;
+           background-size: cover!important;
+           background-repeat: no-repeat!important;
+         }
+         [data-theme="dark"]
+           #web_bg{
+             background: #{DarkmodeBg} !important;
+             background-attachment: local!important;
+             background-position: center!important;
+             background-size: cover!important;
+             background-repeat: no-repeat!important;
+           }

2.再是实现手机端的白天黑夜双背景，在[BlogRoot]\themes\butterfly\source\css\_layout目录下新建一个web-bg.styl文件，写入以下内容：

$web-bg-night = hexo-config('background.darkmode') ? unquote(hexo-config('background.darkmode')) : $web-bg
$mobile-bg-day = hexo-config('background.mobileday') ? unquote(hexo-config('background.mobileday')) : $web-bg
$mobile-bg-night = hexo-config('background.mobilenight') ? unquote(hexo-config('background.mobilenight')) : $web-bg-night
[data-theme="dark"]
  #web_bg
    background: $web-bg-night
    background-attachment: local
    background-position: center
    background-size: cover
    background-repeat: no-repeat
@media screen and (max-width: 800px)
  #web_bg
    background: $mobile-bg-day !important
    background-attachment: local !important
    background-position: center !important
    background-size: cover !important
    background-repeat: no-repeat !important
  [data-theme="dark"]
    #web_bg
      background: $mobile-bg-night !important
      background-attachment: local !important
      background-position: center !important
      background-size: cover !important
      background-repeat: no-repeat !important

3.然后还要修改一下[BlogRoot]\themes\butterfly\source\css\var.styl,大约35行的位置

  $text-line-height = 2
- $web-bg = hexo-config('background') && unquote(hexo-config('background'))
+ $web-bg = hexo-config('background.default') && unquote(hexo-config('background.default'))
  $index_top_img_height = hexo-config('index_top_img_height') ? convert(hexo-config('index_top_img_height')) : 100vh

4.再修改一下配置项，在[BlogRoot]/_config.butterfly.yml中找到background配置项，内容改为：

# Website Background (設置網站背景)
# can set it to color or image (可設置圖片 或者 顔色)
# The formal of image: url(http://xxxxxx.com/xxx.jpg)
background:
  default:  #【必选】默认背景
  darkmode: #【可选】PC端夜间模式背景
  mobileday: #【可选】移动端日间默认背景
  mobilenight: #【可选】移动端夜间模式背景

5.当开了Pjax，还要再把#web_bg加到pjax选择器中。修改[BlogRoot]\themes\butterfly\layout\includes\third-party\pjax.pug

  script(src=url_for(theme.CDN.pjax))
  script.
    let pjaxSelectors = [
      'title',
      '#config-diff',
      '#body-wrap',
      '#rightside-config-hide',
      '#rightside-config-show',
+     '#web_bg',
      '.js-pjax'
    ]