Hexo_Fluid随机背景图实现
前言
昨夜4刷还是5刷了《你的名字》,yyds
,剧情+ 配乐都很赞!
然后想的是要不将博客的banner
替换掉,不过昨天比较晚了
今天将banner
替换为相关的图片,收集一些图片,搞个随机图片背景,目前采用《你的名字》+《天气之子》
不过话说,这样一看我的博客,笔记比较多的是折腾 fluid
主题的
改动一点,总结,分享,慢慢就多起来了……
参考资料
- 搭博客少走弯路-Fluid随机背景图 :个人部署失败了,下面失败案例会讲
随机背景图的参考资料好少,也仅找到这篇
随机视频可参考的反倒很多,大家都比较喜欢视频吗….
步骤
实现具体的步骤
- 收集图片
- 压缩图片(加快加载速度)
- 名字排序
- 修改
Fluid
主题布局代码
收集图片+压缩图片+排序
前3个步骤参考这个步骤即可
去找壁纸的话,有些是自己画的,主人公都变的不是主人公了😅
后续找到一个博主Pil0tXia
自制分享的壁纸,这里再次感谢
参考链接:《你的名字。》 2K SDR 4K 原盘超采样壁纸
提供下个人压缩过的版本(删减了一点个人无感的):阿里云链接
寻找高清图片的一些网站:
收集图片后,为了加快网页加载速度,需要使用工具压缩下图片
在线工具:
其他可参考其他博主推荐: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>