魔改笔记三：网站插件添加及显示效果美化
碎碎念
前些天，LongHe站长评论了我说，猫猫挡住我的备案号了，我看了一下我的电脑上其实显示正常，就回了一句正在搞（其实是之前研究过但是懒得搞搁置了QAQ），但是这两天搜索了一下，故意遮挡备案号会被吊销备案号，并且罚款，有点害怕赶紧添加了一个，但是感觉一个这个功能有点水，所以又分享了今天才加上的毛玻璃背景特效和右上角和风天气插件。
右键菜单添加Live2D开关
在进行这一步之前，我也偷懒上网搜索了一下，但是好像并没有找到教程，算了就用自己仅有的那么一点魔改得来的JS知识，自己实现一下吧~ 首先，我们右键单击我们的Live2D模型（下面统称猫猫！），点击检查，得到猫猫的源代码如下（或者你可以试着搜索Live2d）：
<div id="live2d-widget" class="live2d-widget-container" style="position: fixed; left: 0px; bottom: -140px; width: 250px; height: 500px; z-index: 99999; opacity: 1; pointer-events: none;">
<canvas id="live2dcanvas" width="500" height="1000" style="position: absolute; left: 0px; top: 0px; width: 250px; height: 500px;"></canvas>
</div>我们可以看见他的ID为live2d-widget，并且检查了一下就这一个ID，确保不会获取错，我们在检查的控制台下面先试着测试一下：
const live2dWidget = document.getElementById('live2d-widget');
live2dWidget.style.display = 'none';
/*这个none是我查的，在CSS中，display: none;表示元素不可见且不占据空间，相当于隐藏元素；而display: block;表示元素以块级元素显示，会占据一整行的空间并显示出来。*/经过测试，当live2dWidget.style.display设置为空或者block，猫猫会展示出来，当设置为none，猫猫会消失，那么我们只需要添加一个按钮控制这个过程就行啦！
经过选择，我将按钮放置在了右键菜单中，如果没有魔改的请自己上网搜索进行魔改或参考下方教程：
在下面的基础上，我们在：[blogRoot]\themes\butterfly\layout\includesrightmenu.pug文件中修改添加猫猫显示按钮，注意缩进，和上面保持一致就行，去掉其中的加号即为正常缩进：
#rightMenu
.rightMenu-group.rightMenu-small
.rightMenu-item#menu-backward
i.fa-solid.fa-arrow-left
.rightMenu-item#menu-forward
i.fa-solid.fa-arrow-right
.rightMenu-item#menu-refresh
i.fa-solid.fa-arrow-rotate-right
.rightMenu-item#menu-home
i.fa-solid.fa-house
.rightMenu-group.rightMenu-line.hide#menu-text
a.rightMenu-item(href="javascript:rm.copySelect();")
i.fa-solid.fa-copy
span='复制'
.rightMenu-group.rightMenu-line.rightMenuOther
a.rightMenu-item.menu-link(href='/archives/')
i.fa-solid.fa-archive
span='文章时间线'
a.rightMenu-item.menu-link(href='/categories/')
i.fa-solid.fa-folder-open
span='文章分大类'
a.rightMenu-item.menu-link(href='/tags/')
i.fa-solid.fa-tags
span='文章小标签'
.rightMenu-group.rightMenu-line.rightMenuNormal
a.rightMenu-item.menu-link#menu-radompage(href='/comment/index.html')
i.fa-solid.fa-shoe-prints
span='随心留言板'
.rightMenu-item#menu-translate
i.fa-solid.fa-earth-asia
span='繁简模式切换'
.rightMenu-item#menu-darkmode
i.fa-solid.fa-moon
span='切换亮暗模式'
+ .rightMenu-item#menu-live2dvisibility
+ i.fa-solid.fa-cat
+ span='小猫显示隐藏'
.rightMenu-item#menu-print
i.fa-solid.fa-print.fa-fw
span='打印整个页面'
#rightmenu-mask其实此时你hexo三件套就能看见按钮了，下面我们给这个按钮添加函数：
打开你设置右键菜单的js响应函数文件，比如我就在：[BlogRoot]\source\config\js\rightmenu.js，添加以下内容：
// 设置小猫的显示和隐藏
function toggleLive2dVisibility() {
removeRightMenu(); // 点击按钮后移除右键菜单，这个看你们自己的函数是不是这个
const live2dContainer = document.getElementById('live2d-widget');
if (live2dContainer.style.display === 'block' || live2dContainer.style.display === '') {
live2dContainer.style.display = 'none'; // 显示Live2D模型
} else {
live2dContainer.style.display = 'block'; // 隐藏Live2D模型
}
}
……
// 小猫隐藏的绑定事件
$('#menu-live2dvisibility').on('click', function () {
toggleLive2dVisibility();
});这些代码应该都能看懂吧？这讲解都喂到肚子里去了！！！这样我们就实现了猫猫的显示和隐藏，得到了一只更加听话的猫猫~ 但是优点缺点，就是虽然按钮实现了，但是可能有人找不到，所以有点懊恼，想添加一个提示词才发现我的猫猫有点傻不会说话，并不支持提示词，所以只能等待后面更新了，如果我解决了我会分享出来的，一定会有一天的！
设置网站毛玻璃特效
这个就更简单了，之前的博客使用的是半透明，虽然也挺好看但是总感觉没有谱毛玻璃效果就是差一点：
当然萝卜白菜各有所爱，下面我们将详细讲一下咋搞的这些玩意，首先我们得先找到这个元素啊，就比如边上的这个个人信息带头像的侧边框框，先右键打开检查看看：
我们可以看见，他的父类ID为aside-content，而他也有一个特征，就是他的class：card-widget和card-info，那我们就可以尝试使用CSS获取到他的元素并且开搞了，众所（不）周知，CSS的ID是使用#获取，类是使用.获取，而我们的ID获取的是父类的，所以我们可以这么写：
#aside-content>.card-widget.card-info {
……
}那么下面就可以进行模糊了！首先是半透明，给省略号部分添加：
background: linear-gradient(-45deg, rgba(225, 235, 255, .6),
rgba(225, 235, 255, .7),
rgba(225, 235, 255, .7),
rgba(225, 235, 255, .6));上面是一个线性的透明，从透明度从左上往右下分别变为60%、70%、70%、60%，这样能跟好看一点，也可以自己调整，我就不管啦，下面是高斯模糊的部分：
background: linear-gradient(-45deg, rgba(255, 255, 255, .6),
rgba(255, 255, 255, .6),
rgba(255, 255, 255, .7),
rgba(255, 255, 255, .7));
backdrop-filter: blur(10px); /* 应用高斯模糊效果，可以根据需要调整模糊程度 */
-webkit-backdrop-filter: blur(10px); /* 兼容性前缀，适用于一些旧版本的浏览器 */其实就是添加了个模糊效果，不过我还是更喜欢模糊一点的。
那么白天部分的做完了，我们还有暗黑模式呀，我们需要在暗黑模式添加前缀：[data-theme=dark]，这样就能单独设置暗黑模式的背景啦！如：
[data-theme=dark] #aside-content>.card-widget.card-info {
background: linear-gradient(-45deg, rgba(24, 40, 72, .6),
rgba(35, 37, 58, .6),
rgba(35, 37, 58, .7),
rgba(24, 40, 72, .7));
backdrop-filter: blur(10px); /* 应用高斯模糊效果，可以根据需要调整模糊程度 */
-webkit-backdrop-filter: blur(10px); /* 兼容性前缀，适用于一些旧版本的浏览器 */
}好了，那么下面就是我的所有代码，你们可以点开看看，不过因为为了安全我开了防盗链（主要是没钱QAQ），所以你们只能看，但是如果直接将链接引用到自己的网站上就用不了了哦~建议下载下来或者复制，我刚看了一下好像编码有问题汉字不显示……，不过当然不影响使用
添加网页右上角和风天气插件
和风天气，这个是我一直有的功能，但是之前的话由于页面问题一直不美观，一直被上面的菜单栏挤得乱跑，近期做了页面减法最终实现了较好的兼容性。 首先，打开和风天气官网，注册账号后，进入控制台，点击项目管理，创建插件：
下一步点击天气简约插件，并进行个性化定制：
具体参数可以自己按照自己的需求进行定制，定制完成后点击创建就有代码了，保存生成的代码，注意不要点很多次创建，会有很多小组件的，虽然没事，但是删起来很麻烦…… 我的相关自定义部分的参数如下：
WIDGET = {
"CONFIG": {
"modules": "10",
"background": "1",
"tmpColor": "FFFFFF",
"tmpSize": "14",
"cityColor": "FFFFFF",
"citySize": "14",
"aqiColor": "FFFFFF",
"aqiSize": "14",
"weatherIconSize": "14",
"alertIconSize": "14",
"padding": "9px 10px 10px 9px",
"shadow": "1",
"language": "auto",
"borderRadius": "10",
"fixed": "false",
"vertical": "top",
"horizontal": "right",
"key": "ddddddddddddddddddddddddddddddddddddd"
}
}然后就是将生成的代码中的这一部分放到你的JS自定义文件中，比如我是创建了一个[BlogRoot]\source\config\js\weather.js，将上面的部分放进去，注意不要带着下面一起扔进去了，然后在你的butterfly_config文件中，引入下面两个JS，注意去掉加号：
inject:
head:
……
bottom:
……
+ - <script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script> # 天气插件官方js
+ - <script src="/config/js/weather.js"></script> # 天气插件，后面会添加CDN
……然后就是考虑插入的位置了，我是在上方栏的右侧添加的，所以先找到[BlogRoot]\theme\butterfly\layout\incloud\header\nav.pug，然后在对应位置添加插件，比如我是在搜索栏的左侧，就添加到搜索的下面，一定要注意缩进！！！！：
nav#nav
span#blog-info
a(href=url_for('/') title=config.title)
if theme.nav.logo
img.site-icon(src=url_for(theme.nav.logo))
if theme.nav.display_title
span.site-name=config.title
#menus
!=partial('includes/header/menu_item', {}, {cache: true})
#nav-right
if (theme.algolia_search.enable || theme.local_search.enable || theme.docsearch.enable)
#search-button
a.site-page.social-icon.search(href="javascript:void(0);")
i.fas.fa-search.fa-fw
+ #he-plugin-simple
#toggle-menu
a.site-page(href="javascript:void(0);")
i.fas.fa-bars.fa-fw下面执行hexo三联，应该就可以看见效果啦！教程结束，如果有任何问题可以在评论区讲出来，我一定会改进的！ 后面我将研究怎么设置猫猫的提示词，如果搞出来了会更新该文章的