魔改笔记三：网站插件添加及显示效果美化

碎碎念

前些天，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，猫猫会消失，那么我们只需要添加一个按钮控制这个过程就行啦！
经过选择，我将按钮放置在了右键菜单中，如果没有魔改的请自己上网搜索进行魔改或参考下方教程：

🪧引用站外地址，不保证站点的可用性和安全性

Hexo-Theme-Butterfly右键菜单魔改

张洪|Heo

在下面的基础上，我们在：[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），所以你们只能看，但是如果直接将链接引用到自己的网站上就用不了了哦~建议下载下来或者复制，我刚看了一下好像编码有问题汉字不显示……，不过当然不影响使用

✅来自本站，本站可确保其安全性，请放心点击跳转

Hexo-Theme-Butterfly窗口毛玻璃特效CSS

LiuShen's Blog | gist

添加网页右上角和风天气插件

和风天气，这个是我一直有的功能，但是之前的话由于页面问题一直不美观，一直被上面的菜单栏挤得乱跑，近期做了页面减法最终实现了较好的兼容性。
首先，打开和风天气官网，注册账号后，进入控制台，点击项目管理，创建插件：

🪧引用站外地址，不保证站点的可用性和安全性

和风天气控制台

创建一个漂亮的天气项目，驱动你的业务

下一步点击天气简约插件，并进行个性化定制：

具体参数可以自己按照自己的需求进行定制，定制完成后点击创建就有代码了，保存生成的代码，注意不要点很多次创建，会有很多小组件的，虽然没事，但是删起来很麻烦……
我的相关自定义部分的参数如下：

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三联，应该就可以看见效果啦！教程结束，如果有任何问题可以在评论区讲出来，我一定会改进的！
后面我将研究怎么设置猫猫的提示词，如果搞出来了会更新该文章的~

• 最后送上壁纸一张！

——柳影曳曳，清酒孤灯，扬笔撒墨，心境如霜