由点击微信图标展开二维码图片

自定义js

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
(function () {
const container = document.querySelector('.card-info-social-icons');
if (!container) return;

const links = container.querySelectorAll('a');
const insertIndex = 1; // 插入到第二个位置

// 创建微信图标按钮
const wechatBtn = document.createElement('a');
wechatBtn.className = 'social-icon wechat-icon';
wechatBtn.title = '微信';
wechatBtn.href = 'javascript:void(0);';
wechatBtn.innerHTML = '<i class="fab fa-weixin" style="color: #1AAD19;"></i>';
wechatBtn.style.position = 'relative';

// 创建弹窗元素(插入到 body,避免 overflow 限制)
const qrPopup = document.createElement('div');
qrPopup.className = 'wechat-qr-popup';
qrPopup.style.cssText = `
position: fixed;
padding: 10px;
background: rgba(255,255,255,0.95);
backdrop-filter: blur(6px);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
display: none;
z-index: 9999;
transition: opacity 0.2s ease, transform 0.2s ease;
`;
qrPopup.innerHTML = '<img src="/img/qr.png" alt="微信二维码" style="width:120px;height:120px;">';
document.body.appendChild(qrPopup);

// 插入微信图标到指定位置
if (links.length > insertIndex) {
container.insertBefore(wechatBtn, links[insertIndex]);
} else {
container.appendChild(wechatBtn);
}

// 状态标记:是否显示弹窗
let isVisible = false;

// 点击图标切换弹窗显示/隐藏
wechatBtn.addEventListener('click', function (e) {
e.stopPropagation();
const rect = wechatBtn.getBoundingClientRect();
if (!isVisible) {
qrPopup.style.left = `${rect.left + rect.width / 2}px`;
qrPopup.style.top = `${rect.bottom + 8}px`;
qrPopup.style.transform = 'translateX(-50%)';
qrPopup.style.opacity = '1';
qrPopup.style.display = 'block';
isVisible = true;
} else {
qrPopup.style.display = 'none';
qrPopup.style.opacity = '0';
isVisible = false;
}
});

// 点击空白处关闭弹窗
document.addEventListener('click', function () {
qrPopup.style.display = 'none';
qrPopup.style.opacity = '0';
isVisible = false;
});

// 阻止点击弹窗时关闭
qrPopup.addEventListener('click', function (e) {
e.stopPropagation();
});
})();

在主题配置文件插入该js

1
2
inject:
bottom:

随机选图

从自己站点中随机选的图片

1
2
3
4
inject:
head:
bottom:
- <script> let backimg =["url(/images/draw.JPG)","url(/images/life.jpg)","url(/images/idea.jpg)","url(/images/study.jpg)"];let index = Math.ceil(Math.random() * (backimg.length-1)) - 1;document.getElementById("web_bg").style.backgroundImage = backimg[index]</script>

从bing中随机选的图片

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
42
43
44
45
const minPage = 300;
const maxPage = 350;
const limit = 10;
const targetId = "web_bg";

// 每天生成稳定页码(只在 300–350 范围内)
const today = new Date();
const daySeed = today.getFullYear() * 10000 + (today.getMonth() + 1) * 100 + today.getDate();
const page = (daySeed % (maxPage - minPage + 1)) + minPage;

// 请求 Bing 图片 API
fetch(`https://api.bimg.cc/all?page=${page}&order=asc&limit=${limit}&w=1920&h=1080&mkt=zh-CN`)
.then(response => response.json())
.then(data => {
const images = Array.isArray(data.data) ? data.data : [];
if (!images.length) throw new Error("图片列表为空");

const randomIndex = Math.floor(Math.random() * images.length);
const imageUrl = images[randomIndex].url;

const img = new Image();
img.onload = () => {
const target = document.getElementById(targetId);
if (target) {
target.style.backgroundImage = `url(${imageUrl})`;
target.style.backgroundSize = "cover";
target.style.backgroundPosition = "center";
}
};
img.onerror = () => {
console.warn("图片加载失败,使用备用图");
const fallback = "/img/fallback.jpg";
const target = document.getElementById(targetId);
if (target) {
target.style.backgroundImage = `url(${fallback})`;
target.style.backgroundSize = "cover";
target.style.backgroundPosition = "center";
}
};
img.src = imageUrl;
})
.catch(error => {
console.error("获取 Bing 图片失败:", error);
});

小图标

\butterfly\layout\includes\widget\card_announcement.pug 注释掉小喇叭

1
2
//- i.fas.fa-bullhorn.fa-shake 抖动很烦人
i.fas.fa-bullhorn

source\css\_layout\aside.styl 禁用头像旋转,social 图标旋转也是这样注释。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.avatar-img
overflow: hidden
margin: 0 auto
width: 110px
height: 110px
border-radius: 70px

img
width: 100%
height: 100%
transition: filter 375ms ease-in .2s, transform .3s
object-fit: cover
// 禁止旋转
// &:hover
// transform: rotate(360deg)

禁用设置旋转,在layout\includes\rightside.pug,去掉fa-spin

1
2
3
4
#rightside-config-show
if needCogBtn
button#rightside-config(type="button" title=_p("rightside.setting"))
i.fas.fa-cog(class=theme.rightside_config_animation ? 'fa-spin' : '')

关闭分割线动画,在 source\css\_global\function.styl,定位到 .custom-hr,注释掉如下代码

1
2
3
&:hover
&:before
left: calc(95% - 20px)

重定向

发现手机重定向加载太慢,还是写一个重定向页面。在source加入nav文件夹加入index.html重定向页面。默认情况下,Hexo也会将这部分进行处理,导致这些页面渲染上了博客主题。这个时候就需要忽略掉该文件 _config.yml

1
2
3
# 指定不进行渲染的文件或文件夹
skip_render:
- 'nav/*'

重定向 HTML 1

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-webfont@1.7.0/style.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono@4.5.12/index.min.css">
<title>正在跳转...</title>
<style>
body {
margin: 0;
padding: 0;
background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Segoe UI', sans-serif;
color: #333;
}
body:lang(zh-CN) {
font-family: 'LXGW WenKai Screen', sans-serif;
}

body:lang(en) {
font-family: 'JetBrains Mono', monospace;
}
.loader {
border: 6px solid #f3f3f3;
border-top: 6px solid #3498db;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin-bottom: 20px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.message {
font-size: 1.2rem;
text-align: center;
}
</style>
</head>
<body>
<div class="loader"></div>
<div class="message">正在跳转,请稍候...</div>

<script>
// 设置跳转目标和延迟时间(毫秒)
const targetURL = "https://nav-lfuv.vercel.app/";
const delay = 2000;

setTimeout(() => {
window.location.href = targetURL;
}, delay);
</script>
</body>
</html>

重定向 HTML 2

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>正在跳转...</title>

<!-- 字体引入 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-webfont@1.7.0/style.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono@4.5.12/index.min.css">

<style>
body {
margin: 0;
padding: 0;
background: url('/img/caffe.png') no-repeat center center;
background-size: cover;
font-family: 'LXGW WenKai Screen', sans-serif;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: #333;
}

.glass-card {
background: rgba(255, 255, 255, 0.3);
border-radius: 16px;
padding: 40px;
backdrop-filter: blur(20px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
text-align: center;
max-width: 90%;
}

.loader {
border: 6px solid #f3f3f3;
border-top: 6px solid #3498db;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin: 0 auto 20px;
}


@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

.message {
font-size: 1.2rem;
margin-bottom: 10px;
}

.fallback {
margin-top: 20px;
font-size: 0.97rem;
font-weight: 500;
color: #222;
line-height: 1.6;
}

.fallback a {
font-weight: 600;
color: #007acc;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="glass-card">
<div class="loader"></div>

<div class="message">正在跳转,请稍候...</div>
<div class="fallback">
如果未能自动跳转,请&nbsp;<a href="nav-hoo.vercel.app" target="_blank" rel="noopener">点击此处&nbsp;</a>访问。
</div>
</div>

<script>
const targetURL = "https://nav-hoo.vercel.app";
const delay = 500;
setTimeout(() => {
window.location.href = targetURL;
}, delay);
</script>
</body>
</html>

博客音乐

非全局的单个文章配置音乐盒吸底:文章页 aplayer: true 开启后,直接在文章复制粘贴这段div

1
<div class="aplayer no-destroy" data-id="9593638671" data-server="tencent" data-type="playlist" data-fixed="true" data-autoplay="true"> </div>

在文章页上音乐盒

1
{% meting "14405552446" "netease" "playlist" "mutex:true" "listmaxheight:300px" "preload:auto" "theme:#ad7a86" %}

杂项

source\css\_layout\footer.styl 修改页脚颜色

1
2
background-color: $light-blue
background: #b7b7b5!important

添加天气组件 hoochanlon.github.io\source\_data\widget.yml

1
2
3
4
5
6
7
8
top:
- class_name: user-weather
name: 天气
icon: fa-solid fa-sun-cloud
order: 5
html: |
<div id="ww_62f74659400aa" v='1.3' loc='auto' a='{"t":"horizontal","lang":"zh","sl_lpl":1,"ids":[],"font":"Arial","sl_ics":"one_a","sl_sot":"celsius","cl_bkg":"image","cl_font":"#FFFFFF","cl_cloud":"#FFFFFF","cl_persp":"#81D4FA","cl_sun":"#FFC107","cl_moon":"#FFC107","cl_thund":"#FF5722"}'><a href="https://weatherwidget.org/zh/" id="ww_62f74659400aa_u" target="_blank">天气插件</a></div>
<script async src="https://app3.weatherwidget.org/js/?id=ww_62f74659400aa"></script>