Next 自定义背景自动切换

发表于 更新于 分类于 ， 阅读次数： 本文字数： 1.6k 阅读时长 ≈ 1 分钟

加个需求

之前我们设置的 Blog 的背景图片，还对整体的布局进行了调整，于是这里又多了个需求 --- 背景有了，那能不能多张背景自动切换呢？说干就干。通过查看各位大佬优秀的博客，以及这几天对 Hexo 构建博客的了解；发现 Hexo 发布的博客都是静态的，后端没有数据库支持，都是在本地通过各种集成的插件将写好的 Markdown 转换成 Html ，再通过 hexo d 进行部署发布。

添加 jQuery

Next 主题提供了非常友好的自定义文件，可以根据自己的想法添加各种 css 、JavaScript 样式；我们知道 js 可以实现网页的动态变化，于是我们可以通过对应的 js 脚本来实现网页背景的自动切换。

本博客的背景切换是引用了 jQuery 动画，所以不要忘记了添加 http://api.asilu.com/cdn/jquery.js,jquery.backstretch.min.js。

修改主题配置文件

  • _config.next.yml
1
2
3
4
5
6
7
8
9
10
11
custom_file_path:
  # head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  # postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  bodyEnd: source/_data/body-end.njk   ## 取消该行的注释，因为需要往里面添加对应的 js
  variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

如果是按照我前面写的教程安装的 hexo-theme-next 8.10.1 ；则在你的站点根目录下是没有这个文件，所以你需要自己创建 source/_data/body-end.njk ，以便添加后面的 js

1
2
touch <hexo-site>/source/_data/body-end.njk 
## 如存在以上文件，则跳过

body-end.njk 添加 js

  • body-end.njk
1
2
3
4
5
6
7
8
9
10
11
12
13
<script src="http://api.asilu.com/cdn/jquery.js,jquery.backstretch.min.js" type="text/javascript"></script>
<body>
<script type="text/javascript">
$.backstretch([  // 注意将下面的 jpg 替换成自己的 background
        '/images/background1.jpg',
        '/images/background2.jpg',
        '/images/background.jpg'
    ], {
        fade : 3000, // 动画时长; 单位：毫秒
        duration : 10000 // 切换延时
});
</script>
</body>

接下来就只需要将提前准备好的背景图片同一放在 images 文件夹下，并修改上面的 jpg。运行 hexo clean && hexo server 你就会发现网页出现了背景，并每 10s 自动切换下一张。

参考链接

[1] https://www.cnblogs.com/yhaing/p/7852689.html