添加白天夜间模式转换动画

点击查看更新记录

更新记录

2022-03-11

1. 源教程转为pug文件，styl文件
2. 精简js内容，去jquery化
3. 嵌入主题原生的夜间切换模式按钮

点击查看参考教程

参考方向	教程原贴
原教程	butterfly主题实现白天夜晚切换动画

写在最前

其实这个动画切换效果不是第一次看到了，最早看到是在一些volantis主题的用户博客那里，比如银河小徐那里，百度了一下也搜到过volantis相关的魔改教程，当时没当回事，直到在今年勇那里想到了相对完善的源码，不过他嵌入的不是很完美，按钮在一个比较尴尬的地方。和我的副标题重合了，js也是依赖于jquery的，和最新版butterfly去jquery的理念相悖，所以心血来潮对这个教程做下完善，顺便去jquery。

魔改步骤

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:
     bottom:
       - <script src="/js/sun_moon.js" async></script>

7. 具体效果就自己切换下夜间模式看看吧。