[Halo] Joe美化 - 增加一个大图功能(全屏版)
编辑
1495
2023-08-05
😕 害,这个网友总有奇奇怪怪的需求,在出了《[Halo] Joe美化 - 增加一个大图功能(重置版)》后,觉得大图应该使用全屏会好看一点,而且还需要加上视频的功能,这不,满足一下大家的需求。
🔥 食用提示:本教程基于《[Halo] Joe美化 - 增加一个大图功能(重置版)》修改,如果您也需要将大图修改为全屏,那么请先按照 重置版
教程开始,做完后,继续按照当前的 全屏版
继续美化!!!
🫡 效果预览
可以直接访问 博客首页,查看实际效果,如图所示:
🫡 1、修改模板代码
找到 主题编辑/template/evan/big_banner.ftl
文件:
将原本的内容全部替换为以下的内容:
<#--
顶部大图,页面引用示例:
参数:type=页面中的 <#macro bigbanner title type="index" >对应的type
<#import "template/common/big_banner.ftl" as bigBanner>
<@bigBanner.bigbanner title="${title}" type="index"/>
参数说明:title=获取当前的页面标题 type=当前页面的类型
-->
<#macro bigbanner title type="index" >
<div id="EvanBigBanner" class="evan-big-banner"
style="background-image:url(http://imgapi.xl0408.top/index.php);<#if (type=='index')>height:calc(100vh - 60px);margin-top: initial;</#if> "
>
<#if type=='index'>
<video id="EvanBigBannerVideo" class="video" preload="auto" loop="" autoplay="" muted=""
src="https://b.925i.cn/static/bg.mp4"
style="width: 100%;height: 100%;object-fit: cover;"
>
</video>
</#if>
<div class="infomation">
<div id="EvanBigBanner_Title" class="title">
<!-- 标题区域 -->
<span id="EvanBigBanner_SubTitle" style="opacity: 0;">
${(type == 'index')?then(blog_title!, title)}
</span>
</div>
<div class="desctitle hitokoto_desctitle">
<div id="HitokotoText" class="motto joe_motto hitokoto_text">
<!-- 一言,内容 -->
</div>
<div id="HitokotoForm" class="motto joe_motto hitokoto_form">
<!-- 一言,作者 -->
</div>
</div>
</div>
<#if type=='index'>
<a href="#indexPosition" class="evan-big-banner_goto">
<span class="index-goto-icon bicon bicon-xiangxia"></span>
</a>
</#if>
<section class="evan-big-banner_bottom" id="indexPosition">
<svg id="EvanWaves" class="waves-svg" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none"
shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88
-18 s 58 18 88 18 v 44 h -352 Z"></path>
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" fill="#fff" x="48" y="0"></use>
<use xlink:href="#gentle-wave" fill="#fff" x="48" y="3"></use>
<use xlink:href="#gentle-wave" fill="#fff" x="48" y="5"></use>
<use xlink:href="#gentle-wave" fill="#fff" x="48" y="7"></use>
</g>
</svg>
</section>
</div>
</#macro>
改动说明:以下代码为使用视频作为大图,如不需要,将以下代码 注释或者删除 即可,如果使用,请将 src="https://b.925i.cn/static/bg.mp4"
换成您自己的视频地址:
<#if type=='index'>
<video id="EvanBigBannerVideo" class="video" preload="auto" loop="" autoplay="" muted=""
src="https://b.925i.cn/static/bg.mp4"
style="width: 100%;height: 100%;object-fit: cover;"
>
</video>
</#if>
🫡 2、添加样式代码
找到 主题设置-自定义-自定义CSS
,在此处补充以下CSS代码:
/* 额外补充大图样式*/
.evan-big-banner_goto{
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 100px;
}
.index-goto-icon {
font-size: 24px;
color: #fff;
animation: aniIndexGotoIcon 2s ease-in-out infinite;
display: inline-block;
}
@keyframes aniIndexGotoIcon {
0%{ transform: translateY(0); }
50%{ transform: translateY(15px); }
100%{ transform: translateY(0); }
}
🫡 3、添加图标
找到 主题编辑/template/common/header.ftl
文件
添加以下链接(说明:此链接为阿里云图标地址,也就是首页大图中下方用到的一个图标)
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4065493_69esjesohvl.css">
🎊🎊🎊至此,大图全屏版已经完成,去首页看看效果吧!!!
- 6
- 0
-
赞助
微信支付微信赞赏QQ赞赏支付宝赞赏 -
分享