配置footer小熊和徽标

简介

来给自己的Teek博客增加一个好看的小熊和徽标。😊

版权

警告

本着开源共享、共同学习的精神：

本文是在《Hyde Blog》博主的开源仓库基础上增加了一些自己的实际操作记录和修改，内容依旧属于原作者所有。转载无需和我联系，但请注明文章来源。如果侵权之处，请联系博主进行删除，谢谢。

环境

2025.5.2(已解决)

警告

次配置适用于Teek@1.1.0-2025.5.1版本（其它版本可自行测试）。

提示

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

此模板是在《Young Kbt blog》大佬开源项目《vitepress-theme-teek 》基础上修改为自己的风格而成，感谢大佬开发得主题，大佬威武。❤️❤️

效果

https://onedayxyy.cn/

配置

（1）编辑docs\.vitepress\config.mts，修改代码为如下：

  footerInfo: {
    // bottomMessage: ["初闻不知曲中意，再听已是曲中人"],
    topMessage: [ 
      `<span><img alt="VitePress" src="https://liuyuyang.net/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fanimals.65eaf6e3.webp&w=750&q=75"><span/>`,
  
      `<a target="_blank" href="https://vitepress.dev/" title="本站框架基于 VitePress_v1.6.3" ><img alt="VitePress" src="https://img.shields.io/badge/Frame-VitePress-4868C2?logo=vitepress&amp;logoColor=fff" ></a>
      <a target="_blank" href="https://twikoo.js.org/" title="本站评论系统使用 Twikoo" ><img alt="Twikoo" src="https://img.shields.io/badge/Comments-Twikoo-0072F9"></a>
  
      <a target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" title="本站内容采用 CC BY-NC-SA 4.0 国际许可协议进行许可"><img alt="Copyright" src="https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?logo=coursera&amp;logoColor=fff"></a>
      <a target="_blank" href="https://www.algolia.com/" title="本站搜索服务使用 Algolia"><img alt="Algolia" src="https://img.shields.io/badge/Search-Algolia-3095FA?logo=Algolia"></a>
  
      <a target="_blank" href="https://www.aliyun.com/" title="本站部署服务使用 Aliyun"><img alt="Aliyun" src="https://img.shields.io/badge/Alibaba-Cloud?logo=alibabacloud&label=Server&color=%23FF6A00"></a>
      <a target="_blank" href="https://umami.is/" title="本站统计服务使用 Umami"><img alt="Umami" src="https://img.shields.io/badge/umami-000000?logo=umami&label=Count&color=%23000000"></a>
      <a target="_blank" href="https://nginx.org/" title="本站Nginx反向代理服务 Nginx"><img alt="Nginx" src="https://img.shields.io/badge/Nginx-Proxy?logo=Nginx&label=Proxy"></a>`,
    ],    
    theme: {
      name: `Theme By Teek@${version}-2025.5.1`,
    },
    // topMessage: ["初闻不知曲中意，再听已是曲中人"],
    bottomMessage: [
      `<script id="LA-DATA-WIDGET" crossorigin="anonymous" charset="UTF-8" src="https://v6-widget.51.la/v6/3LmZHLhDZIDpMaT0/quote.js?theme=#1690FF,#333333,#999999,#007BFF,#FFFFFF,#1690FF,12&f=12&display=0,0,1,1,1,1,1,1"></script>`,
      `<span style="margin: 0; display: inline;">本站已在地球上苟活了 <span id="footer-runtime"></span></span>`,// 搭配 ./theme/helper/useFooterRuntime.ts
      `<a href="https://51.la/" target="_blank" style="display:flex;align-items:center;justify-content:center;">本网站由51.LA <img src="https://51.la/favicon.ico" style="width:16px;height:16px;" alt="51.LA"> 提供数据统计服务</a>`,
      "初闻不知曲中意，再听已是曲中人",
    ],   

    copyright: {
      createYear: 2025,
      suffix: "Teek",
    },
    icpRecord: {
      name: "陇ICP备2023002645号",
      link: "http://beian.miit.gov.cn/",
    },
    // 网络安全备案信息配置
    securityRecord: {
      name: "甘公网安备62102702000211号",
      link: "https://beian.mps.gov.cn/",
    },    
    customHtml: ``, // 搭配 ./theme/helper/useFooterRuntime.ts
  },

（2）编辑docs\.vitepress\theme\styles\var.scss，修改代码为如下：

css

/* 页脚微章居中 */
.tk-footer-info p {
  display: flex;
  justify-content: center;
}

/* 移动端页脚微章布局 */
@media (max-width: 768px) {
  .tk-footer-info p {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    font-weight: 500;
  }
  
  .tk-footer-info p a {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.2rem;
  }
}

/* 页脚微章图片 */
.tk-footer-info p img {
  margin-left: 10px;
}