Halo博客中为首页添加主图背景、视频背景以及打字机动效的实现方法。通过简单修改主题模板与引入少量前端代码，即可让首页拥有静态大图背景、自动播放的视频背景效果，同时为标题或简介文字添加逐字显现的打字机动画，提升页面视觉层次感与交互体验。整个过程无需复杂开发，适合普通用户快速上手，让博客首页在保持简洁的同时更具动态感与个性化，整体风格简洁实用，不影响页面加载与访问体验
上传文件
- 写好的文件另存为big_banner.ftl，不同的部署路径有细微不一样
#服务器上传路径
/home/docker/halo/templates/themes/joe2.0/template/common
- 如果开启首页视频背景大图会覆盖掉，注释首页视频会再显示出
<#--
顶部大图，页面引用示例：
参数：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(/upload/2026/03/pexels-alphaen-31726765.webp);<#if (type=='index')>height:calc(70vh - 60px);margin-top: initial;</#if> "
>
<#if type=='index'>
<video id="EvanBigBannerVideo" class="video" preload="auto" loop="" autoplay="" muted=""
src="https://1821895705.v.123pan.cn/1821895705/BLOG/video/vlog5.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>
外部CSS链接
- 主题设置自定义引用外部CSS链接
/themes/joe2.0/source/css/min/big-banner.min.css
自定义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); }
}
外部JS链接
- 主题设置引用自定义外部JS链接head
<script src="/themes/joe2.0/source/js/big-banner.min.js"></script>
<script src="/themes/joe2.0/source/jsaside-hot-ranking.min.js"></script>
自定义JS
- 主题设置引用自定义JS链接head
// 以下配置参数均为默认值
new EvanBigBanner({
followMode: false, // 跟随模式
followTheme: false, // 跟随主题
titlePrint: true, // 是否启用打字机效果
titlePrintInterval: 300, // 打字机速度
titleTiktok: true, // 标题文字抖音效果
titleText: "开心生活·快乐学习", // 标题文字
titleColor: "#ffffff", // 标题文字颜色
titleShadow: "-3px 2px 6px #1c1f21", // 标题文字阴影
hitokotoParams: {}, // 一言参数，参考：https://developer.hitokoto.cn/sentence/#%E8%AF%B7%E6%B1%82%E5%8F%82%E6%95%B0
hitokotoApi: "https://v1.hitokoto.cn", // 一言API
hitokotoColor: "#ffffff", // 一言文字颜色
hitokotoEnable: true, // 是否使用一言
});
// 以上配置均为默认值，可直接使用进行初始化
// new EvanBigBanner();
评论区