主题优化 - XT-Blog

关于优化，我有话要说，主题优化除了官方给的优化外，其它基本都是靠九师傅帮忙建好的，超级感谢九师傅的帮助，九师傅NB！

九师傅的blog里面有很多好玩的东西，建议去看看。

地址：https://blog.lzwzw.cn/

然后记录一下优化过程：

尾部

效果：

这部分使用的是九师傅的接口，九师傅的文章链接：https://blog.lzwzw.cn/2020/06/25/%E4%B8%BB%E9%A2%98%E4%BF%AE%E6%94%B9/%E5%AE%9E%E7%8E%B0%E7%BD%91%E7%AB%99%E6%B5%81%E9%87%8F%E7%BB%9F%E8%AE%A1(%E5%89%8D%E7%AB%AF%E5%9F%8B%E7%82%B9)/

这部分的源码：

<div class="date">
            <span id="timeDate">载入天数...</span>
            <span class="times" id="times">载入时分秒...
            </span>
            <img src=/img/sanjiao.gif onload='if (this.width>34 || this.height>34) if (this.width/this.height>34/34) this.width=34; else this.height=34;'>
            <script>
              var now = new Date();
              function createtime() {
                var grt = new Date("02/04/2020 00:00:00");//此处修改你的建站时间或者网站上线时间
                now.setTime(now.getTime() + 250);
                days = (now - grt) / 1000 / 60 / 60 / 24;
                dnum = Math.floor(days);
                hours = (now - grt) / 1000 / 60 / 60 - (24 * dnum);
                hnum = Math.floor(hours);
                if (String(hnum).length == 1) {
                  hnum = "0" + hnum;
                }
                minutes = (now - grt) / 1000 / 60 - (24 * 60 * dnum) - (60 * hnum);
                mnum = Math.floor(minutes);
                if (String(mnum).length == 1) {
                  mnum = "0" + mnum;
                }
                seconds = (now - grt) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
                snum = Math.round(seconds);
                if (String(snum).length == 1) {
                  snum = "0" + snum;
                }
                document.getElementById("timeDate").innerHTML = "本站已经摇摇晃晃运行了&nbsp" + dnum + "&nbsp天";
                document.getElementById("times").innerHTML = hnum + "&nbsp小时&nbsp" + mnum + "&nbsp分&nbsp" + snum + "&nbsp秒";
              }
              setInterval("createtime()", 250);
            </script>
          </div>

将其插入themes\fluid\layout_partial\footer.ejs中你想展示的地方。

至于gif动图：

<img src=/img/sanjiao.gif onload='if (this.width>34 || this.height>34) if (this.width/this.height>34/34) this.width=34; else this.height=34;'>

找到上面代码中的这部分，将图片换掉就好。

夜间模式

注意事项：以下修改的前提是这篇文章的样式：https://hexo.fluid-dev.com/posts/hexo-darkmode/

至于这个小太阳，切换夜间模式的功能；这部分没少问九师傅，虽然本人很菜，但有个乐于助人的师傅，在师傅的精心教导下，还是弄好了；再次感谢九师傅！！师傅NB！！

源样式文章地址：https://hexo.fluid-dev.com/posts/hexo-darkmode/

css

在css样式中

/* 切换按钮 */
#dark
  cursor pointer
  position fixed
  right 40px
  bottom 98px
  width 16px
  height 14px
  z-index 100
  font-size 20px

/*暗黑模式*/
.dark
  background-color #282c34

  /* 背景遮罩 */
  .mask
    background-color rgba(0,0,0,.7) !important

  /* 主体 */
  #board 
    background-color #282c34
    color #a09c9c
  
  img  
    filter brightness(50%) // 图片亮度

  p
  .index-info a  
    color #a09c9c !important

  .markdown-body
    h1,h2,h3,h4,h5,h6,s,li  
      color:#a09c9c !important
    

  /* 顶栏 */
  .navbar-col-show
  .top-nav-collapse  
    background-color #282c34
    
  .navbar a  
    color #a09c9c !important
    
  .animated-icon span   /* 手机端 */
    background-color #a09c9c


  /* page-number */
  .pagination a:hover
  .pagination .current  
    background-color #6b6b6b73;


  /* 打字机 */
  #subtitle
  .dark.typed-cursor--blink
  .scroll-down-arrow
    color #dfdfdf


  /* back to top */
  #scroll-top-button
    background-color #282c34

    i
      color #a09c9c
    

  /* Toc */
  .tocbot-list a
    color #a09c9c

  .tocbot-active-link
  footer a:hover
    color #1abc9c !important


  /* footer */
  footer
  footer a
    color #a09c9c
    

  /* 归档页 */
  .list-group-item
    color #a09c9c
    background-color #282c34
    
  .list-group-item:hover
  .tagcloud a:hover
    background-color #46484d


  /* 友链页 */
  .links
    .card  
      background-color #282c34
        
    .card-body:hover  
      background-color #46484d
        
    .link-title
    .link-intro  
      color #a09c9c
    

  /* note标签 配色有点丑 */
  .note-info
    background-color #3b5359
    border-color #006d80

  .note-danger
    background-color #783f42
    border-color #670009

  .note-success
    background-color #2a3e2e
    border-color #005915

  .note-warning
    background-color #5b543e
    border-color #846500

  .note-primary
    background-color #455a6f
    border-color #004188

将下面这部分

/* 切换按钮 */
#dark
  cursor pointer
  position fixed
  right 40px
  bottom 98px
  width 16px
  height 14px
  z-index 100
  font-size 20px

替换为下面这部分：

/* 切换按钮 */
#dark
{
  background: url('/img/太阳.png');
  background-size: 100% 100% !important;
  cursor: pointer;
  width: 24px;
  height: 24px;
  margin-top: 5px;
  margin-left: 8px;
  list-style:none;
}

注意图片的插入；这里的图片用的是九师傅给的图片，有需要的自行下载（估计也没人需要）：

https://img.mvpxt.cn/%E5%A4%AA%E9%98%B3.png

https://img.mvpxt.cn/%E6%9C%88%E4%BA%AE.png

然后全局搜索：

switchDarkMode（）

找到

<div id="dark" onclick=" switchDarkMode( )">（手动小太阳图标）

如图所示：

将它移到\fluid\layout_partial\nav.ejs 的这个位置后修改为：

如图所示：

js文件修改

原本自定义样式的js文件先删了

找到\themes\fluid\layout；将原本样式删掉。

删掉图中所示：

找到\fluid\layout_partial\nav.ejs ；将下图代码加到nav下面

<script>
  var isNight = new Date().getHours() >= 22 || new Date().getHours() < 5; // 指定时间
  // 依次判断 系统暗黑模式 指定时间 缓存 dark
  if (matchMedia('(prefers-color-scheme: dark)').matches || isNight || localStorage.getItem('dark') === '1') {
    if (!(isNight && localStorage.getItem('noDark') === '1')) {
      document.body.classList.add('dark');
    }
  }
  //点击事件
  function switchDarkMode() {
    if ($('body').hasClass('dark')) {
      document.getElementById('dark').style.backgroundImage = 'url(/img.png)'
      document.body.classList.remove('dark');
      localStorage.setItem('noDark', '1');
      localStorage.setItem('dark', '0');
    } else {
      document.getElementById('dark').style.backgroundImage = 'url(/img.png)'
      document.body.classList.add('dark');
      localStorage.setItem('dark', '1');
      localStorage.setItem('noDark', '0');
    }
  }

</script>

如图所示：

找到

将其改成图片路径名

然后就完成啦！

除此之外还有主题加入一言，文章地址：

https://hexo.fluid-dev.com/posts/fluid-hitokoto/