Hexoの魔改 - 美化系列(一)，装饰和设计你的页面！

前言

本站基于Hexo搭建，用的是 最新的🦋 hexo-theme-butterfly 主题 v4.5.1，如果你是 v4.5.1 之外的版本，可能有些地方会有出入，请留意。

注意：
我的博客根目录路径为 【D:/Hexo/demo】，下文所说的根目录都是此路径，将用[BlogRoot]代替。

修改站点配置文件_config.yml，路径为[BlogRoot]/_config.yml。

修改主题配置文件_config.butterfly.yml，路径为[BlogRoot]/_config.butterfly.yml。

如果目录[BlogRoot]/themes下没有任何文件的，请用Git拉取themes目录，推荐使用gitee。

git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly

diff代码块中的+和-是指应该添加和删去的内容

添加Pixiv日榜

效果预览

查看步骤

1. 在[BlogRoot]/themes/butterfly/layout/includes/widget 文件夹新建card_pixiv.pug文件，文件内容如下：

   .card-widget.card-pixiv
    .card-content
     .item-headline
       i.fa.fa-image(aria-hidden="true")
       //- span后为日榜标题，可以自行更改
       span Pixiv日榜Top50
       iframe(src="https://cloud.mokeyjay.com/pixiv" frameborder="0"  style="width:99%;height:380px;margin:0;")

   https://cloud.mokeyjay.com/pixiv 使用的是超能小紫 提供的服务，也可以自行搭建，搭建方式请看这里。
2. 编辑[BlogRoot]/themes/butterfly/layout/includes/widget/index.pug 文件，找到page部分,在你想要显示的位置插入以下代码：

   //- page
   if theme.aside.card_pixiv
       !=partial('includes/widget/card_pixiv', {}, {cache:true})

3. 编辑主题配置文件_config.butterfly.yml 搜索aside，在其下面添加如下代码。

   # aside:
     card_pixiv:
       enable: true

公告栏两个小人

效果预览

查看步骤

在[BlogRoot]/themes/butterfly/layout/includes/widget/card_announcement.pug 下添加如下部分代码。
注意: 将代码复制到card_announcement.pug文件以后，不难发现会有重复的一段代码。你要做的一步操作是，删除重复的代码（优先保留你主题版本原有的代码）

if theme.aside.card_announcement.enable
  .card-widget.card-announcement
    .item-headline
      i.fas.fa-bullhorn.card-announcement-animation
      span= _p('aside.card_announcement')
    .announcement_content!= theme.aside.card_announcement.content
  .xpand(style='height:200px;')
    canvas.illo(width='800' height='800' style='max-width: 200px; max-height: 200px; touch-action: none; width: 640px; height: 640px;')
script(src='https://npm.elemecdn.com/ethan4116-blog/lib/js/other/two-people/twopeople1.js')
script(src='https://npm.elemecdn.com/ethan4116-blog/lib/js/other/two-people/zdog.dist.js')
script#rendered-js(src='https://npm.elemecdn.com/ethan4116-blog/lib/js/other/two-people/twopeople.js')
style.
 .card-widget.card-announcement {
 margin: 0;
 align-items: center;
 justify-content: center;
 text-align: center;
 }
 canvas {
 display: block;
 margin: 0 auto;
 cursor: move;
 }

添加白天黑夜切换动画

效果预览

查看步骤

1. 在目录[Blogroot]/themes/butterfly/layout/includes/custom 下，新建sun_moon.pug文件，内容如下。(没有custom目录可以新建一个)

   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文件，内容如下。

   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. 修改主题配置文件_config.butterfly.yml,引入一下js。

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

背景切换

主题面板

鼠标右键菜单

文章置顶滚动栏

首页分类磁贴

文章双侧栏显示

wowjs动画

个人卡片渐变色

自定义字体

黑夜霓虹灯

星空背景和流星特效