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

😕 害，这个网友总有奇奇怪怪的需求，在出了《[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"> 

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