footer特性配置

版权

提示

此风格来源于SPIDER API 、兰德胡涂大佬网站，十分感谢原作者 💖。

配置

资源准备下载图片素材并解压：点击下载将相关图片素材放到 docs\.vuepress\public\img\index 路径
docs\.vuepress\common\footer.ts文件内容替换为如下：

详细信息

// 页脚信息
  createYear: 2024,
  copyrightInfo:
    '<a href="https://hyde.seasir.top/" target="_blank"> Hyde <br></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"><img src="/img/index/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://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://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="/wzdh/" target="_blank" >🏀网站导航 </a>' +

完整代码

详细信息

import { penName, footerTitle } from "../common/info";
interface Footer {
  createYear: number; // 博客创建年份
  copyrightInfo: string; // 博客版权信息，支持 a 标签
}
export default <Footer>{
  // 页脚信息
  createYear: 2024,
  copyrightInfo:
    '<a href="https://hyde.seasir.top/" target="_blank"> Hyde <br></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"><img src="/img/index/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://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://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="/wzdh/" 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>",
};

验证

配置完成后，你可以启动 VuePress 开发服务器来查看效果

bash

pnpm docs:dev

footer 特性配置 ​

版权 ​

配置 ​

验证 ​

footer 特性配置

版权

配置

验证