此篇为转载，下方给出原创地址。

原创还给出了把相片里面的图片引入作为壁纸，这里只选取原作的前半部分。

原创直达

https://sourl.cn/ukMvie

新建页面

  1. 在本地博客根目录下使用hexo n page “xxx”，新建壁纸页面
  2. 在页面里面添加如下代码，每一类都有一个示例写法，需要添加自己的壁纸，直接往下复制粘贴即可（注意改壁纸url)
  3. 粘贴时注意粘贴为纯文本。
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

  1. 在BlogRoot\themes\butterfly\source\css\_custom路径下新建css文件，名字自定义
  2. 注意：我在使用完整的css代码后，我站点主页的每篇文章卡片高度变了，这导致图片填充不完整影响美观，还有就是菜单栏间距变大。当我把所有的@media都删了之后不会改变样式了。（仅仅个人情况）
  3. 删了之后，电脑端使用正常；手机端能切换，但是不顺畅。

原代码:

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;
    }
}

个人保留代码：

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
.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: 200px;
}

.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: '自定义颜色';
}

引入js

  1. 在BlogRoot\themes\butterfly\source\js路径下新建js文件，名字自定义，后面引入js时注意路径中使用这个名字。
  2. 复制js代码到文件中。
  3. 到主题配文件的bottom处引入js（搜inject:)，示例写法在下方。

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
// 存数据
// 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 data = JSON.parse(localStorage.getItem(name));
    // 过期或有错误返回 0
    if (data != null && 0 < Date.now() - data.time < time * 60 * 1000) return data.data;
    // 没过期返回数据
    else 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) }
}

引入js示例

1
- <script async src="/js/wp.js"></script> #壁纸切换

之后hexo三连就完成了