Hexo_Fluid随机背景图实现

前言

昨夜4刷还是5刷了《你的名字》，yyds，剧情+ 配乐都很赞！

然后想的是要不将博客的banner替换掉，不过昨天比较晚了

今天将banner替换为相关的图片，收集一些图片，搞个随机图片背景，目前采用《你的名字》+《天气之子》

不过话说，这样一看我的博客，笔记比较多的是折腾 fluid 主题的
改动一点，总结，分享，慢慢就多起来了……

参考资料

• 搭博客少走弯路-Fluid随机背景图 ：个人部署失败了，下面失败案例会讲

随机背景图的参考资料好少，也仅找到这篇

随机视频可参考的反倒很多，大家都比较喜欢视频吗….

步骤

实现具体的步骤

1. 收集图片
2. 压缩图片（加快加载速度）
3. 名字排序
4. 修改Fluid主题布局代码

收集图片+压缩图片+排序

前3个步骤参考这个步骤即可

去找壁纸的话，有些是自己画的，主人公都变的不是主人公了😅

后续找到一个博主Pil0tXia自制分享的壁纸，这里再次感谢
参考链接：《你的名字。》 2K SDR 4K 原盘超采样壁纸

提供下个人压缩过的版本（删减了一点个人无感的）：阿里云链接

寻找高清图片的一些网站：

• Wallpaper Abyss
• Awesome Wallpapers
• WallpapersWide.com

收集图片后，为了加快网页加载速度，需要使用工具压缩下图片

在线工具：

• tinypng
• docsmall

其他可参考其他博主推荐：https://blog.meeo.io/2017/04/compress-picture.html?m=1

这里就不过多推荐，实现目的即可

全部放一个文件夹后，进行名字的排序，使用序号，从0开始

如图所示

修改文件夹名字成：random-bg，然后放到主题文件夹下的img文件夹

具体位置：themes\fluid\source\img\random-bg

修改主题代码

定位主题文件夹下的banner.ejs

具体位置themes\fluid\layout\_partials\header\banner.ejs

添加下面代码（思路为采用随机图片链接替换原先banner的链接）

将下面的第8行的getRandomNumber()修改成图片的最大数量，例如个人是223张，所以这里是getRandomNumber(0, 223)

如果你是10张，那就是getRandomNumber(0, 10)

<script>
  function getRandomNumber(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

var randomNum = getRandomNumber(0, 223).toString();
var banner_img = "/img/random-bg/" + randomNum + ".jpg";
document.getElementById('banner').removeAttribute('style')
document.getElementById('banner').setAttribute('style',`background: url('${banner_img}') no-repeat center center; background-size: cover;`)


</script>

完整代码如下：

<%
var banner_img = page.banner_img || theme.index.banner_img
var banner_img_height = parseFloat(page.banner_img_height || theme.index.banner_img_height);
var banner_mask_alpha = parseFloat(page.banner_mask_alpha || theme.index.banner_mask_alpha);
var subtitle = page.subtitle || page.title;
%>

<div id="banner" class="banner" <%- theme.banner && theme.banner.parallax && 'parallax=true' %>
  style="background: url('<%- url_for(banner_img) %>') no-repeat center center; background-size: cover;">
  <div class="full-bg-img">
    <div class="mask flex-center" style="background-color: rgba(0, 0, 0, <%= parseFloat(banner_mask_alpha) %>)">
      <div class="banner-text text-center fade-in-up">
        <div class="h2">
          <% if(theme.fun_features.typing.enable && in_scope(theme.fun_features.typing.scope)) { %>
            <span id="subtitle" data-typed-text="<%= subtitle %>"></span>
          <% } else { %>
            <span id="subtitle"><%- subtitle %></span>
          <% } %>
        </div>

        <% if (is_post()) { %>
          <%- inject_point('postMetaTop') %>
        <% } %>
      </div>

      <% if (theme.scroll_down_arrow.enable && theme.scroll_down_arrow.banner_height_limit <= banner_img_height && page.layout !== '404') { %>
        <div class="scroll-down-bar">
          <i class="iconfont icon-arrowdown"></i>
        </div>
      <% } %>
    </div>
  </div>
</div>

<script>
  function getRandomNumber(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}


var randomNum = getRandomNumber(0, 223).toString();
var banner_img = "/img/random-bg/" + randomNum + ".jpg";
document.getElementById('banner').removeAttribute('style')
document.getElementById('banner').setAttribute('style',`background: url('${banner_img}') no-repeat center center; background-size: cover;`)


</script>

之后三件套（hexo clean&hexo g&hexo s）重新部署下就能看到效果了

目前我的主页就是随机效果

失败案例

按照参考资料中的方法：搭博客少走弯路-Fluid随机背景图，失败了

参考博主资料，写的代码（第2行修改成第3行的代码）：

<%
<!-- var banner_img = page.banner_img || theme.index.banner_img -->
var banner_img = "/img/random-bg/"+(Math.floor(Math.random() * 17)).toString()+".jpg"
var banner_img_height = parseFloat(page.banner_img_height || theme.index.banner_img_height);
var banner_mask_alpha = parseFloat(page.banner_mask_alpha || theme.index.banner_mask_alpha);
var subtitle = page.subtitle || page.title;
%>

<div id="banner" class="banner" <%- theme.banner && theme.banner.parallax && 'parallax=true' %>
  style="background: url('<%- url_for(banner_img) %>') no-repeat center center; background-size: cover;">
  <div class="full-bg-img">
    <div class="mask flex-center" style="background-color: rgba(0, 0, 0, <%= parseFloat(banner_mask_alpha) %>)">
      <div class="banner-text text-center fade-in-up">
        <div class="h2">
          <% if(theme.fun_features.typing.enable && in_scope(theme.fun_features.typing.scope)) { %>
            <span id="subtitle" data-typed-text="<%= subtitle %>"></span>
          <% } else { %>
            <span id="subtitle"><%- subtitle %></span>
          <% } %>
        </div>

        <% if (is_post()) { %>
          <%- inject_point('postMetaTop') %>
        <% } %>
      </div>

      <% if (theme.scroll_down_arrow.enable && theme.scroll_down_arrow.banner_height_limit <= banner_img_height && page.layout !== '404') { %>
        <div class="scroll-down-bar">
          <i class="iconfont icon-arrowdown"></i>
        </div>
      <% } %>
    </div>
  </div>
</div>

上述esj代码，(Math.floor(Math.random() * 17))生成一个范围在 0 到 16（不包括 17）之间的随机整数

不够友好，重新封装下esj代码的随机数部分

<%
function getRandomNumber(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
var randomNum = getRandomNumber(0, 223).toString();
var banner_img = "/img/random-bg/" + randomNum + ".jpg";
var banner_img_height = parseFloat(page.banner_img_height || theme.index.banner_img_height);
var banner_mask_alpha = parseFloat(page.banner_mask_alpha || theme.index.banner_mask_alpha);
var subtitle = page.subtitle || page.title;
%>

<div id="banner" class="banner" <%- theme.banner && theme.banner.parallax && 'parallax=true' %>
  style="background: url('<%- url_for(banner_img) %>') no-repeat center center; background-size: cover;">
  <div class="full-bg-img">
    <div class="mask flex-center" style="background-color: rgba(0, 0, 0, <%= parseFloat(banner_mask_alpha) %>)">
      <div class="banner-text text-center fade-in-up">
        <div class="h2">
          <% if(theme.fun_features.typing.enable && in_scope(theme.fun_features.typing.scope)) { %>
            <span id="subtitle" data-typed-text="<%= subtitle %>"></span>
          <% } else { %>
            <span id="subtitle"><%- subtitle %></span>
          <% } %>
        </div>

        <% if (is_post()) { %>
          <%- inject_point('postMetaTop') %>
        <% } %>
      </div>

      <% if (theme.scroll_down_arrow.enable && theme.scroll_down_arrow.banner_height_limit <= banner_img_height && page.layout !== '404') { %>
        <div class="scroll-down-bar">
          <i class="iconfont icon-arrowdown"></i>
        </div>
      <% } %>
    </div>
  </div>
</div>

上述代码的问题在于，本地调试可以随机返回背景图片

但是一部署到服务器上就不行了，加载一次后，就一直是固定的那个图，个人推测是缓存问题

但是浏览器进行ctrl+F5强制刷新仍然无效，个人尝试了一些方法

包括：在图片的URL中添加一个无意义的随机数（这样浏览器会认为每次请求的是一个新的图片，而不会使用缓存的副本。）

<%
function getRandomNumber(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

var randomImgNumber = getRandomNumber(0, 223); // 生成随机数
var banner_img = "/img/random-bg/" + randomImgNumber.toString() + ".jpg";
var banner_img_url = url_for(banner_img) + '?v=' + randomImgNumber; // 添加随机参数
var banner_img_height = parseFloat(page.banner_img_height || theme.index.banner_img_height);
var banner_mask_alpha = parseFloat(page.banner_mask_alpha || theme.index.banner_mask_alpha);
var subtitle = page.subtitle || page.title;
%>

包括：添加_headers配置，用于声明不缓存

Cache-Control: no-store, no-cache, must-revalidate, proxy-revalidate

折腾了很多方法都不行，缓存机制暂时不是很了解，放弃这个方案，目前推测问题可能出在部署在Netlify服务器上面有关

如果有小伙伴是自己的服务器，尝试可以，可以反馈下~

拓展

强制刷新

get到的知识点，chrome在调试模式下，长按chrome的刷新，有3个选项，可以用于清除缓存重新加载

指定页有效

如果只想要主页有随机图片效果，其他的全部采用固定效果，可以这么写，

加个if语句（第8行），仅调试下和主页下有效，也可以根据个人需要改成自己想要的页面

<script>
  function getRandomNumber(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

if(location.href=='https://linguoguang.com/' || location.href=='http://localhost:4000/' ){
  var randomNum = getRandomNumber(0, 223).toString();
  var banner_img = "/img/random-bg/" + randomNum + ".jpg";
  document.getElementById('banner').removeAttribute('style')
  document.getElementById('banner').setAttribute('style',`background: url('${banner_img}') no-repeat center center; background-size: cover;`)
}

</script>

手机端检测

还可以继续拓展，玩的花里胡哨一点，电脑段采用随机背景，手机端不采用

思路如下，使用ua进行判断（当然不绝对准，例如访客修改了ua）

下面代码手机端返回true，电脑端返回false

/Mobi/.test(navigator.userAgent)

写个三元运算符进行赋值，电脑采用随机背景，手机采用固定背景

var banner_img = isMobile ? (page.banner_img || theme.index.banner_img):"/img/random-bg/" + getRandomNumber(0, 223).toString() + ".jpg";

完整代码

<%
var banner_img = page.banner_img || theme.index.banner_img
var banner_img_height = parseFloat(page.banner_img_height || theme.index.banner_img_height);
var banner_mask_alpha = parseFloat(page.banner_mask_alpha || theme.index.banner_mask_alpha);
var subtitle = page.subtitle || page.title;
%>

<div id="banner" class="banner" <%- theme.banner && theme.banner.parallax && 'parallax=true' %>
  style="background: url('<%- url_for(banner_img) %>') no-repeat center center; background-size: cover;">
  <div class="full-bg-img">
    <div class="mask flex-center" style="background-color: rgba(0, 0, 0, <%= parseFloat(banner_mask_alpha) %>)">
      <div class="banner-text text-center fade-in-up">
        <div class="h2">
          <% if(theme.fun_features.typing.enable && in_scope(theme.fun_features.typing.scope)) { %>
            <span id="subtitle" data-typed-text="<%= subtitle %>"></span>
          <% } else { %>
            <span id="subtitle"><%- subtitle %></span>
          <% } %>
        </div>

        <% if (is_post()) { %>
          <%- inject_point('postMetaTop') %>
        <% } %>
      </div>

      <% if (theme.scroll_down_arrow.enable && theme.scroll_down_arrow.banner_height_limit <= banner_img_height && page.layout !== '404') { %>
        <div class="scroll-down-bar">
          <i class="iconfont icon-arrowdown"></i>
        </div>
      <% } %>
    </div>
  </div>
</div>

<script>
  
  function getRandomNumber(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
var isMobile = /Mobi/.test(navigator.userAgent); // 检测是否为移动设备
var randomNum = getRandomNumber(0, 223).toString();
var banner_img = isMobile ? (page.banner_img || theme.index.banner_img):"/img/random-bg/" + getRandomNumber(0, 223).toString() + ".jpg";
document.getElementById('banner').removeAttribute('style')
document.getElementById('banner').setAttribute('style',`background: url('${banner_img}') no-repeat center center; background-size: cover;`)

</script>

代码备份

最后使用的（可用），2023 年 7 月 15 日

<script>
  function getRandomNumber(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

  var currentUrl = window.location.href;
  var banner_img = "/img/random-bg/" + getRandomNumber(0, 223).toString() + ".jpg";
  // if (currentUrl === 'https://linguoguang.com/' || currentUrl.startsWith('https://linguoguang.com/page/') ) {
  // const regex = /^(https?:\/\/(www\.)?linguoguang\.com\/|http:\/\/localhost:4000\/)(#board)?$/

  var urlArray = ['https://linguoguang.com/','https://www.linguoguang.com/','http://localhost:4000/']
  for (var url_index in urlArray) {
    if (currentUrl == urlArray[url_index] || currentUrl.startsWith(urlArray[url_index]+'page/')){
        //document.getElementById('banner').removeAttribute('style');
        document.getElementById('banner').setAttribute('style', `background: url('${banner_img}') no-repeat center center; background-size: cover;`);
    }
  }

</script>