配置底部小熊

版权

提示

本文是在博主兰德胡涂文章：《博客底部添加一排小动物》基础上增加了自己实践过程的一些细节，转载无需和我联系，但请注明文章来源。如果侵权之处，请联系博主进行删除，谢谢~

警告

本教程基于 vdoing 主题，其他主题可能会有差异

配置

准备两张图片,图片地址下载链接：点击下载、点击下载
然后我们把这两张图片下载下来上传到自己的公有云或者本地文件夹中，本博客是将其放在public本地文件夹img的index目录，分别重命名为hao.png、haoback.png
编辑 docs.vuepress\common\footer.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>",

完整代码

详细信息

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>",
};

验证

重新运行项目，查看效果

pnpm docs:dev

配置底部小熊 ​

版权 ​

配置 ​

验证 ​

配置底部小熊

版权

配置

验证