综合美化模块教程

魔改前必看（我当你们都懂了，太细节的就不写在教程中了🤣🤣🤣）

1. 博客魔改有风险，如果博客魔改出问题了又没有备份，可通过此项目查看基础源码进行 回滚： jerryc127/hexo-theme-butterfly、 ccknbc-actions/blog-butterfly。
2. 这部分魔改基本上都是大佬们造好的轮子，我按照大佬们的轮子结合自己的喜好进行魔改的，具体见我友人帐第一个栏目大佬们的网站，本处仅做一个总结，如有侵权请联系删除。
3. 鉴于每个人的根目录名称都不一样，本帖 博客根目录 一律以 [BlogRoot] 指代。
4. 本帖涉及魔改源码的内容，会使用 diff代码块 标识，复制时请 不要忘记删除 前面的 +、- 符号。
5. 因为 .pug 和 .styl 以及 .yml 等对缩进要求较为严格，请尽量 不要使用记事本等无法提供语法高亮的文本编辑器 进行修改。
6. 本帖基于 Butterfly主题 进行魔改方案编写，因此请读者优先掌握 Butterfly主题官方文档 的内容后再来进行魔改。
7. 魔改会过程常常引入 自定义的css与js文件，方法见 Hexo博客添加自定义css和js文件(太懒了不想自己写)

1.介绍

参考： Leonus：切换博客背景2.0版本——弹窗切换

本教程是在Leonus大佬的基础上做自己的二次开发，加上了很多功能。为什么要单独开一篇文章讲这个教程？因为这个教程可能长期会更新，后面可能会加功能、改动功能之类的；而且这个魔改的耦合程度比较高，代码量也比较大，魔改失败的概率会比较大，我第一次写也没有运行过，只是凭印象写的，所以专门开一篇文章供大家讨论吧。（毕竟我也只是个非科班的，不是专门搞前端这方面的，比我厉害的大佬多了去了🤣）大家有什么好的创意也可以在评论区提出来，或者在这个基础上继续进行二次开发，创造出更有意思的功能！

效果预览

此魔改耦合程度较高，需要完成的前置教程比较多，稍微不小心就会改错，建议一定要备份好自己的代码再来改动，改废了不赔偿！前置教程与知识：星空背景、霓虹灯、页面css参数化、帧率监测、鼠标魔改、按键防抖、自定义字体引入、vue样式弹窗的的引入、开启Pjax、外挂标签、白天黑夜手机电脑不同背景、熟悉Leonus的原教程以及会引入css与js文件、有最基础的html、pug、css、js知识

2.教程正文

1. 在 [BlogRoot]\themes\butterfly\layout\includes\header\nav.pug 适当的位置加入如下代码，这是 winbox 的入口按钮。我是在导航栏引入的，如果在右边按钮引入请参考leonus的代码，差不多：

+      //- 美化设置
+      a.meihua.faa-parent.animated-hover(onclick="toggleWinbox()" title="美化设置-自定义你的风格" id="meihua-button")
+        svg.faa-tada.icon(style="height:26px;width:26px;fill:currentColor;position:relative;top:8px" aria-hidden="true")
+          use(xlink:href='#icon-tupian1')

如果之前按着我的导航栏修改，那就可以直接用了，不用加，贴一份修改好后的 nav.pug：

nav#nav
  span#blog_name
    a#site-name(href=url_for('/')) #[=config.title]
    
  #menus
    !=partial('includes/header/menu_item', {}, {cache: true})
    //- 这两行是导航栏显示标题用的
    center(id="name-container")
      a(id="page-name" href="javascript:scrollToTop()") PAGE_NAME
      
    #nav-right
      if (theme.algolia_search.enable || theme.local_search.enable)
        #search-button
          //- a.site-page.social-icon.search
          //-   i.fas.fa-search.fa-fw
          a.search.faa-parent.animated-hover(title="检索站内任何你想要的信息")
            svg.faa-tada.icon(style="height:24px;width:24px;fill:currentColor;position:relative;top:6px" aria-hidden="true")
              use(xlink:href='#icon-valentine_-search-love-find-heart')
            span=' '+_p('search.title')    

      //- 美化设置
      a.meihua.faa-parent.animated-hover(onclick="toggleWinbox()" title="美化设置-自定义你的风格" id="meihua-button")
        svg.faa-tada.icon(style="height:26px;width:26px;fill:currentColor;position:relative;top:8px" aria-hidden="true")
          use(xlink:href='#icon-tupian1')

      //- 暗黑模式按钮
      a.sun_moon.faa-parent.animated-hover(onclick='switchNightMode()',  title=_p('rightside.night_mode_title') id="nightmode-button")
        svg.faa-tada(style="height:25px;width:25px;fill:currentColor;position:relative;top:7px", viewBox='0 0 1024 1024')
          use#modeicon(xlink:href='#icon-moon')        
        
      #toggle-menu
        a
          i.fas.fa-bars.fa-fw

1. 新建 [BlogRoot]\source\js\meihua.js，这是该模块的主体函数，比较长，主要是分为3部分： 加载页面逻辑、 窗口绘制、 窗口内部逻辑，里面的壁纸可以自己进行替换（记住不要直接用我的）， 默认背景、 默认字体 需要你自己修改（代码中有 xxx 的地方），另外模块内部有什么东西就在 winbox.body.innerHTML 里面加就行：

   // 更新版本需要每个用户都恢复一次默认设置
   if (localStorage.getItem("reset_2") == undefined) {
     localStorage.setItem("reset_2", "1");
     localStorage.removeItem("reset_1");
     clearItem();
     setTimeout(function () {
       new Vue({
         data: function () {
           this.$notify({
             title: "提示🍒",
             message: " (｡･∀･)ﾉﾞ由于网站部分设置项更新，当前已为您重置所有设置，祝您愉快！",
             position: 'top-left',
             offset: 50,
             showClose: true,
             type: "success",
             duration: 8000
           });
         }
       })
     }, 1500);
   }
   
   // 清除localStorage配置项
   function clearItem() {
     localStorage.removeItem('blogbg');
     localStorage.removeItem('universe');
     localStorage.removeItem('blur');
     localStorage.removeItem('fpson');
     localStorage.removeItem('transNum');
     localStorage.removeItem('bing');
     localStorage.removeItem('blurRad');
     localStorage.removeItem('font');
     localStorage.removeItem('themeColor');
     localStorage.removeItem('rs');
     localStorage.removeItem('mouse');
   }
   
   
   // 设置字体
   if (localStorage.getItem("font") == undefined) {
     localStorage.setItem("font", "xxx");
   }
   setFont(localStorage.getItem("font"));
   function setFont(n) {
     localStorage.setItem("font", n)
     if (n == "default") {
       document.documentElement.style.setProperty('--global-font', '-apple-system');
       document.body.style.fontFamily = "-apple-system, Consolas_1, BlinkMacSystemFont, 'Segoe UI' , 'Helvetica Neue' , Lato, Roboto, 'PingFang SC' , 'Microsoft JhengHei' , 'Microsoft YaHei' , sans-serif";
     }
     else {
       document.documentElement.style.setProperty('--global-font', n);
       document.body.style.fontFamily = "var(--global-font),-apple-system, IBM Plex Mono ,monosapce,'微软雅黑', sans-serif";
     }
     try { setFontBorder(); } catch (err) { };
   }
   
   // 设置字体选择框边界
   function setFontBorder() {
     var curFont = localStorage.getItem("font");
     var swfId = "swf_" + curFont;
     document.getElementById(swfId).style.border = "2px solid var(--theme-color)";
     Array.prototype.forEach.call(document.getElementsByClassName("swf"), function (ee) {
       if (ee.id != swfId) ee.style.border = "2px solid var(--border-color)";
     });
   }
   
   
   // 设置主题色
   if (localStorage.getItem("themeColor") == undefined) {
     localStorage.setItem("themeColor", "green");
   }
   setColor(localStorage.getItem("themeColor"));
   function setColor(c) {
     document.getElementById("themeColor").innerText = `:root{--theme-color:` + map.get(c) + ` !important}`;
     localStorage.setItem("themeColor", c);
     // 刷新鼠标颜色
     CURSOR.refresh();
     // 设置一个带有透明度的主题色，用于菜单栏的悬浮颜色
     var theme_color = map.get(c);
     var trans_theme_color = "rgba" + theme_color.substring(3, theme_color.length - 1) + ", 0.7)";
     document.documentElement.style.setProperty("--text-bg-hover", trans_theme_color);
   }
   
   
   // 控制星空背景特效开关
   if (localStorage.getItem("universe") == undefined) {
     localStorage.setItem("universe", "block");
   }
   
   setUniverse2(localStorage.getItem("universe"));
   function setUniverse2(c) {
     document.getElementById("universe").style.display = c;
     localStorage.setItem("universe", c);
   }
   
   function setUniverse() {
     if (document.getElementById("universeSet").checked) {
       setUniverse2("block");
     } else {
       setUniverse2("none");
     }
   }
   
   // 帧率监测开关
   if (localStorage.getItem("fpson") == undefined) {
     localStorage.setItem("fpson", "1");
   }
   function fpssw() {
     if (document.getElementById("fpson").checked) {
       localStorage.setItem("fpson", "1");
     } else {
       localStorage.setItem("fpson", "0");
     }
     setTimeout(reload, 600);
   }
   
   // 刷新窗口
   function reload() {
     window.location.reload();
   }
   
   // 侧边栏开关
   if (localStorage.getItem("rs") == undefined) {
     localStorage.setItem("rs", "block");
   }
   if (localStorage.getItem("rs") == "block") {
     document.getElementById("rightSide").innerText = `:root{--rightside-display: block}`;
   } else {
     document.getElementById("rightSide").innerText = `:root{--rightside-display: none}`;
   }
   function toggleRightside() {
     // 先设置localStorage变量
     if (document.getElementById("rightSideSet").checked) {
       localStorage.setItem("rs", "block");
       document.getElementById("rightSide").innerText = `:root{--rightside-display: block}`;
     } else {
       localStorage.setItem("rs", "none");
       document.getElementById("rightSide").innerText = `:root{--rightside-display: none}`;
     }
   }
   
   
   // 透明度调节滑块
   if (localStorage.getItem("transNum") == undefined) {
     localStorage.setItem("transNum", 95);
   }
   var curTransNum = localStorage.getItem("transNum");
   var curTransMini = curTransNum * 0.95;
   document.getElementById("transPercent").innerText = `:root{--trans-light: rgba(253, 253, 253, ${curTransNum}%) !important; --trans-dark: rgba(25, 25, 25, ${curTransNum}%) !important} `;
   function setTrans() {
     var elem = document.getElementById("transSet");
     var newTransNum = elem.value;
     var target = document.querySelector('.transValue');
     target.innerHTML = "透明度 (0%-100%): " + newTransNum + "%";
     localStorage.setItem("transNum", newTransNum);
     curTransMini = newTransNum * 0.95;
     curTransNum = newTransNum;  // 更新当前透明度
     document.querySelector('#rang_trans').style.width = curTransMini + "%";
     document.getElementById("transPercent").innerText = `:root{--trans-light: rgba(253, 253, 253, ${newTransNum}%) !important; --trans-dark: rgba(25, 25, 25, ${newTransNum}%) !important} `;
   };
   
   
   // 模糊度调节滑块
   if (localStorage.getItem("blurRad") == undefined) {
     localStorage.setItem("blurRad", 20);
   }
   var curBlur = localStorage.getItem("blurRad"); // 当前模糊半径
   var miniBlur = curBlur * 0.95;
   document.getElementById("blurNum").innerText = `:root{--blur-num: blur(${curBlur}px) saturate(120%) !important`;
   function setBlurNum() {
     var elem = document.getElementById("blurSet");
     var newBlur = elem.value;
     var target = document.querySelector('.blurValue');
     target.innerHTML = "模糊半径 (开启模糊生效 0px-100px): " + newBlur + "px";
     localStorage.setItem("blurRad", newBlur);
     curBlur = newBlur;
     miniBlur = curBlur * 0.95;
     // var max = elem.getAttribute("max");
     document.querySelector('#rang_blur').style.width = miniBlur + "%";
     document.getElementById("blurNum").innerText = `:root{--blur-num: blur(${curBlur}px) saturate(120%) !important`;
   };
   
   
   // 模糊效果开关
   if (localStorage.getItem("blur") == undefined) {
     localStorage.setItem("blur", 0);
   }
   if (localStorage.getItem("blur") == 0) {
     document.getElementById("settingStyle").innerText = `:root{--backdrop-filter: none}`;
   } else {
     document.getElementById("settingStyle").innerText = `:root{--backdrop-filter: var(--blur-num)}`;
   }
   function setBlur() {
     if (document.getElementById("blur").checked) {
       localStorage.setItem("blur", 1);
       document.getElementById("settingStyle").innerText = `:root{--backdrop-filter: var(--blur-num)}`;
     } else {
       localStorage.setItem("blur", 0);
       document.getElementById("settingStyle").innerText = `:root{--backdrop-filter: none}`;
     }
   }
   
   // 切换自定义颜色
   var defineColor = localStorage.getItem("blogbg") && localStorage.getItem("blogbg").charAt(0) == '#' ? localStorage.getItem("blogbg") : '#F4D88A';
   function changeBgColor() {
     changeBg(document.querySelector("#colors").value);
   }
   
   // 更换背景(自己的代码)
   if (localStorage.getItem("blogbg") != undefined) {
     let curBg = localStorage.getItem("blogbg");
     document.getElementById("defineBg").innerText = `:root{
       --default-bg: ${curBg};
       --darkmode-bg: ${curBg};
       --mobileday-bg: ${curBg};
       --mobilenight-bg: ${curBg};
     }`;
     changeBg(curBg);
   } else {
       // 替换你自己的默认背景
     document.getElementById("defineBg").innerText = `:root{
       --default-bg: url(xxx);
       --darkmode-bg:url(xxx);
       --mobileday-bg: url(xxx);
       --mobilenight-bg: url(xxx);
     }`;
   }
   function changeBg(s) {
     let bg = document.getElementById("web_bg");
     if (s.charAt(0) == "#") {
       bg.style.backgroundColor = s;
       bg.style.backgroundImage = "none";
       defineColor = s;
     } else {
       bg.style.backgroundImage = s
       defineColor = '#F4D88A';
     };
     localStorage.setItem("blogbg", s);
     localStorage.setItem("bing", "false");
     if (document.getElementById("bingSet")) document.getElementById("bingSet").checked = false;
   }
   
   
   // 切换链接对应的背景(加入了链接检验与防抖)
   function getPicture() {
     debounce(getPicture_, 300);
   }
   
   function getPicture_() {
     let bg = document.getElementById("web_bg");
     checkImgExists(document.getElementById("pic-link").value).then(() => {
       // 有效的图片链接
       var link = "url(" + document.getElementById("pic-link").value + ")";
       bg.style.backgroundImage = link;
       localStorage.setItem("blogbg", link);
       localStorage.setItem("bing", "false");
       if (document.getElementById("bingSet")) document.getElementById("bingSet").checked = false;
       // 提示切换成功
       new Vue({
         data: function () {
           this.$notify({
             title: "可以啦🍨",
             message: "切换自定义背景成功！",
             position: 'top-left',
             offset: 50,
             showClose: true,
             type: "success",
             duration: 5000
           });
         }
       })
     }).catch(() => {
       // 无效的图片链接，提示无效
       new Vue({
         data: function () {
           this.$notify({
             title: "链接不对🤣",
             message: "请输入有效的图片链接！",
             position: 'top-left',
             offset: 50,
             showClose: true,
             type: "warning",
             duration: 5000
           });
         }
       })
     })
   }
   // 判断图片链接是否可用
   function checkImgExists(imgurl) {
     return new Promise(function (resolve, reject) {
       var ImgObj = new Image();
       ImgObj.src = imgurl;
       ImgObj.onload = function (res) {
         resolve(res);
       }
       ImgObj.onerror = function (err) {
         reject(err);
       }
     })
   }
   
   
   // 必应每日图片
   if (localStorage.getItem("bing") == undefined) {
     localStorage.setItem("bing", "false");
   }
   if (localStorage.getItem("bing") == "true") {
     let bg = document.getElementById("web_bg");
     // 手机电脑分开
     let curUrl = screen.width <= 768 ? "url(https://bing.img.run/m.php)" : "url(https://bing.img.run/1920x1080.php)";
     bg.style.backgroundImage = curUrl;
   }
   function setBing() {
     // 打开就设置
     if (document.getElementById("bingSet").checked) {
       let bg = document.getElementById("web_bg");
       // 手机电脑分开
       let curUrl = screen.width <= 768 ? "url(https://bing.img.run/m.php)" : "url(https://bing.img.run/1920x1080.php)";
       bg.style.backgroundImage = curUrl;
       localStorage.setItem("bing", "true");
       localStorage.removeItem("blogbg");
     } else {
       // 关闭就移除并恢复默认壁纸
       localStorage.setItem("bing", "false");
       setTimeout(reload, 600);
     }
   }
   
   // 霓虹灯开关
   var clk;  // 定时器对象
   if (localStorage.getItem("light") == undefined) {
     localStorage.setItem("light", true);
   }
   if (localStorage.getItem("light") == "true") {
     clearInterval(clk);
     clk = setInterval(changeLightColor, 1200);
   }
   function setLight() {
     if (document.getElementById("lightSet").checked) {
       clearInterval(clk);
       clk = setInterval(changeLightColor, 1200);
       localStorage.setItem("light", "true");
     } else {
       clearInterval(clk);
       localStorage.setItem("light", "false");
       // 恢复默认
       if (document.getElementById("site-name"))
         document.getElementById("site-name").style.textShadow = "#1e1e1ee0 1px 1px 1px";
       if (document.getElementById("site-title"))
         document.getElementById("site-title").style.textShadow = "#1e1e1ee0 1px 1px 1px";
       if (document.getElementById("site-subtitle"))
         document.getElementById("site-subtitle").style.textShadow = "#1e1e1ee0 1px 1px 1px";
       if (document.getElementById("post-info"))
         document.getElementById("post-info").style.textShadow = "#1e1e1ee0 1px 1px 1px";
       try {
         document.getElementsByClassName("author-info__name")[0].style.textShadow = "";
         document.getElementsByClassName("author-info__description")[0].style.textShadow = "";
       } catch {
   
       }
     }
   }
   
   // 创建窗口
   var winbox = "";
   
   function createWinbox() {
     let div = document.createElement("div");
     document.body.appendChild(div);
     winbox = WinBox({
       id: "meihuaBox",
       index: 99,
       title: "美化设置",
       x: "left",
       y: "center",
       minwidth: "300px",
       height: "60%",
       background: 'var(--theme-color)',
       onmaximize: () => {
         div.innerHTML = `<style>body::-webkit-scrollbar {display: none;} div#meihuaBox {width: 100% !important;}</style>`;
       },
       onrestore: () => {
         div.innerHTML = "";
       },
     });
     winResize();
     window.addEventListener("resize", winResize);
   
     // 每一类我放了一个演示，直接往下复制粘贴 a标签 就可以，需要注意的是 函数里面的链接 冒号前面需要添加反斜杠\进行转义
     winbox.body.innerHTML = `
   <div class="settings" style="display: block;">
   <div id="article-container" style="padding:12px;">
   <br>
   <center><p><button onclick="reset()" style="background:linear-gradient(to right, #fc354c, #0abfbc);display:block;width:40%;padding:15px 0;border-radius:30px;color:white;font-size:1.1em;"><i class="fa-solid fa-arrows-rotate"></i>&nbsp;恢复默认设置</button></p></center>
   
   <h2>一、显示偏好</h2>
   
   <div class="transValue" style="font-weight:bold;padding-left:10px">透明度 (0%-100%): ${curTransNum}%</div>
   <div class="range">
     <input id="transSet" type="range" min="0" max="100" step="1" value=${curTransNum} oninput="setTrans()">
     <p class="rang_width" id="rang_trans" style="width:${curTransMini}%"></p>
   </div>
   
   <div class="blurValue" style="font-weight:bold;padding-left:10px">模糊半径 (开启模糊生效 0px-100px): ${curBlur} px</div>
   <div class="range">
     <input id="blurSet" type="range" min="0" max="100" step="1" value="${curBlur}" oninput="setBlurNum()">
     <p class="rang_width" id="rang_blur" style="width:${miniBlur}%"></p>
   </div>
   
   
   <div class="content" style="display:flex">
     <div class="content-text" style="font-weight:bold; padding-left:10px"> 星空特效 (夜间模式) </div><input type="checkbox" id="universeSet" onclick="setUniverse()">
     <div class="content-text" style="font-weight:bold; padding-left:20px"> 霓虹灯 (夜间模式) </div><input type="checkbox" id="lightSet" onclick="setLight()">
   </div>
   
   <div class="content" style="display:flex">
     <div class="content-text" style="font-weight:bold; padding-left:10px"> 模糊效果 (消耗性能) </div><input type="checkbox" id="blur" onclick="setBlur()">
     <div class="content-text" style="font-weight:bold; padding-left:20px"> 侧边栏 (默认开) </div><input type="checkbox" id="rightSideSet" onclick="toggleRightside()">
   </div>
   
   <div class="content" style="display:flex">
     <div class="content-text" style="font-weight:bold; padding-left:10px"> 帧率监测 (刷新生效) </div><input type="checkbox" id="fpson" onclick="fpssw()">
     <div class="content-text" style="font-weight:bold; padding-left:20px"> 必应每日壁纸 </div><input type="checkbox" id="bingSet" onclick="setBing()">
   </div>
   
   <h2>二、字体设置</h2>
   {% note warning modern %}非商免字体未经授权只能个人使用。本站为完全非商业、非盈利性质的网站，平时用于个人学习交流，如有侵权请联系站长删除，谢谢！ —— 致版权方{% endnote %}
   <p id="swfs">
   <a class="swf" id="swf_ZhuZiAWan" href="javascript:;" rel="noopener external nofollow" style="font-family:'ZhuZiAWan'!important;color:black" onclick="setFont('ZhuZiAWan')">筑紫A丸标准体2.0</a>
   <a class="swf" id="swf_default" href="javascript:;" rel="noopener external nofollow" style="font-family:-apple-system, IBM Plex Mono ,monosapce,'微软雅黑', sans-serif;!important;color:black" onclick="setFont('default')">系统默认</a>
   </p>
   
   <h2>三、主题色设置</h2>
   <div class="content" style="display:flex"><input type="radio" id="red" name="colors" value=" "
           onclick="setColor('red')"><input type="radio" id="orange" name="colors" value=" "
           onclick="setColor('orange')"><input type="radio" id="yellow" name="colors" value=" "
           onclick="setColor('yellow')"><input type="radio" id="green" name="colors" value=" "
           onclick="setColor('green')"><input type="radio" id="blue" name="colors" value=" "
           onclick="setColor('blue')"><input type="radio" id="heoblue" name="colors" value=" "
           onclick="setColor('heoblue')"><input type="radio" id="darkblue" name="colors" value=" "
           onclick="setColor('darkblue')"><input type="radio" id="purple" name="colors" value=" "
           onclick="setColor('purple')"><input type="radio" id="pink" name="colors" value=" "
           onclick="setColor('pink')" checked="checked"><input type="radio" id="black" name="colors" value=" "
           onclick="setColor('black')"><input type="radio" id="blackgray" name="colors" value=" "
           onclick="setColor('blackgray')"></div>
   
   <h2>四、背景设置</h2>
   <center><button onclick="resetBg()" style="background:var(--theme-color);display:block;width:35%;padding:15px 0;border-radius:30px;color:white;"><i class="fa-solid fa-arrows-rotate"></i>&nbsp;恢复默认背景</button></center>
   
   <h3>1. 二次元</h3>
   {% folding cyan, 查看二次元背景 %}
   <div class="bgbox">
   <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://sourcebucket.s3.ladydaily.com/img/home_bg.webp)" class="imgbox" onclick="changeBg('url(https\://sourcebucket.s3.ladydaily.com/img/home_bg.webp)')"></a>
   </div>
   {% endfolding %}
   
   
   <h3>2. 风景</h3>
   
   {% folding cyan, 查看风景背景 %}
   <div class="bgbox">
   <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://sourcebucket.s3.ladydaily.com/img/fj1.webp)" class="imgbox" onclick="changeBg('url(https://sourcebucket.s3.ladydaily.com/img/fj1.webp)')"></a>
   
   </div>
   {% endfolding %}
   
   <h3>3. 萌宠</h3>
   
   {% folding cyan, 查看萌宠背景 %}
   <div class="bgbox">
   <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://sourcebucket.s3.ladydaily.com/img/mc1.webp)" class="imgbox" onclick="changeBg('url(https://sourcebucket.s3.ladydaily.com/img/mc1.webp)')"></a>
   </div>
   {% endfolding %}
   
   <h3>4. 渐变色</h3>
   {% folding cyan, 查看渐变色背景 %}
   <div class="bgbox">
   <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: linear-gradient(to top, #355c7d, #6c5b7b, #c06c84)" onclick="changeBg('linear-gradient(to top, #355c7d, #6c5b7b, #c06c84)')"></a>
   </div>
   {% endfolding %}
   
   
   <h3>5. 纯色</h3>
   {% folding cyan, 查看纯色背景 %}
   <div class="bgbox">
   <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: #f7eff5" onclick="changeBg('#f7eff5')"></a>  
   <input type="color" id="colors" href="javascript:;" rel="noopener external nofollow" class="box" autocomplete="on" value="${defineColor}" oninput="changeBgColor()"></input>
   </div>
   {% endfolding %}
   
   
   
   <h3>6. 适配手机</h3>
   {% folding cyan, 查看适配手机的背景 %}
   <div class="bgbox">
   <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://sourcebucket.s3.ladydaily.com/img/mb4.webp)" class="pimgbox" onclick="changeBg('url(https\://sourcebucket.s3.ladydaily.com/img/mb4.webp)')"></a>
   {% endfolding %}
   
   
   <h3>7. 自定义背景</h3>
   {% folding cyan, 设置自定义背景 %}
   <p><center>
   <input type="text" id="pic-link" size="70%" maxlength="1000" placeholder="请输入有效的图片链接，如 https://source.fomal.cc/img/home_bg.webp">
   </center></p>
   <p><center>
   <button type="button" onclick="getPicture()" style="background:var(--theme-color);width:35%;padding: 5px 0px 7px 0px;border-radius:30px;color:white;line-height:2;">🌈切换背景🌈</button>
   </center></p>
   {% endfolding %}
   
   <br>
   <center><div style="font-size:1.2em;color:var(--theme-color);font-weight:bold;">------ ( •̀ ω •́ )y 到底啦 ------</div></center>
   <br>
   
   </div>
   
   </div>
   
   `;
   
     // 打开小窗时候初始化
     $("#" + localStorage.getItem("themeColor")).attr("checked", true);
     if (localStorage.getItem("blur") == 1) {
       document.getElementById("blur").checked = true;
     } else {
       document.getElementById("blur").checked = false;
     }
     if (localStorage.getItem("universe") == "block") {
       document.getElementById("universeSet").checked = true;
     } else if (localStorage.getItem("universe") == "none") {
       document.getElementById("universeSet").checked = false;
     }
     if (localStorage.getItem("fpson") == "1") {
       document.getElementById("fpson").checked = true;
     } else {
       document.getElementById("fpson").checked = false;
     }
     if (localStorage.getItem("rs") == "block") {
       document.getElementById("rightSideSet").checked = true;
     } else if (localStorage.getItem("rs") == "none") {
       document.getElementById("rightSideSet").checked = false;
     }
     if (localStorage.getItem("bing") == "true") {
       document.getElementById("bingSet").checked = true;
     } else {
       document.getElementById("bingSet").checked = false;
     }
     if (localStorage.getItem("light") == "true") {
       document.getElementById("lightSet").checked = true;
     } else {
       document.getElementById("lightSet").checked = false;
     }
     setFontBorder();
   
   }
   
   // 恢复默认背景
   function resetBg() {
     localStorage.removeItem('blogbg');
     reload();
   }
   
   // 恢复默认设置并刷新页面
   function reset() {
     clearItem();
     reload();
   }
   
   // 适应窗口大小
   function winResize() {
     try {
       var offsetWid = document.documentElement.clientWidth;
       if (offsetWid <= 768) {
         winbox.resize(offsetWid * 0.95 + "px", "90%").move("center", "center");
       } else {
         winbox.resize(offsetWid * 0.6 + "px", "70%").move("center", "center");
       }
     } catch (err) {
       // console.log("Pjax毒瘤抽风运行winResize方法🙄🙄🙄");
     }
   }
   
   // 切换状态，窗口已创建则控制窗口显示和隐藏，没窗口则创建窗口
   function toggleWinbox() {
     if (document.querySelector("#meihuaBox")) {
       winbox.toggleClass("hide");
     } else {
       createWinbox();
     };
   }

2. 在主题配置文件 _config.butterfly.yml 做如下修改，注意：主体js文件最后才引入，因为要依赖其他js，当然也可以整合在一起：

# 背景由js指定
background:
  default: var(--default-bg)
  darkmode: var(--darkmode-bg)
  mobileday: var(--mobileday-bg)
  mobilenight: var(--mobilenight-bg)
  
# 字体由js指定  
font:
  global-font-size: "15px"
  code-font-size: "14px"
  font-family: var(--global-font), -apple-system, 'Quicksand', 'Nimbus Roman No9 L', 'PingFang SC', 'Hiragino Sans GB', 'Noto Serif SC', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'ST Heiti', sans-serif;
  code-font-family: Consolas_1, var(--global-font), "Microsoft YaHei", Menlo, "PingFang SC", "Microsoft JhengHei", sans-serif

blog_title_font:
  font_link:
  font-family: var(--global-font)

# 主题色由js指定，因此部分需要留空，避免冗余加载  
theme_color:
  enable: true
  main: 
  paginator: 
  button_hover: 
  text_selection: 
  link_color: "#a591e0"
  meta_color: "#858585"
  hr_color: "#A4D8FA"
  code_foreground: 
  code_background: 
  toc_color: 
  blockquote_padding_color: 
  blockquote_background_color: 
  scrollbar_color: 
  meta_theme_color_light: "ffffff"
  meta_theme_color_dark: "#0d0d0d"  

# 引入部分样式与依赖
inject:
  head: 
  ...
    - <style id="themeColor"></style> # 主题色
    - <style id="rightSide"></style> # 侧边栏
    - <style id="transPercent"></style> # 透明度调节
    - <style id="blurNum"></style> # 模糊半径调节
    - <style id="settingStyle"></style> # 模糊效果开关
    - <span id="fps"></span> # 帧率检测
    - <style id="defineBg"></style> # 自定义背景选项
  bottom: 
  ...
    - <script defer src="https://cdn1.tianli0.top/gh/nextapps-de/winbox/dist/winbox.bundle.min.js"></script> # winbox支持
    - <script defer data-pjax src="/static/js/meihua.js"></script> # 美化模块    

1. 在自定义的 custom.css 中加入如下代码，注意部分需要自己修改(字体引入与前面的js文件的逻辑对应，可以1设置多个字体，那你的js的 winbox.body.innerHTML 就要写上多个选项)，这里的css基本做好了分区，细节的自行研究一下：

/* root伪类指定全局颜色(照抄) */
:root {
  --blue-custom: #5ea6e5;
  --loading-color: rgba(207, 246, 247, 0.92);
  --border-color: #c9c9c9;
  --color-red: rgb(241, 71, 71);
  --color-orange: rgb(241, 162, 71);
  --color-yellow: rgb(241, 238, 71);
  --color-purple: rgb(179, 71, 241);
  --color-blue: rgb(102, 204, 255);
  --color-gray: rgb(226, 226, 226);
  --color-green: rgb(57, 197, 187);
  --color-whitegray: rgb(241, 241, 241);
  --color-pink: rgb(237, 112, 155);
  --color-black: rgb(0, 0, 0);
  --color-darkblue: rgb(97, 100, 159);
  --color-heoblue: rgb(66, 90, 239);
  --btn-bg: var(--theme-color);
  --scrollbar-color: var(--theme-color);
  --border-style: 1px solid rgba(169, 169, 169, 0.7);
  /* 菜单栏悬浮带透明度的颜色 初始为rgba(73, 205, 245, 0.7) 已由js设置*/
  /* 代码框行数背景色 */
  --hlnumber-bg: #282c34;
  /* 代码框顶部背景色 */
  --hltools-bg: #1c1c1c;
  /* 代码框背景色 */
  --hl-bg: #282c34;
}

/* 字体引入（这里需要根据你自己想要待选的字体进行引入） */
@font-face {
  font-family: xxx;
  src: url(xxx);
  font-display: swap;
}


/* winbox样式(这块照抄即可) */
.winbox {
  border-radius: 12px;
  overflow: hidden;
}

.wb-body {
  background-color: #e5f1f5;
}

.wb-full {
  display: none;
}

.wb-min {
  background-position: center;
}

[data-theme="dark"] .wb-body,
[data-theme="dark"] #changeBgBox {
  background: #333 !important;
}

.bgbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.pimgbox,
.imgbox,
.box {
  height: 100px;
  width: 166px;
  margin: 10px;
  border-radius: 10px !important;
  background-size: cover;
}

.pimgbox,
.imgbox {
  border-radius: 10px;
  overflow: hidden;
}

.imgbox:hover,
.pimgbox:hover,
.box:hover {
  border: 3px solid var(--text-bg-hover);
}

.pimgbox {
  height: 240px;
}

.imgbox {
  height: 95px;
}

@media screen and (max-width: 768px) {
  /* 背景 */
  .pimgbox,
  .imgbox,
  .box {
    height: 73px;
    width: 135px;
  }
  .pimgbox {
    height: 205px;
  }

  /* 2.0新增内容 */
  .wb-min {
    display: none;
  }
  #changeBgBox .wb-body::-webkit-scrollbar {
    display: none;
  }
}

/* 主题色适配覆盖区域 */
.category-lists ul li:before {
  border: 0.215em solid var(--theme-color);
}
a:hover {
  color: var(--theme-color);
}
blockquote {
  border-left: 3px solid var(--theme-color);
}
#article-container .highlight-tools .copy-button:hover {
  color: var(--theme-color);
}
.error404 #error-wrap .error-content .error-img img {
  background-color: var(--theme-color);
}
.article-sort-title:before {
  border: 5px solid var(--theme-color);
}
.article-sort-item:before {
  order: 3px solid var(--theme-color);
}
.article-sort-item.year:hover:before {
  border-color: var(--theme-color);
}
.article-sort-item-title:hover {
  color: var(--theme-color);
}
.category-lists .category-list a:hover {
  color: var(--theme-color);
}
#recent-posts > .recent-post-item > .recent-post-info > .article-title:hover {
  color: var(--theme-color);
}
#recent-posts
  > .recent-post-item
  > .recent-post-info
  > .article-meta-wrap
  a:hover {
  color: var(--theme-color);
}
.tag-cloud-list a:hover {
  color: var(--theme-color) !important;
}
#aside-content .card-tag-cloud a:hover {
  color: var(--theme-color) !important;
}
#aside-content .aside-list > .aside-list-item .content > .comment:hover {
  color: var(--theme-color);
}
#aside-content #card-toc .toc-content .toc-link:hover {
  color: var(--theme-color);
  scale: 1.03;
}
*::selection {
  background: var(--theme-color);
}
#aside-content #card-toc .toc-content .toc-link.active {
  background: var(--theme-color);
  border-radius: 8px;
}
#aside-content #card-toc .toc-content .toc-link.active:hover {
  color: #fefefe;
}
.site-data > a:hover div {
  color: var(--theme-color) !important;
}

#post-comment .comment-head #comment-switch .first-comment {
  color: var(--theme-color);
}
#post-comment .comment-head #comment-switch .switch-btn {
  background-color: var(--theme-color);
}
#page-header.nav-fixed #nav #toggle-menu:hover {
  color: var(--theme-color);
}
#post-info #post-meta a:hover {
  color: var(--theme-color);
}
#pagination .page-number.current {
  background: var(--theme-color);
}
#article-container h1:hover:before,
#article-container h2:hover:before,
#article-container h3:hover:before,
#article-container h4:hover:before,
#article-container h5:hover:before,
#article-container h6:hover:before {
  color: var(--theme-color);
}
#article-container li::marker {
  color: var(--theme-color);
}
#post .tag_share .post-meta__tags {
  border: 1px solid var(--theme-color);
  color: var(--theme-color);
}
#post .tag_share .post-meta__tags:hover {
  background: var(--theme-color);
}
#post .post-copyright .post-copyright-meta {
  color: var(--theme-color);
}
#post .post-copyright-cc-info {
  color: var(--theme-color);
}
#waline-wrap {
  --waline-theme-color: var(--theme-color);
}
.hide-inline > .hide-button,
.hide-block > .hide-button {
  background: var(--theme-color);
}
#article-container .tabs > .nav-tabs > .tab.active button {
  border-top: 2px solid var(--theme-color);
}
#article-container .timeline {
  border-left: 2px solid var(--timeline-color, var(--theme-color));
}
#article-container .timeline .timeline-item:hover .item-circle:before {
  border-color: var(--timeline-color, var(--theme-color));
}
#article-container
  .timeline
  .timeline-item.headline
  .timeline-item-title
  .item-circle:before {
  border: 4px solid var(--timeline-color, var(--theme-color));
}
.search-dialog .search-nav {
  color: var(--theme-color);
}
.search-dialog .search-nav .search-close-button:hover {
  color: var(--theme-color);
}
#local-search .search-dialog .local-search-box input {
  border: 2px solid var(--theme-color);
}
#local-search .search-dialog .local-search__hit-item:before {
  border: 3px solid var(--theme-color);
}
#local-search .search-dialog .local-search__hit-item a:hover {
  color: var(--theme-color);
}
#nav *::after {
  background-color: var(--theme-color) !important;
}

.article-sort {
  border-left: 2px solid var(--theme-color);
}

.article-sort-title:after {
  background: var(--theme-color);
}

.article-sort-item:before {
  border: 3px solid var(--theme-color);
}



/* 背景图片链接输入框placeholder*/
input#pic-link::-webkit-input-placeholder {
  color: rgb(150, 150, 150);
}

input#pic-link {
  width: 82%;
  border-radius: 30px;
  border: 1px solid var(--theme-color);
  padding: 5px 10px 5px 10px;
  line-height: 2;
  outline: 1px solid var(--theme-color);
}


/* 开关按钮 */
.settings input[type="checkbox"] {
  width: 37px;
  height: 20px;
  position: relative;
  border: 1px solid #000000;
  background-color: #fdfdfd;
  border-radius: 12px;
  background-clip: content-box;
  display: inline-block;
  -webkit-appearance: none;
  user-select: none;
  outline: none;
  transform: translateY(5px);
}
.settings input[type="checkbox"]:before {
  content: "";
  width: 14px;
  height: 14px;
  position: absolute;
  top: 2px;
  left: 3px;
  border-radius: 10px;
  background-color: #000;
}
.settings input[type="checkbox"]:checked {
  background-color: var(--theme-color);
  border-color: var(--theme-color);
}
.settings input[type="checkbox"]:checked:before {
  left: 19px;
  background-color: white !important;
}
.settings input[type="checkbox"] {
  transition: border background-color box-shadow;
}
.settings input[type="checkbox"]:before {
  transition: left 0.2s;
}
.settings input[type="checkbox"]:checked {
  background-color: var(--theme-color);
}
.settings input[type="checkbox"]:checked:before {
  transition: left 0.2s;
}
.settings input[type="checkbox"]:checked:hover {
  opacity: 0.8;
}
.settings input[type="checkbox"]:active {
  background-color: #666666 !important;
  border-color: #666666 !important;
}
.settings input[type="checkbox"]:active::before {
  background-color: white !important;
}
.content-text {
  margin-right: 5px;
}


/* 透明度和模糊半径滑块 */
input[type="range"] {
  display: block;
  -webkit-appearance: none;
  background-color: #bdc3c7;
  width: 100%;
  height: 5px;
  border-radius: 3px;
  margin: 0 auto;
  outline: 0;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: var(--theme-color);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  z-index: 100;
}
.range {
  position: relative;
  width: 300px;
  margin: 20px 0px 32px 10px;
}
.rang_width {
  position: absolute;
  top: 0px;
  left: 0px;
  background: var(--theme-color);
  height: 5px;
  border-radius: 2px 0 0 2px;
}


/* 首页文章卡片 */
#recent-posts > .recent-post-item {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
  border-radius: 25px;
  border: var(--border-style);
}

/* 首页侧栏卡片 */
#aside-content .card-widget {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
  border-radius: 18px;
  border: var(--border-style);
}

/* 文章页、归档页、普通页面 */
div#post,
div#page,
div#archive {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
  border: var(--border-style);
  border-radius: 20px;
}

/* 导航栏颜色 */
#page-header.nav-fixed #nav {
  background: linear-gradient(60deg, #ffd7e4 0, #c8f1ff 93%);
  opacity: 0.95;
  backdrop-filter: var(--backdrop-filter);
}
[data-theme="dark"] #page-header.nav-fixed #nav {
  background: rgba(0, 0, 0, 0.95) !important;
}

/* 夜间模式遮罩 */
[data-theme="dark"] #recent-posts > .recent-post-item,
[data-theme="dark"] #aside-content .card-widget,
[data-theme="dark"] div#post,
[data-theme="dark"] div#archive,
[data-theme="dark"] div#page {
  background: var(--trans-dark);
}


/* 调节字体显示栏目 */
#swfs {
  display: flex;
  flex-wrap: wrap;
}
.swf {
  padding: 10px;
  font-size: 20px;
  background-color: white;
  /* 字体选择框边界由js指定 */
  /* border: 2px solid var(--border-color); */
  border-radius: 10px !important;
  margin: 10px;
}

.swf:hover {
  text-decoration: none !important;
  background: var(--text-bg-hover);
}

/* 主题色选择按钮 */
input[name="colors"] {
  margin-right: 15px;
  min-width: 1rem;
  height: 1rem;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 50%;
}
#red {
  border: 3px solid var(--color-red);
}
#orange {
  border: 3px solid var(--color-orange);
}
#yellow {
  border: 3px solid var(--color-yellow);
}
#green {
  border: 3px solid var(--color-green);
}
#blue {
  border: 3px solid var(--color-blue);
}
#purple {
  border: 3px solid var(--color-purple);
}
#pink {
  border: 3px solid var(--color-pink);
}
#heoblue {
  border: 3px solid var(--color-heoblue);
}
#darkblue {
  border: 3px solid var(--color-darkblue);
}
#black {
  border: 3px solid var(--color-black);
}
#blackgray {
  border: 3px solid var(--color-blackgray);
}
#purple:checked {
  box-shadow: 0 0 0 2px #fff inset;
  border-radius: 50%;
  border: 3px solid var(--color-purple);
  background-color: var(--color-purple);
}
#red:checked {
  box-shadow: 0 0 0 2px #fff inset;
  border-radius: 50%;
  border: 3px solid var(--color-red);
  background-color: var(--color-red);
}
#orange:checked {
  box-shadow: 0 0 0 2px #fff inset;
  border-radius: 50%;
  border: 3px solid var(--color-orange);
  background-color: var(--color-orange);
}
#yellow:checked {
  box-shadow: 0 0 0 2px #fff inset;
  border-radius: 50%;
  border: 3px solid var(--color-yellow);
  background-color: var(--color-yellow);
}
#green:checked {
  box-shadow: 0 0 0 2px #fff inset;
  border-radius: 50%;
  border: 3px solid var(--color-green);
  background-color: var(--color-green);
}
#blue:checked {
  box-shadow: 0 0 0 2px #fff inset;
  border-radius: 50%;
  border: 3px solid var(--color-blue);
  background-color: var(--color-blue);
}
#pink:checked {
  box-shadow: 0 0 0 2px #fff inset;
  border-radius: 50%;
  border: 3px solid var(--color-pink);
  background-color: var(--color-pink);
}
#heoblue:checked {
  box-shadow: 0 0 0 2px #fff inset;
  border-radius: 50%;
  border: 3px solid var(--color-heoblue);
  background-color: var(--color-heoblue);
}
#darkblue:checked {
  box-shadow: 0 0 0 2px #fff inset;
  border-radius: 50%;
  border: 3px solid var(--color-darkblue);
  background-color: var(--color-darkblue);
}
#black:checked {
  box-shadow: 0 0 0 2px #fff inset;
  border-radius: 50%;
  border: 3px solid var(--color-black);
  background-color: var(--color-black);
}
#blackgray:checked {
  box-shadow: 0 0 0 2px #fff inset;
  border-radius: 50%;
  border: 3px solid var(--color-blackgray);
  background-color: var(--color-blackgray);
}

1. 要注意的是：现在给了美化模块最高的操作优先级，因此其他的默认设置可以去掉

星空背景的逻辑由js指定，因此 #universe 的 display 属性需要空着：

#universe {
  display: 
}

霓虹灯的计时器也要删除，修改 cursor.js，删掉启动计时器的部分逻辑：

// 开启计时器
-window.onload = setInterval(changeColor, 1200);

同时为了适配主题色，拖尾鼠标的 cursor.js 修改为以下的代码：

var CURSOR;

Math.lerp = (a, b, n) => (1 - n) * a + n * b;

const getStyle2 = (el, attr) => {
    try {
        return window.getComputedStyle
            ? window.getComputedStyle(el)[attr]
            : el.currentStyle[attr];
    } catch (e) {}
    return "";
};

// 为了屏蔽异步加载导致无法读取颜色值，这里统一用哈希表预处理
const map = new Map();
map.set('red', "rgb(241, 71, 71)");
map.set('orange', "rgb(241, 162, 71)");
map.set('yellow', "rgb(241, 238, 71)")
map.set('purple', "rgb(179, 71, 241)");
map.set('blue', "rgb(102, 204, 255)");
map.set('gray', "rgb(226, 226, 226)");
map.set('green', "rgb(57, 197, 187)");
map.set('whitegray', "rgb(241, 241, 241)");
map.set('pink', "rgb(237, 112, 155)");
map.set('black', "rgb(0, 0, 0)");
map.set('darkblue', "rgb(97, 100, 159)");
map.set('heoblue', "rgb(66, 90, 239)");

class Cursor {
    constructor() {
        this.pos = {curr: null, prev: null};
        this.pt = [];
        this.create();
        this.init();
        this.render();
    }

    move(left, top) {
        this.cursor.style["left"] = `${left}px`;
        this.cursor.style["top"] = `${top}px`;
    }

    create() {
        if (!this.cursor) {
            this.cursor = document.createElement("div");
            this.cursor.id = "cursor";
            this.cursor.classList.add("hidden");
            document.body.append(this.cursor);
        }

        var el = document.getElementsByTagName('*');
        for (let i = 0; i < el.length; i++)
            if (getStyle2(el[i], "cursor") == "pointer")
                this.pt.push(el[i].outerHTML);
        // 为了防止出现黑色鼠标的情况，优先在这里对主题色进行赋值
        if (localStorage.getItem("themeColor") == undefined) {
            localStorage.setItem("themeColor", "green");
        }
        var colorVal = map.get(localStorage.getItem("themeColor"));
        document.body.appendChild((this.scr = document.createElement("style")));
        this.scr.innerHTML = `* {cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='8px' height='8px'><circle cx='4' cy='4' r='4' opacity='1.0' fill='`+ colorVal + `'/></svg>") 4 4, auto}`;
    }

    refresh() {
        this.scr.remove();
        this.cursor.classList.remove("hover");
        this.cursor.classList.remove("active");
        this.pos = {curr: null, prev: null};
        this.pt = [];

        this.create();
        this.init();
        this.render();
    }

    init() {
        document.onmouseover  = e => this.pt.includes(e.target.outerHTML) && this.cursor.classList.add("hover");
        document.onmouseout   = e => this.pt.includes(e.target.outerHTML) && this.cursor.classList.remove("hover");
        document.onmousemove  = e => {(this.pos.curr == null) && this.move(e.clientX - 8, e.clientY - 8); this.pos.curr = {x: e.clientX - 8, y: e.clientY - 8}; this.cursor.classList.remove("hidden");};
        document.onmouseenter = e => this.cursor.classList.remove("hidden");
        document.onmouseleave = e => this.cursor.classList.add("hidden");
        document.onmousedown  = e => this.cursor.classList.add("active");
        document.onmouseup    = e => this.cursor.classList.remove("active");
    }

    render() {
        if (this.pos.prev) {
            // 跟踪速度调节
            this.pos.prev.x = Math.lerp(this.pos.prev.x, this.pos.curr.x, 0.15);
            this.pos.prev.y = Math.lerp(this.pos.prev.y, this.pos.curr.y, 0.15);
            this.move(this.pos.prev.x, this.pos.prev.y);
        } else {
            this.pos.prev = this.pos.curr;
        }
        requestAnimationFrame(() => this.render());
    }
}

(() => {
    CURSOR = new Cursor();
    // 需要重新获取列表时，使用 CURSOR.refresh()
})();

1. 到了这里你应该就有50%的概率成功了，重启项目试试：

   hexo cl; hexo s

不行怎么办？评论区留言吧！

3.后记

2022年的最后两天，基本上都在写博客文章，把之前魔改的坑基本上填上了。这篇文章可能也是最后一篇关于博客魔改方面的文章啦，毕竟站长不是搞这方面的，后面去搞Linux驱动开发的东西了，有什么疑问可以到评论区留言哈，祝大家新年快乐！——2022.12.31

综合美化模块教程

https://www.fomal.cc/posts/9ac969bb.html

提示🍒

(｡･∀･)ﾉﾞ由于网站部分设置项更新，当前已为您重置所有设置，祝您愉快！