Fluid_随机背景图实现


Tags: #软件 #Hexo
Created:
Updated:

前言

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

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

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

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

参考资料

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

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

步骤

实现具体的步骤

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

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

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

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

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

提供下个人压缩过的版本(删减了一点个人无感的):阿里云链接

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

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

在线工具:

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

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

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

如图所示
image-20230510233148537

修改文件夹名字成: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个选项,可以用于清除缓存重新加载

image-20230511000938549

指定页有效

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

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