volantis大量背景图的优化方案

前往我的主页以获得更好的阅读体验

volantis多背景图的优化方案 - DearXuan的主页https://blog.dearxuan.com/2021/11/29/volantis%E5%A4%9A%E8%83%8C%E6%99%AF%E5%9B%BE%E7%9A%84%E4%BC%98%E5%8C%96%E6%96%B9%E6%A1%88/

​​​​​​​原方案的不足之处

volantis的所有背景图都储存在配置文件中，如果图片过多，就会导致配置文件冗长

实际上，产生随机图的原理是遍历数组并随机交换，因此图片过多时加载速度也会大幅度降低

但是实际上这些图片的地址都高度相似，因此我们可以换个思路，每次生成一个随机数，并动态生成图片地址，这样就大大提高了加载速度，并且省去了填写地址的麻烦

备份

在修改源码之前先备份源文件

命名格式

使用数字命名图片，下标从1开始，例如 "1.jpg","2.jpg"。将所有图片上传至网页目录或图床中，请确保所有图片都在同一个文件夹下

修改代码

在_config.volantis.yml或volantis.yml里删除原images下的所有图片地址，改为total

parallax:
  enable: true
  position: fixed       # cover: sticky on the cover.   fixed: Fixed as background for the site.
  shuffle: true         # shuffle playlist
  duration: 60000       # Duration (ms)
  fade: 1500            # fade duration (ms) (Not more than 1500)
  images:               # For personal use only. At your own risk if used for commercial purposes !!!
    total: xxx
    

其中xxx表示图片的数量，假如你有100张图片，则total为100

打开volantis/layout/_plugins/parallax/script.ejs，如果主题更新导致文件位置改变，可以直接搜索

将代码替换为

<script>
  let total = <%-theme.plugins.parallax.images.total%>;
  let index = Math.floor(Math.random() * total) + 1;
  let IntervalParallax = null;

  function parallax(){
    let ParallaxWindow = document.querySelector("#parallax-window");
    <% if (theme.plugins.parallax.position=="fixed") { %>
      ParallaxWindow = document.querySelector("html");
    <% } %>
    Parallax.window = ParallaxWindow;
    Parallax.options.fade = <%- theme.plugins.parallax.fade %>;
    Parallax.cache = 1;
    next_parallax();
    Parallax.init();
    if (total>1) {
      IntervalParallax = setInterval(function () {
        next_parallax();
      }, '<%- theme.plugins.parallax.duration %>');
    }
  }

  function next_parallax() {
    if (typeof Parallax == "undefined") {
      return
    }
    <% if (theme.plugins.parallax.position!="fixed") { %>
      if (!document.querySelector("#full")&&!document.querySelector("#half")) {
        return
      }
    <% } %>
    if (total>=1) {
      Parallax.options.src = "你的图片地址" + index + ".jpg";
      Parallax.start();
      index++;
      if (Parallax.cache) {
        fetch("你的图片地址" + index + ".jpg?t=" + new Date().getTime());
      }
    }
  }
  var runningOnBrowser = typeof window !== "undefined";
  var isBot = runningOnBrowser && !("onscroll" in window) || typeof navigator !== "undefined" && /(gle|ing|ro|msn)bot|crawl|spider|yand|duckgo/i.test(navigator.userAgent);
  if (!isBot) {
    volantis.js('<%- theme.cdn.map.js.parallax %>').then(()=>{
      parallax()
    })
    volantis.pjax.send(()=>{
      clearInterval(IntervalParallax)
    },"clearIntervalParallax");
    volantis.pjax.push(parallax);
  }
</script>

将两处中文改为你的图片地址

刷新

打开网页，按下CTRL+F5强制刷新，如果背景正常显示，则修改成功