碎碎念

前些天,LongHe站长评论了我说,猫猫挡住我的备案号了,我看了一下我的电脑上其实显示正常,就回了一句正在搞(其实是之前研究过但是懒得搞搁置了QAQ),但是这两天搜索了一下,故意遮挡备案号会被吊销备案号,并且罚款,有点害怕赶紧添加了一个,但是感觉一个这个功能有点水,所以又分享了今天才加上的毛玻璃背景特效和右上角和风天气插件。

叽里呱啦的碎碎念

右键菜单添加Live2D开关

在进行这一步之前,我也偷懒上网搜索了一下,但是好像并没有找到教程,算了就用自己仅有的那么一点魔改得来的JS知识,自己实现一下吧~
首先,我们右键单击我们的Live2D模型(下面统称猫猫!),点击检查,得到猫猫的源代码如下(或者你可以试着搜索Live2d):

1
2
3
<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,确保不会获取错,我们在检查的控制台下面先试着测试一下:

1
2
3
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文件中修改添加猫猫显示按钮,注意缩进,和上面保持一致就行,去掉其中的加号即为正常缩进:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
#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,添加以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 设置小猫的显示和隐藏
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-widgetcard-info,那我们就可以尝试使用CSS获取到他的元素并且开搞了,众所(不)周知,CSS的ID是使用#获取,类是使用.获取,而我们的ID获取的是父类的,所以我们可以这么写:

1
2
3
#aside-content>.card-widget.card-info {
……
}

那么下面就可以进行模糊了!首先是半透明,给省略号部分添加:

1
2
3
4
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%,这样能跟好看一点,也可以自己调整,我就不管啦,下面是高斯模糊的部分:

1
2
3
4
5
6
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],这样就能单独设置暗黑模式的背景啦!如:

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

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

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

呐,创建插件就行

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

先点击创建,然后就到了自定义的环节

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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,注意去掉加号:

1
2
3
4
5
6
7
8
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,然后在对应位置添加插件,比如我是在搜索栏的左侧,就添加到搜索的下面,一定要注意缩进!!!!:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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三联,应该就可以看见效果啦!教程结束,如果有任何问题可以在评论区讲出来,我一定会改进的!
后面我将研究怎么设置猫猫的提示词,如果搞出来了会更新该文章的~

  • 最后送上壁纸一张!

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

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