博客背景切换-页面版

本博客已弃用此功能，在本站看不到效果，但教程依旧有效。

推荐使用便携弹窗版：博客背景切换-弹窗版
本文有个使用相册图片作背景的功能，可以参考一下。
因本站已弃用官方相册，所以暂无效果参考。

22-8-16：修复手机端相册触摸图片就会切换的BUG。
22-8-14：优化了部分逻辑，修复部分bug。

教程

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

此教程基于butterfly主题，不过基本就是改改js，如果你是butterfly主题用户，那么基本上复制粘贴就可以，不需要额外修改什么。

切换背景页

我们先使用 hexo n page 'xxx' 创建一个页面。
然后我们在里面添加如下代码，注意函数里面的链接冒号前面需要添加反斜杠\进行转义

<!-- 恢复默认背景按钮 -->
<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>
<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>
<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>
<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>
<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文件


.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 (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文件

// 存数据
// 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文件里面添加如下代码：

<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（重要）

然后我们在需要的页面添加如下代码即可实现此页面图片滑动(电脑)或长按(手机)切换壁纸。
注意：需要和上面的js结合起来，不能只粘贴下面代码。

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

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

---
title: 美女壁纸
date: 2022-06-28 21:20:18
aside: false
comments: false
---
{% 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>