hexo个人博客优化魔改非插件实现首页banner图片随机切换


廿壴博客是基于hexo+fluid主题搭建,而fluid主题的banner图是纯静态的,所以小波自己花点时间搞了一搞,弄了随机banner图切换效果。

😍廿壴(ganxb2)博客首页banner图片随机切换成品效果

首页随机banner
首页随机banner
首页随机banner
首页随机banner
首页随机banner

🙂版本环境

hexo版本:"5.4.2"

hexo-theme-fluid版本:"1.9.0"


🧐思路

新建一个图片的数组,然后生成随机数,每次刷新页面则根据随机数获取不同的图片网址,图片作者,图片作者网址。


🤔html代码

根据自己的主题找到对应的banner图片的div,增加一个判断首页的类名

1
2
3
4
5
6
<div class="<%- is_home() ? 'home-banner' : '' %>" >
...
<% if (is_home()) { %>
<a class="banner-author" href="/" target="_blank" rel="nofollow noopener noreferrer external"><span>背景作品作者:</span><span class="banner-author-name"></span><i></i></a>
<% } %>
<div>

🤔css代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.home-banner
background-repeat no-repeat
background-position 50% 40%
background-size cover

.banner-author
font-weight normal
font-size 12px
line-height 1.333
z-index 10
display block
position absolute
left 15%
bottom 24px
height 24px
padding 0 12px
border-radius 12px
line-height 24px
color #e3e3e3
background-color rgba(0, 0, 0, 0.4)

background-position 50% 40% 根据自己主题情况调整背景图片的显示位置,细微样式自己根据主题微调


🤔js代码

定义一个方法,根据自己主题的情况选择放置的地方

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
fn = {
// 首页随机图片
randomBanner() {
let bannerArr = [
{img: 'https://pic.rmb.bdstatic.com/bjh/gallery/cd74cebb550a1ec16303523c61ccd23f.jpeg', author: 'TacoSauceNinja', authorUrl: 'https://www.deviantart.com/tacosauceninja'},
{img: 'https://pic.rmb.bdstatic.com/bjh/74a696ca0dce0b6d4eb3274bb05eb1ad2682.jpeg', author: '', authorUrl: ''},
{img: 'https://pic.rmb.bdstatic.com/bjh/e0638488ba8aa4ca152d21ba84b208166612.jpeg', author: '', authorUrl: ''},
{img: 'https://pic.rmb.bdstatic.com/bjh/b4ae33b8ce6759694cbf668e065f2a43746.jpeg', author: '', authorUrl: ''},
{img: 'https://pic.rmb.bdstatic.com/bjh/7947c2c64a8fb76858979d44ba88f7ae1098.jpeg', author: '', authorUrl: ''},
],
randomNO = Math.floor(Math.random()*bannerArr.length),
bannerImg = bannerArr[randomNO].img || '',
bannerAuthor = bannerArr[randomNO].author || '',
bannerAuthorUrl = bannerArr[randomNO].authorUrl || '',
homeBanner = document.querySelector('.home-banner'),
bannerAuthorSelector = document.querySelector('.banner-author'),
bannerAuthorName = document.querySelector('.banner-author-name');
// 判断首页
if(!homeBanner) {
return;
}
homeBanner.style.backgroundImage = 'url('+bannerImg+')';
// 如果是图片
// homeBanner.setAttribute('src', bannerImg);

// 没有作者隐藏
if(!bannerAuthor) {
bannerAuthorSelector.style.display = 'none';
}
else {
bannerAuthorSelector.style.display = 'inline-block';
bannerAuthorSelector.setAttribute('href', bannerAuthorUrl);
bannerAuthorName.textContent = bannerAuthor;
}
}
}

通常是在layout.ejs末尾处</body>前贴入代码调用

1
2
3
4
<script>
// 随机banner
fn.randomBanner();
</script>

THE END
hexo个人博客优化魔改非插件实现首页banner图片随机切换
https://blog.ganxb2.com/33494.html
作者
chopin gump chopin gump
许可协议
小尾巴
Stay Hungry, Stay Foolish「求知若饥, 虚心若愚」 — 廿壴(ganxb2)
微信

微信

支付宝

支付宝

🕐如果评论显示“刷新”无法加载,过一会再来康康~🕢 _(≧∇≦」∠)_ (填写常用邮箱即可快速收到回复通知~)