网站首页底部配置小熊熊

配置小熊熊喽

网站首页底部配置小熊熊

版权

此配置来源于《兰德胡涂》大佬《博客底部添加一排小动物》文章，十分感谢原作者💖。

环境

2025.2.20(已解决)

自己开源的 《vuepress-theme-vdoing-one-public》网站模板。

此模板是在Young Kbt blog的开源项目《Kele-Bingtang.github.io》基础上修改为自己的风格而成，感谢大佬开源的模板&感谢原作者开源的vdoing主题。❤️❤️

效果

配置

原作者配置

自己配置

（1）拷贝2张图片到docs\.vuepress\public\img\index目录

图片下载url：

hao.png

haoback.png

（2）编辑docs\.vuepress\common\footer.ts文件

详细信息

import { penName, footerTitle } from '../common/info'
interface Footer {
  createYear: number, // 博客创建年份
  copyrightInfo: string // 博客版权信息，支持 a 标签
}
export default <Footer> {
  // 页脚信息
  createYear: 2024, 
  copyrightInfo:
    '<a href="https://onedayxyy.cn/" target="_blank"> One |</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> 初闻不知曲中意，再听已是曲中人' +
    // 添加底部动物 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: #bcb0a4 url(/img/index/haoback.png) repeat center;' +
    // '    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>'
}

（3）运行测试，观察效果。