Halo x Hao主题——增加页脚底部图片

刘叨叨字数: 3515 阅读耗时: 8 分钟 2025/11/17 博客独享热度: 58 评论:

来到我的网站，细心的朋友可能会发现，在网页的底部居中有一组黑暗之魂风格的图片，如下图所示：

其实想要实现这个样式并不难，有两种方法可以实现，下面简单来说一下实现路径。

方法一：

只要通过代码注入的方式，添加几行代码就能实现，方法如下：进入halo后台，设置-代码注入-页脚，在页脚内填入以下代码即可。

<style>
#footer-darksouls {
    position: relative;
    width: 100%;
}

#footer-darksouls img.darksouls {
    position: absolute; /* 绝对定位 */
    bottom: 35px; /* 0=紧贴 darksouls-wall 顶部，或自己像素调整位置 */
    left: 50%; /* 水平居中 */
    transform: translateX(-50%);
    max-width: min(974px, 100vw); /* 最大宽度限制 */
    display: block;
    z-index: -1; /* 表示z轴，一个元素在叠加顺序上的上下立体关系，控制图片显示层级 */
}

@media screen and (max-width: 1023px) {
    #footer-darksouls {
        height: min(36px, 4vw); /* 在小屏幕上自适应高度 */
    }
}

#footer-banner {
    margin-top: 0 !important;
}
</style>

<div id="footer-darksouls">
    <img class="darksouls entered loaded" src="https://www.liudaodao.cn/upload/132988563_p0.png" alt="黑暗之魂" data-ll-status="loaded">
</div>

根据我注释中内容进行微调，保存后，刷新页面，搞定！

如果因为底部图片过高，遮挡了网站本身内容，只需像我一样，增加CSS的 z-index属性即可，设置为-1，即可将图片置于最底层。

方法二：

找到Hao主题所在的文件夹，修改footer.html文件：themes/theme-hao/templates/modules/footer.html

找到以下div id为footer-banner的代码：

<div th:if="${theme.config.footer.footerContent.default_enable_group.default_enable}" id="footer-banner" th:style="|padding:${theme.config.footer.footerContent.default_enable_group.footer_banner_padding}rem|">

在该代码上方添加类似方法一的HTML代码就可以了。

如修改后页面没有变化，可以尝试在主题-详情-清理缓存模板，后再次尝试刷新。