Hexo设置背景图片轮播效果

墨蓝 2022-11-27 12:22 155阅读 0赞

# 导读 #

**[Next][]主题确实是好用，但是中间还是有太多太多的坑，差点没把自己摔死。这个博客记录了完成背景图片轮播的博客，喜欢折腾的同学可以看看，这方面对CSS3的要求略微有点高。**

[Hexo][]的[NexT][Next]主题非常简约，个性化调整也非常方便。在这里就给大家介绍Hexo的背景图片轮播的制作方法。

# 尴尬的开发条件 #

由于我还很菜，再加上电脑卡顿严重，有时候所有方法全部试了一遍都没有效果，重新创建一个工程就好了，也有时候重启就好了。这个背景图片轮播就是**除了吃饭连续调了36个小时**，**最后重新新建一个项目就好了**。这样的情况下调bug简直就是折磨。所以我基本上就用最小幅度的修改来保证需求的实现。

好了，来看看从入门到入土的全过程吧。我使用的是`WebStorm`作为`IDE`，其中内置的终端是可以操作的。如果没有`WebStorm`的话，可以使用`git`的`Windows`桌面版客户端自带的终端，即`Git Bash`，是个非常不错的终端，个人非常喜欢`Vim`风格。但是`Windows`**自带的终端是不可以操作**`Hexo`的，连`PowerShell`**的管理员模式也不可以**，这一点还请注意。

# 开发条件更新（2020年6月27日） #

弱弱电脑泡水了，光荣牺牲。现在换了强强电脑，也就是现在的台式机，并且改用内存占用更少的`VScode`配合`Git Bash`分别完成**编辑**和**部署**。`VScode`中安装的插件就是`markdown-all-in-one`、`GitLens`和`Language-Stylus`，分别完成`markdown编辑`、`GitHub部署`和`Stylus样式表`三个部分。很可惜的是`VScode`自带的终端不能代替`Git Bash`，就有点不太方便。其他的都还可以。

# 开发条件又更新（2020年7月15日） #

弱弱电脑换好了键盘，但是考虑到不怎么强的硬件，所以选择了`Ubuntu`系统，现在使用`Ubuntu.20.04-desktop`，`VScode`配合系统内置的`git`分别完成**编辑**和**部署**。使用的插件没有更改。

# 确定背景图片 #

我们先找好一个背景图片，就你啦。*没错，博主是个不折不扣的死肥宅*

![夕立][format_png]

然后把他放在背景图片中。由于夕立的图片从左到右对比度差异比较大，我准备加上透明度。透明度确实有很多种方法，我选了个对模板改动最小的方法：`after伪类`。于是，**噩梦开始了**。

# 写入样式表 #

在NexT模板里面，样式表大多是用styl文件存储的，简单地说，它是一种新语言，叫Stylus语言，基于nodejs，非常强大，补足了CSS3的许多缺点。

接着我们找到NexT模板中给我们预留的自定义样式文件中，也就是根目录下的：`/themes/next/source/css/_custom/custom.styl`，打开发现是个空的。

好了，写下我们的代码：（*由于里面包含keyframe，就直接用CSS3全部写完了，没用上stylus*）

/* * 在上层的body什么都不要写，因为body加上透明度opacity后文字也变得透明了 * 于是所有的东西全部写在伪类，这里只保留最低限度的：层数（防遮盖）、位置（相对伪类的位置） */
    body { 
      position : relative;
      z-index : 0;
    }
    /* * 在伪类中加上所有的属性 */
    body:after { 
      content : '';                 /* 伪类需要有内容，否则会变成0*0，无法显示效果 */
      width: 100%;                  /* 宽度拉满 */
      height: 100%;                 /* 高度拉满 */
      background-size: cover;       /* 背景图片铺满整个容器 */
      background-repeat: no-repeat; /* 不要重复 */
      opacity: 0.5;                 /* 透明度为50% */
      -moz-opacity: 0.5;            /* 火狐浏览器的透明度设置 */
      -khtml-opacity: 0.5;          /* safari浏览器的透明度设置，它使用了KDE的KHTML作为内核 */
      position: fixed;              /* 位置设为固定，否则往下滑背景图片就滑没了 */
      z-index: -1;                  /* 防遮罩 */
      top: 0;                       /* y坐标抵到浏览器顶部 */
      left: 0;                      /* x坐标抵到浏览器左侧 */
    }

于是，就有了这样的效果：

![演示效果图1][1]

看着好像还行？

# 编写js脚本 #

找到根目录下的`/themes/next/source/js/src`，在其中**新建**一个`js`文件。这里并没有给我们预留一个空文件，那就自己新建好了。我新建了`custom.js`文件。

**严重警告**：下面这个例子是我第一次的尝试，是**错误的**！

// 将所有的路径写下来
    let imgUrl = [
      '/images/background/poi.png', // 舰娘夕立
      '/images/background/touhou-red.jpg' // 东方红魔馆
    ];
    // 这里let类型是ECMA script6的特性
    // 可以让我们把这个变量仅限于大括号内，可以组织非法访问带来的莫名其妙的问题
    let imgIndex = 0; // 设置imgIndex来选择imgUrl中的字符串
    // 设置计时器，每8秒换一次图片
    /** * 这里用setInterval函数 * 传递2个参数 * 一个是执行的事件，也就是函数对象 * 可以写好了再把方法名传进来，也可以直接在这里定义 * 还有一个是中间等待的时间，也就是多长时间执行一次 * 返回一个定时器对象，方便在需要删除该定时器的时候直接引用 * 如果不删除定时器，这个定时器就会一直进行下去 */
    let interval = setInterval(function() { 
      // 1、获取需要变更的元素
      // 2、变更url
      $('body:after').css("background-image", "url('" + imgUrl[imgIndex] + "')");
      // 3、imgIndex自增，越界归零，也就是循环播放效果
      (imgIndex === imgUrl.length) ? (imgIndex = 0) : (imgIndex++)
      // 这个是唯一的三元运算符，可以叫做冒号运算符
      // 如果满足问号前的条件，就执行第二个括号里面的语句，否则执行第三个括号里面的语句。
      // 由于运算符有规定的优先顺序，所以这里不加括号也是完全OK的，只是为了让大家看得清楚才加上的
    }, 8000);

最后，找到根目录下的`/themes/next/layout/_custom/header.swig`，这是个空文件。在里面引入jQuery和我们刚刚完成的js文件。

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    
    <script type="text/javascript" src="/js/src/custom.js"></script>

> **科普：**`swig`简单的说就是一种超级强大的工具，基本上很多语言都支持，甚至可以用于汇编开发中。

好的！到这里就结束了！在`WebStorm`下方的`Terminal`（汉化了的同学这里叫做“终端”）输入hexo server，敲下回车就可以运行了。终端会弹出一大堆东西，其中有一句话是：“localhost:4000/”，点击就会自动呼出浏览器运行结果。

> **P.S.** 会玩的同学可以在淘宝上购买一个超大号的回车键，每当这个时候就可以郑重地像按起爆器一样按下去，非常有仪式感。

## 发现问题 ##

然后，什么效果都没有。

**我慌了**。

一开始我以为是url拼接的问题，调了很久很久，一直没成功。直到最后，我才明白：**伪类after不可以被选中**。

**全部木大**

上网一查，发现有一些方法，比如`append`一个新的`style`标签，这样子很难看清楚，也不容易编写。最后还是决定：**把每一个图片定义成一个单独的CSS样式的类，然后每隔一段时间让body换个类**。听着不难？试试吧。

## 再次修改 ##

**还是严重警告**：下面的`CSS`部分是第二次尝试，还是略微有一点点问题，**下方注释会标记有问题的地方**

body, .pekora, .beaten, .collection, .touhou-red, .bang, .succubus, .poi { 
      position : relative;
      z-index : 0;
    }
    
    body:after, .pekora:after, .touhou-red:after, .beaten:after, .collection:after, .bang:after, .succubus:after, .poi:after { 
      content : '';
      width: 100%;
      height: 100%;
      background-size: cover;
      background-repeat: no-repeat;
      opacity: 0;
      -moz-opacity:0;
      -khtml-opacity: 0;
      position: fixed;
      z-index: -1;
      top: 0;
      left: 0;
      /* 加上动画 */
      /** * 我给animation传入的3个值分别是： * - 动画名称 - bg-scale * - 延迟时间 - 动画会持续8秒 * - 执行次数 - 无限执行：infinite */
      animation : bg-scale 8s infinite;
      -webkit-animation : bg-scale 8s infinite;
      -moz-animation : bg-scale 8s infinite;
      -o-animation : bg-scale 8s infinite;
    }
    
    /** * 大家完全可以复制粘贴，注意这下面的url要换成自己的图片路径。 * 例如我将图片存在了根目录下的/themes/next/source/images/background/里面，所有的url就都这样配置了 * 需要说明的是：这是在next模板中配置的，所以url("/")所访问的根目录是/themes/next/source/ * 所以url就直接是省略了前面的，从/images/开始 */
    /* hololive所属vtuber三期生：pekora，嚣张的兔子 */
    .pekora:after { 
      background-image : url("/images/background/pekora.jpg");
    }
    /* 东方红魔馆 */
    /* 把body:after也设置了就是为了初始化 * 这样一开始就是这个图片作为背景， * 也算是不动用重要模板文件的最小程度修改 */
    body:after, .touhou-red:after { 
      background-image : url("/images/background/touhou-red.jpg");
    }
    /* 将R16的百合图片中，攻的一方配上“现实”，受的一方配上“我”。看到这张图片的时候我的心情非常复杂 */
    .beaten:after { 
      background-image : url("/images/background/beaten.jpg");
    }
    /* 澡堂中的舰娘们 */
    .collection:after { 
      background-image : url("/images/background/collection.jpg");
    }
    /* 偶像大师（圣诞限定版） */
    .bang:after { 
      background-image : url("/images/background/bang.jpg");
    }
    /* 四只比基尼魅魔，是《魅魔和社畜》的作者所作，没有下海（一直在反复横跳就是了），不过老师的狗粮真的很美味 */
    .succubus:after { 
      background-image : url("/images/background/succubus.jpg");
    }
    /* 舰娘夕立 */
    .poi:after { 
      background-image : url("/images/background/poi.png");
    }
    /* 最后再加上切换的动画 */
    /** * 这是一个叫做bg-scale的动画 * 其实原本是有scale这个缩放的动作的 * 但是违和感太强烈了删掉了 * 结果这个莫名其妙的名字没改 * 因为影响不大就算了吧！诶嘿~⭐ * 大家可以在这其中加入自定义的动作 * 尤其注意scale（缩放）和translate（平移）混用的时候scale应当在前面 */
    
    /** * 注意：这个动画设置略微有一点点误差。 * 后面有修改版本，请不要复制这里的动画设置 */
    @keyframes bg-scale { 
      /* 最开始的状态 */
      0% { 
        opacity : 0;
        transform : translateY(-3%) ;
      }
      /** * 经历1/5的时间到这一步 * 完成的事件： * - 透明度增加到50% * - 从上方3%的地方移到了正中间（浏览器y轴朝下） */
      20% { 
        opacity : 50%;
        transform: translateY(0);
      }
      /** * 经历3/5的时间到这一步 * 完成的事件： * - 什么都没变 */
      80% { 
        opacity : 50%;
        transform: translateY(0);
      }
      /** * 最后1/5的时间到这一步 * 完成的事件： * - 透明度变为0%（完全看不见） * - 从正中间平移到下方3%的地方 */
      100% { 
        opacity : 0;
        transform: translateY(3%);
      }
    }
    /* 下面都是针对各种浏览器的特化，意义是一样的 */
    @-webkit-keyframes bg-scale{ 
      0% { 
        opacity : 0;
        -webkit-transform : translateY(-3%) ;
      }
      20% { 
        opacity : 50%;
        -webkit-transform: translateY(0);
      }
      80% { 
        opacity : 50%;
        -webkit-transform: translateY(0);
      }
      100% { 
        opacity : 0;
        -webkit-transform: translateY(3%);
      }
    }
    
    @-moz-keyframes bg-scale{ 
      0% { 
        -moz-opacity : 0;
        -moz-transform : translateY(-3%) ;
      }
      20% { 
        -moz-opacity : 50%;
        -moz-transform: translateY(0);
      }
      80% { 
        -moz-opacity : 50%;
        -moz-transform: translateY(0);
      }
      100% { 
        -moz-opacity : 0;
        -moz-transform: translateY(3%);
      }
    }
    
    @-o-keyframes bg-scale{ 
      0% { 
        opacity : 0;
        -o-transform : translateY(-3%) ;
      }
      20% { 
        opacity : 50%;
        -o-transform: translateY(0);
      }
      80% { 
        opacity : 50%;
        -o-transform: translateY(0);
      }
      100% { 
        opacity : 0;
        -o-transform: translateY(3%);
      }
    }

终于，**背景动了**。**wdnmd**！

## 最后加上js脚本（custom.js） ##

// 这是jQuery的写法，意思是一打开这页面就这么做
    $(document).ready(function () { 
      // 先准备好和类名一样的字符串数组
      let IMG_CLASS = ["touhou-red", "poi", "beaten", "collection", "pekora", "succubus", "bang"];
      // 再准备一个索引
      let imgIndex = 0;
      /** 还需要一个计时器 * 这个计时器传入了两个参数 * - 第一个表示需要重复的动作 * - 第二个表示下一次动作的延迟时间 */
      let interval = setInterval(function () { 
        // 删除上一个类名（如果本身就没有这个类名也不会报错）
        $("body").removeClass(IMG_CLASS[imgIndex]);
        // 索引 + 1
        imgIndex++;
        // 当越界的时候归零，变成循环展示图片
        if (imgIndex == IMG_CLASS.length) { 
          imgIndex = 0;
        }
        // 加上当前索引所指向的类名
        $("body").addClass(IMG_CLASS[imgIndex]);
      }, 8000); // 每8000毫秒，也就是8秒执行一次
    });

## 希望之花 ##

知道这个梗的人应该都明白，“不要停下来啊！”代表的是什么意思。没错，还远远没有结束。**心态崩坏第二弹**：**js代码本身存在的bug**

JavaScript代码是运行在客户端的。所以它代表了一个问题：客户的电脑情况很大程度上决定了代码的成果。比如：

<link rel="stylesheet" href="//cdn.bootcss.com/highlight.js/9.6.0/styles/github.min.css">

乍一看没什么问题。**可是这天你断网了**。码农好好的坐在公司里调bug，一口大锅就这么扣在了他头上。

我所遇到的情况正是如此。js里写好了8000ms的延迟，CSS样式文件里也清清楚楚写了8s，但是就是有误差，这个误差不是别的原因，就是由每个人的电脑性能不同决定的。新的图片展示之前，旧的图片会很明显的闪一下。就这么一点点的误差展现了这么刺眼的效果。

求求你让我下班吧……orz

## 暴力解决 ##

我放弃了思考，如果会闪的话，那就是说，在js执行之前，keyframe动画就已经开始了执行下一个动画。那么，眼不见为净，就让这短暂的几帧动画看不到就好了！

于是，keyframe的最终版：

/** * 用这一段代码替换之前提到的的keyframe */
    @keyframes bg-scale { 
      0% { 
        opacity : 0;
        transform : translateY(-3%) ;
      }
      /** * 在这1/20的时间里什么都不做 * 保持透明度为0（什么都看不见的白板） * 于是造成了小于1秒的空白背景 */
      5% { 
        opacity : 0;
        transform : translateY(-3%) ;
      }
      
      /** * 紧接着，这1/5的时间里完成了： * - 透明度从0变为50 * - 从上方3%的位置移到正中间 * 所以，之前小于1秒的空白背景就在忍受范围内了！ * 我可真是个靓仔 */
      25% { 
        opacity : 50%;
        transform: translateY(0);
      }
      80% { 
        opacity : 50%;
        transform: translateY(0);
      }
      100% { 
        opacity : 0;
        transform: translateY(3%);
      }
    }
    
    @-webkit-keyframes bg-scale{ 
      0% { 
        opacity : 0;
        -webkit-transform : translateY(-3%) ;
      }
      5% { 
        opacity : 0;
        -webkit-transform : translateY(-3%) ;
      }
      25% { 
        opacity : 50%;
        -webkit-transform: translateY(0);
      }
      80% { 
        opacity : 50%;
        -webkit-transform: translateY(0);
      }
      100% { 
        opacity : 0;
        -webkit-transform: translateY(3%);
      }
    }
    
    @-moz-keyframes bg-scale{ 
      0% { 
        -moz-opacity : 0;
        -moz-transform : translateY(-3%) ;
      }
      5% { 
        -moz-opacity : 0;
        -moz-transform : translateY(-3%) ;
      }
      25% { 
        -moz-opacity : 50%;
        -moz-transform: translateY(0);
      }
      80% { 
        -moz-opacity : 50%;
        -moz-transform: translateY(0);
      }
      100% { 
        -moz-opacity : 0;
        -moz-transform: translateY(3%);
      }
    }
    
    @-o-keyframes bg-scale{ 
      0% { 
        opacity : 0;
        -o-transform : translateY(-3%) ;
      }
      5% { 
        opacity : 0;
        -o-transform : translateY(-3%) ;
      }
      25% { 
        opacity : 50%;
        -o-transform: translateY(0);
      }
      80% { 
        opacity : 50%;
        -o-transform: translateY(0);
      }
      100% { 
        opacity : 0;
        -o-transform: translateY(3%);
      }
    }

nice！**下班啦**！

最终样式请查看我的博客：[sakebow的小博客][sakebow]。

# 总结 #

当然这个方法是有点问题的，比如**网速慢的时候只能第一张图片无限循环**；**后期添加图片的时候非常的麻烦**等等非常无奈的问题。但是总体效果还是非常不错的呐！

虽然路途坎坷，但是确实可以看出，`Hexo`的美化要是认真从前端入手一点点深入，一点点修改，就能够做出你认为最好的。正因为方法多样，所以才有如此广阔的创意模板和二次魔改，这就是`Hexo`的魅力不是吗？

[Next]: https://github.com/theme-next
[Hexo]: https://hexo.io
[format_png]: /images/20221124/6d008e67e63743adbf9153d6c54f2a4e.png
[1]: /images/20221124/b7d551c8cf46478e983391999056dee9.png
[sakebow]: https://sakebow.github.io