提示
本文是在 博主兰德胡涂 文章：《博客底部添加一排小动物》 基础上增加了自己实践过程的一些细节，转载无需和我联系，但请注明文章来源。如果侵权之处，请联系博主进行删除，谢谢~
警告
本教程基于 vdoing 主题，其他主题可能会有差异
然后我们把这两张图片下载下来上传到自己的公有云或者本地文件夹中，本博客是将其放在public本地文件夹img的index目录，分别重命名为hao.png、haoback.png
编辑 docs.vuepress\common\footer.ts 文件
ts
// 添加底部动物 banner
'<div id="footer-animal">' +
' <div class="animal-wall"></div>' +
' <img class="animal entered loaded" src="/img/index/hao.png" alt="动物" data-ll-status="loaded">' +
"</div>" +
// 添加底部动物 banner 样式
"<style>" +
" #footer-animal {" +
" position: relative;" +
" width: 100%" +
"}" +
// " #footer-animal .animal-wall {" +
// " position: absolute;" +
// " bottom: 0;" +
// " width: 100%;" +
// " height: 36px;" +
// " max-width: none;" +
// " background-image: url(https://picx.landhutu.top/rest/2025/z99wGoK.png);" +
// " background-size: auto 100%;" +
// " box-shadow: 0 4px 7px rgba(0,0,0,.15)" +
// "}" +
// " @media screen and (max-width: 1023px) {" +
// " #footer-animal .animal-wall {" +
// " height:4vw;" +
// "}" +
// "}" +
" #footer-animal img.animal {" +
" position: relative;" +
" max-width: min(974px,100vw);" +
" margin: 0 auto;" +
" display: block" +
"}" +
" #footer-banner {" +
" margin-top: 0 !important" +
"}" +
"</style>",ts
import { penName, footerTitle } from "../common/info";
interface Footer {
createYear: number; // 博客创建年份
copyrightInfo: string; // 博客版权信息，支持 a 标签
}
export default <Footer>{
// 页脚信息
createYear: 2024,
copyrightInfo:
// penName + ' | ' + footerTitle + '<br> <a href="http://beian.miit.gov.cn/" target="_blank">陇 ICP 备 2023002645 号</a>',
// penName + footerTitle + '<br> <a href="http://beian.miit.gov.cn/" target="_blank">陇 ICP 备 2023002645 号</a>',
// penName + footerTitle + '<br> <a href="http://beian.miit.gov.cn/" target="_blank">陇 ICP 备 2023002645 号</a>',
// penName + footerTitle + '<br> <a href="http://beian.miit.gov.cn/" target="_blank">陇 ICP 备 2023002645 号</a>' + '<br> <a href="https://beian.mps.gov.cn/" target="_blank">甘公网安备 62102702000211 号</a>',
'<a href="https://hyde.seasir.top/" target="_blank"> Hyde |</a>' +
'<a href="http://beian.miit.gov.cn/" target="_blank"> 陇 ICP 备 2023002645 号</a>' +
' | <a href="https://beian.mps.gov.cn/" target="_blank"> 甘公网安备 62102702000211 号</a>' +
"<br><br/>" +
"<span >淡看风云多变幻，逍遥岁月享清欢</span>" +
// 添加底部动物 banner
'<div id="footer-animal">' +
' <div class="animal-wall"></div>' +
' <img class="animal entered loaded" src="/img/index/hao.png" alt="动物" data-ll-status="loaded">' +
"</div>" +
// 添加底部动物 banner 样式
"<style>" +
" #footer-animal {" +
" position: relative;" +
" width: 100%" +
"}" +
// " #footer-animal .animal-wall {" +
// " position: absolute;" +
// " bottom: 0;" +
// " width: 100%;" +
// " height: 36px;" +
// " max-width: none;" +
// " background-image: url(https://picx.landhutu.top/rest/2025/z99wGoK.png);" +
// " background-size: auto 100%;" +
// " box-shadow: 0 4px 7px rgba(0,0,0,.15)" +
// "}" +
// " @media screen and (max-width: 1023px) {" +
// " #footer-animal .animal-wall {" +
// " height:4vw;" +
// "}" +
// "}" +
" #footer-animal img.animal {" +
" position: relative;" +
" max-width: min(974px,100vw);" +
" margin: 0 auto;" +
" display: block" +
"}" +
" #footer-banner {" +
" margin-top: 0 !important" +
"}" +
"</style>",
};此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。