One

主题

One2025-02-25
904
4.9m
Get...

footer小特性配置 ​

footer小特性配置 ​

版权 ​

次风格来源于《spiderapi.cn》、《landhutu.top》大佬网站，十分感谢原作者💖。

环境 ​

2025.2.24(已解决)

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

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

效果 ​

https://onedayxyy.cn/

image-20250224215525077

配置 ​

(1)将相关图片素材放到docs\.vuepress\public\img\index路径

image-20250224214245823

图片下载路径：

2025.2.24-footer-photos.zip

（2）docs\.vuepress\common\footer.ts文件内容替换为如下：

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 <br></a>' +
    // '<a href="http://beian.miit.gov.cn/" target="_blank"> 陇ICP备2023002645号</a>' +
    // '<a href="https://beian.miit.gov.cn/" target="_blank"><img src="https://static.spiderapi.cn/public/images/logo/icp_48x48.png" alt="ICP 备案" style="width:20px; height:auto; margin-bottom:-2px"> 陇ICP备2023002645号</a>' +
    '<a href="https://beian.miit.gov.cn/" target="_blank"><img src="/img/index/icp_48x48.png" alt="ICP 备案" style="width:20px; height:auto; margin-bottom:-2px"> 陇ICP备2023002645号</a>' +
    // ' | <a href="https://beian.mps.gov.cn/" target="_blank"> 甘公网安备62102702000211号</a>' +
    ' | <a href="https://beian.mps.gov.cn/" target="_blank"><img src="/img/index/mps_48x48.png" alt="MPS 公网安备" style="width:auto; height:20px; margin-bottom:-4px"> 甘公网安备62102702000211号</a>' +
    // ' | <a href="https://beian.mps.gov.cn/" target="_blank"><img src="https://static.spiderapi.cn/public/images/logo/mps_48x48.png" alt="MPS 公网安备" style="width:auto; height:20px; margin-bottom:-4px"> 甘公网安备62102702000211号</a>' +
    ' | <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank"><img src="/img/index/vue_48x48.png" alt="Theme by Vdoing" style="width:18px; height:auto; margin-bottom:-4px"> Theme Vdoing</a>' +
    // ' | <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank"><img src="https://static.spiderapi.cn/public/images/logo/vue_48x48.png" alt="Theme by Vdoing" style="width:18px; height:auto; margin-bottom:-4px"> Theme Vdoing</a>' +
    // ' | <a href="https://edgeone.ai/" target="_blank"><img src="https://static.spiderapi.cn/public/images/logo/tencent_edgeone_48x48.png" alt="Tencent EdgeOne" style="width:18px; height:auto; margin-bottom:-3px"> Tencent EdgeOne</a>' +
    ' | <a href="https://edgeone.ai/" target="_blank"><img src="/img/index/tencent_edgeone_48x48.png" alt="Tencent EdgeOne" style="width:18px; height:auto; margin-bottom:-3px"> Tencent EdgeOne</a>' +
    ' | <a href="https://v6.51.la/land/3FcHt9RWSQ8XvN5u" target="_blank"><img src="/img/index/51la.png" alt="51la 网站统计" style="width:auto; height:12px; margin-bottom:-1px"><br></a>' +
    // ' | <a href="https://v6.51.la/land/3FcHt9RWSQ8XvN5u" target="_blank"><img src="https://sdk.51.la/icon/1-1.png" alt="51la 网站统计" style="width:auto; height:12px; margin-bottom:-1px"></a>' +
    

    //虫洞
    ' <a href="https://www.foreverblog.cn/go.html" target="_blank" > <img src="/img/index/wormhole_3.gif" alt="" style="width:auto;height:23px;"> </a>' +
    
    ' | <a href="https://www.travellings.cn/go-by-clouds.html" target="_blank" > <img src="/img/index/traveling.gif" alt="" style="width:auto;height:23px;"> </a>' +

    //十年之约
    ' | <a href="https://www.foreverblog.cn/" target="_blank" > <img src="/img/index/logo_en_default.png" alt="" style="width:auto;height:18px;"> </a>' +
 
    ' | <a href="/friends/" target="_blank" >😘友链 </a>' +
    ' | <a href="/daohang/" target="_blank" >🏀网站导航 </a>' +


    '<br>' +
    //诗词
    // '初闻不知曲中意，再听已是曲中人' +
    '<span style="font-size: 16px;">初闻不知曲中意，再听已是曲中人</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: #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）运行测试效果。

最近更新