更新

8月16更新:修复手机端相册触摸图片就会切换的BUG,原因是监听时直接写的clearTimeout(time)不会起作用,需要写成()=>{clearTimeout(time)}才可以。
8月14日:最近这段时间进行了很多修改,优化了部分逻辑,修复了部分bug,不再像之前一样那么的混乱。
现在支持自定义哪些壁纸页面监听,更灵活

教程

按此教程做完,你不仅可以获得一个切换背景页,还可以将相册里面的图片作为背景图片使用

此教程基于butterfly主题,不过基本就是改改js,如果你是butterfly主题用户,那么基本上复制粘贴就可以,不需要额外修改什么。
最终效果参考切换背景相册

切换背景页

我们先使用 hexo n page 'xxx' 创建一个页面。
然后我们在里面添加代码:
每一类我放了一个演示,直接往下复制粘贴a标签就可以,需要注意的是函数里面的链接冒号前面需要添加反斜杠\进行转义

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
<!-- 恢复默认背景 -->
<button onclick="localStorage.removeItem('blogbg');location.reload();" style="background:#5fcdff;display:block;width:100%;padding: 15px 0;border-radius:6px;color:white;"><i class="fa-solid fa-arrows-rotate"></i> 点我恢复默认背景</button>

## 图片(手机)
<div class="bgbox">
<a href="javascript:;" style="background-image:url(https://img.vm.laomishuo.com/image/2021/12/2021122715170589.jpeg)" class="pimgbox" onclick="changeBg('url(https\://img.vm.laomishuo.com/image/2021/12/2021122715170589.jpeg)')"></a>
</div>

## 图片(电脑)
<div class="bgbox">
<a href="javascript:;" style="background-image:url(https://cn.bing.com/th?id=OHR.GBRTurtle_ZH-CN6069093254_1920x1080.jpg)" class="imgbox" onclick="changeBg('url(https\://cn.bing.com/th?id=OHR.GBRTurtle_ZH-CN6069093254_1920x1080.jpg)')"></a>
</div>



## 渐变色
<div class="bgbox">
<a href="javascript:;" class="box" style="background: linear-gradient(to right, #eecda3, #ef629f)" onclick="changeBg('linear-gradient(to right, #eecda3, #ef629f)')"></a>
</div>

## 纯色
<div class="bgbox">
<!-- 拾色器,可自定义颜色 -->
<input type="color" id="color">
<a href="javascript:;" class="box" style="background: #7D9D9C" onclick="changeBg('#7D9D9C')"></a>
</div>

<!-- 监听拾色器 -->
<script>document.getElementById('color').addEventListener('change', (e) => { changeBg(e.path[0].value); })</script>

添加css

如果你已经有了自己的css文件,直接在里面添加即可,没有的话参考这篇文章进行创建: Hexo博客添加自定义css和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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

.bgbox {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.pimgbox,
.imgbox,
.box {
width: 166px;
margin: 10px;
background-size: cover
}

.pimgbox,
.imgbox {
border-radius: 10px;
overflow: hidden;
}

.pimgbox {
height: 240px;
}

.imgbox {
height: 95px;
}

.box {
height: 100px;
}

#color {
border: none;
background: transparent;
width: 166px;
height: 110px;
margin: 5px 10px;
position: relative;
cursor: pointer;
}

#color::before {
position: absolute;
color: rgb(255, 255, 255);
left: 38px;
top: 44px;
content: '自定义颜色';
}
@media screen and (min-width: 768px) {
/* 页面宽度 */
.page #content-inner {
max-width: 1200px !important;
padding: 40px 0;
}
/* 顶部导航 */
.menus_item>a>span {
padding-left: 8px;
}
.menus_item>a {
border-radius: 8px;
padding: 12px 20px !important;
letter-spacing: 8px;
font-weight: bold
}
.menus_item>a i {
display: none;
}
a#site-name {
font-size: 25px !important;
padding: 8.5px 12px !important;
}
/* 文章卡片 */
#recent-posts>.recent-post-item {
height: 14rem;
}
}

@media screen and (max-width: 768px) {
/* 背景 */
.pimgbox,
.imgbox,
.box {
height: 73px;
width: 135px;
}
.pimgbox {
height: 205px;
}
#color {
width: 141px;
height: 83px;
margin: 7px;
}
#color::before {
left: 33px;
top: 33px;
}
}

添加js

最后,我们给它加上灵魂js
如果你已经有了自己的js文件,直接在里面添加即可,没有的话参考这篇文章进行创建: Hexo博客添加自定义css和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
// 存数据
// name:命名 data:数据
function saveData(name, data) {
localStorage.setItem(name, JSON.stringify({ 'time': Date.now(), 'data': data }))
}

// 取数据
// name:命名 time:过期时长,单位分钟,如传入30,即加载数据时如果超出30分钟返回0,否则返回数据
function loadData(name, time) {
let d = JSON.parse(localStorage.getItem(name));
// 过期或有错误返回 0 否则返回数据
if (d) {
let t = Date.now() - d.time
if (t < (time * 60 * 1000) && t > -1) return d.data;
}
return 0;
}

// 上面两个函数如果你有其他需要存取数据的功能,也可以直接使用

// 读取背景
try {
let data = loadData('blogbg', 1440)
if (data) changeBg(data, 1)
else localStorage.removeItem('blogbg');
} catch (error) { localStorage.removeItem('blogbg'); }

// 切换背景函数
// 此处的flag是为了每次读取时都重新存储一次,导致过期时间不稳定
// 如果flag为0则存储,即设置背景. 为1则不存储,即每次加载自动读取背景.
function changeBg(s, flag) {
let bg = document.getElementById('web_bg')
if (s.charAt(0) == '#') {
bg.style.backgroundColor = s
bg.style.backgroundImage = 'none'
} else bg.style.backgroundImage = s
if (!flag) { saveData('blogbg', s) }
}

相册图片做背景

创建相册

官方文档有这个教程,可以选择观看(跳转)。
相册其实就是页面套页面,我们先建一个相册。
使用hexo new page 'xxx'创建即可, 如hexo new page 'wallpaper',然后在md文件里面添加如下代码:

1
2
3
4
5
<div class="gallery-group-main">
{% galleryGroup '电脑壁纸' '一些高端大气上档次的电脑壁纸' '/wallpaper/pc/' 'https://cn.bing.com/th?id=OHR.MonfragueNationalPark_ZH-CN5421553314_1920x1080.jpg' %}
{% galleryGroup '手机壁纸' '一些个人比较喜欢的手机壁纸' '/wallpaper/ph/' 'https://img.vm.laomishuo.com/image/2021/04/2021040311203011.jpeg' %}
{% galleryGroup '美女壁纸' '最好的当然要单独建一个相册' '/wallpaper/girl/' 'https://img.vm.laomishuo.com/image/2021/11/2021111016525829.jpeg' %}
</div>

格式是:{% galleryGroup name description link img-url %}

  • name:图库名字
  • description:图库描述
  • link:连接到对应相册的地址
  • img-url:图库封面的地址

创建子相册

还是使用hexo new page 'xxx'创建, 如hexo new page 'girl', 然后就是把创建好的文件夹挪到你的相册目录里面,这样可以实现嵌套。
然后在这个页面直接放图片就可以了,如markdown的![](imgurl)或者html的<img src="imgurl">
到此一个相册就创建了, 你的相册位置就是/wallpaper/ ,你的子相册位置就是 /wallpaper/girl

添加js

然后我们在需要的页面添加如下代码即可实现此页面图片滑动(电脑)或长按(手机)切换壁纸:

1
2
3
4
5
6
7
8
<script>
let time = ''
let imgbox = document.querySelector('.fj-gallery')
imgbox.addEventListener('contextmenu', e => e.preventDefault())
imgbox.addEventListener('dragend', e => { changeBg('url(' + e.target.src + ')'); })
imgbox.addEventListener('touchstart', e => { time = setTimeout(() => { changeBg('url(' + e.target.src + ')'); }, 500); })
imgbox.addEventListener('touchend', clearTimeout(time))
</script>

最终页面的完整代码如下(参考):

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
---
title: 美女壁纸
date: 2022-06-28 21:20:18
type:
aside: false
comments: false
description:
keywords:
top_img:
mathjax:
katex:
aplayer:
highlight_shrink:
---
{% note info %}
温馨提示:点击可以查看图片,`电脑端拖动图片/手机端长按图片` 可以实现切换壁纸哦~
{% endnote %}
{% gallery %}
![](https://img.vm.laomishuo.com/image/2021/05/2021053107390019.jpeg)
{% endgallery %}

<script>
let time = ''
let imgbox = document.querySelector('.fj-gallery')
imgbox.addEventListener('contextmenu', e => e.preventDefault())
imgbox.addEventListener('dragend', e => { changeBg('url(' + e.target.src + ')'); })
imgbox.addEventListener('touchstart', e => { time = setTimeout(() => { changeBg('url(' + e.target.src + ')'); }, 500); })
imgbox.addEventListener('touchend', ()=>{clearTimeout(time)})
</script>