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

3k 字 25 分钟 编程 / 前端

🙂前言

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


😍廿壴博客首页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>

关注廿壴(GANXB2)微信公众号

『旅行者』，帮小波关注一波公众号吧。

小波需要100位关注者才能申请红包封面设计资格，万分感谢！

关注后可微信小波，前66的童鞋可以申请专属红包封面设计。

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

微信

支付宝

支付宝

- ( ゜- ゜)つロ 填写QQ邮箱自动获取头像亦更快获得回复通知
评论区显示“刷新”，多点几下或过会儿再来康康 _(≧∇≦」∠)_