综合美化模块教程

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

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. 🥬Hexo博客搭建基础教程(一)
2. 🍒Hexo博客搭建基础教程(二)
3. 🥪Hexo博客搭建基础教程(三)
4. 🍀博客魔改教程总结(一)
5. 🍚博客魔改教程总结(二)
6. 🎋博客魔改教程总结(三)
7. 🥕博客魔改教程总结(四)
8. 🍊博客魔改教程总结(五)
9. 🧄博客魔改教程总结(六)
10. 🎨综合美化模块教程 ⇦当前位置🪂

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

2. 新建[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();
     };
   }

3. 在主题配置文件_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> # 美化模块    

4. 在自定义的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);
   }

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

   星空背景的逻辑由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()
   })();

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

   hexo cl; hexo s

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

3.后记

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