筑站手札

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

# JavaScript # CSS # Hexo
更新于: 2024-09-04
LiuShen
5 分钟
1,655 字
PV --
UV --

这里是清羽AI，这篇文章介绍了如何为网站添加插件并美化显示效果。作者首先解决了备案号被遮挡的问题，通过添加网站插件来实现。接着，作者通过JavaScript知识实现了右键菜单中Live2D模型的显示和隐藏功能，但发现模型不支持提示词功能。随后，作者为网站设置了毛玻璃特效，通过CSS对特定元素进行样式调整，并考虑了暗黑模式的兼容性。最后，作者添加了和风天气插件，并详细说明了注册账号、创建插件、个性化定制以及代码插入的步骤。整个过程中，作者注重细节和兼容性，并通过Hexo三联命令来查看效果。作者还计划研究如何为猫猫模型设置提示词功能，并会在成功后进行更新。

清羽のAI摘要
KIMI-K2.5

碎碎念

前些天，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和Class

我们可以看见，他的父类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, 0.6),
  rgba(225, 235, 255, 0.7),
  rgba(225, 235, 255, 0.7),
  rgba(225, 235, 255, 0.6)
);

上面是一个线性的透明，从透明度从左上往右下分别变为60%、70%、70%、60%，这样能跟好看一点，也可以自己调整，我就不管啦，下面是高斯模糊的部分：

background: linear-gradient(
  -45deg,
  rgba(255, 255, 255, 0.6),
  rgba(255, 255, 255, 0.6),
  rgba(255, 255, 255, 0.7),
  rgba(255, 255, 255, 0.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, 0.6),
    rgba(35, 37, 58, 0.6),
    rgba(35, 37, 58, 0.7),
    rgba(24, 40, 72, 0.7)
  );
  backdrop-filter: blur(10px); /* 应用高斯模糊效果，可以根据需要调整模糊程度 */
  -webkit-backdrop-filter: blur(
    10px
  ); /* 兼容性前缀，适用于一些旧版本的浏览器 */
}

好了，那么下面就是我的所有代码，你们可以点开看看，不过因为为了安全我开了防盗链（主要是没钱QAQ），所以你们只能看，但是如果直接将链接引用到自己的网站上就用不了了哦~建议下载下来或者复制，我刚看了一下好像编码有问题汉字不显示……，不过当然不影响使用

本站链接 · 来自本站，本站可确保其安全性，请放心点击跳转Hexo-Theme-Butterfly窗口毛玻璃特效CSSLiuShen'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三联，应该就可以看见效果啦！教程结束，如果有任何问题可以在评论区讲出来，我一定会改进的！ 后面我将研究怎么设置猫猫的提示词，如果搞出来了会更新该文章的~

  • 最后送上壁纸一张！

超级喜欢这种赛博又古老的风格！

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

Share
Previous
OpenGist--自部署代码片段保存项目
Next
太白山&法门寺三日游游记