小莫唐尼

小莫唐尼

[Halo] Joe美化 - 增加一个大图功能(全屏版)

1495
2023-08-05
[Halo] Joe美化 - 增加一个大图功能(全屏版)

😕 害,这个网友总有奇奇怪怪的需求,在出了《[Halo] Joe美化 - 增加一个大图功能(重置版)》后,觉得大图应该使用全屏会好看一点,而且还需要加上视频的功能,这不,满足一下大家的需求。

🔥 食用提示:本教程基于《[Halo] Joe美化 - 增加一个大图功能(重置版)》修改,如果您也需要将大图修改为全屏,那么请先按照 重置版 教程开始,做完后,继续按照当前的 全屏版 继续美化!!!

🫡 效果预览

可以直接访问 博客首页,查看实际效果,如图所示:

image-1691243949448

🫡 1、修改模板代码

找到 主题编辑/template/evan/big_banner.ftl 文件:

image

将原本的内容全部替换为以下的内容:

 <#-- 
    顶部大图,页面引用示例:
    参数: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 文件
image-1691244168692

添加以下链接(说明:此链接为阿里云图标地址,也就是首页大图中下方用到的一个图标)

<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4065493_69esjesohvl.css"> 

🎊🎊🎊至此,大图全屏版已经完成,去首页看看效果吧!!!