配置过程

汇总

bash

Teek~一款简约、唯美、丝滑、强大的VitePress主题
（1）Teek简约版：（原作者模板）
demo: https://vp.teek.top/
简约模板：https://github.com/Kele-Bingtang/vitepress-theme-teek-docs-template



（2）Teek增强版：（One或Hyde模板）
One：
	主站：https://onedayxyy.cn/
    demo：https://teek.onedayxyy.cn/
	简约模板：https://gitee.com/onlyonexl/vitepress-theme-teek-one-public-simple  （推荐）
	花里胡哨模板：https://gitee.com/onlyonexl/vitepress-theme-teek-one-public-gull （不推荐）
Hyde：
	demo：https://teek.seasir.top/
	模板：https://gitee.com/SeasirHyde/teek-hyde
	
---

One 主站：https://onedayxyy.cn/

✅删除反馈交流

默认

配置方法

注释次部分代码：

效果（OK）

存在问题（这里为什么还存在这个字段xxx）

重新运行下就好了！！！

✅修复报错

默认是报错的

修复后

✅配置默认风格为博客卡片风格

当前

默认是文档风格

配置方法

编辑docs\.vitepress\theme\components\TeekLayoutProvider.vue文件：

// import { teekDocConfig } from "../config/teekConfig";
import { teekBlogCardConfig } from "../config/teekConfig";

// 默认文档风
// const currentStyle = ref("doc");
// const teekConfig = ref(teekDocConfig);

// 默认博客 卡片风
const currentStyle = ref("blog-card");
const teekConfig = ref(teekBlogCardConfig);

验证（OK的）

✅修改标签页首页博客标题

默认

配置

配置后

✅拷贝readme 和license文件过来

默认是没的

拷贝过来

效果

✅个人头像配置

当前

配置

编辑前：

记得把img目录拷贝过来：

编辑后：

效果

✅更换为自己喜欢的壁纸

默认壁纸，只有那么几张，这里替换为自己喜欢的壁纸
配置前

配置后：

✅关闭彩虹功能

默认是有彩虹功能的，为了简约，这里关闭彩虹功能
默认

主要是这个文件

配置

效果

✅首页尺寸得往大调整下

配置

效果

✅友情链接风格得调整下

配置方法

编辑docs\.vitepress\config.ts文件：

  // 友链
  friendLink: {
    enabled: true, // 是否启用友情链接卡片
    list: [
      {
        avatar: "/teek-logo-large.png",
        name: "vitepress-theme-teek",
        desc: "Teek官网",
        link: "https://vp.teek.top/",
      },  
      {
        name: "Teeker",
        desc: "朝圣的使徒，正在走向编程的至高殿堂！",
        link: "http://notes.teek.top/",
        avatar: "https://testingcf.jsdelivr.net/gh/Kele-Bingtang/static/user/avatar2.png",
      },     
      {
        avatar: "/img/website/hyde.ico",
        name: "Hyde Blog",
        desc: "人心中的成见是一座大山",
        link: "https://teek.seasir.top/",
      },
      {
        avatar: "https://wiki.eryajf.net/img/logo.png",
        name: "二丫讲梵",
        desc: "💻学习📝记录🔗分享",
        link: "https://wiki.eryajf.net/",
      },
      {
        avatar: "/img/website/sugarat.top-logo.jpeg",
        name: "粥里有勺糖",
        desc: "大佬，新颖，不错的VitePress主题",
        link: "https://sugarat.top/",
      },
      {
        name: "VitePress 快速上手中文教程",
        desc: "如果你也想搭建它，那跟我一起做吧",
        link: "https://vitepress.yiov.top/",
        avatar: "https://avatars.githubusercontent.com/u/90893790?v=4",
      },
      {
        avatar: "https://img.onedayxyy.cn/images/POETIZE-logo.jpg",
        name: "POETIZE",
        desc: "最美博客",
        link: "https://poetize.cn/",
      },
      {
        avatar: "https://img.onedayxyy.cn/images/image-20250220073534772.png",
        name: "宇阳",
        desc: "记录所学知识，缩短和大神的差距！",
        link: "https://liuyuyang.net",
      },
      {
        avatar: "https://sinc.us.kg/avatar/avatar.webp",
        name: "凿壁偷光不算偷",
        desc: "tk 道友",
        link: "https://sinc.us.kg/",
      },
      {
        avatar: "/img/websites/zhouyu2156.github.io.svg",
        name: "极客兔 - 笔记站",
        desc: "一心创作优质内容",
        link: "https://zhouyu2156.github.io/",
      },  
    ], // 友情链接数据列表
    limit: 5, // 一页显示的数量
    // autoScroll: false, // 是否自动滚动
    // scrollSpeed: 2500, // 滚动间隔时间，单位：毫秒。autoScroll 为 true 时生效

    autoPage: true, // 是否自动翻页
    pageSpeed: 4000, // 翻页间隔时间，单位：毫秒。autoPage 为 true 时生效
    titleClick: (router) => router.go("/websites"), // 查看更多友链
  },

注释以下内容：

编辑docs\.vitepress\theme\config\teekConfig.ts文件：

  // friendLink: {
  //   list: [
  //     {
  //       name: "Teeker",
  //       desc: "朝圣的使徒，正在走向编程的至高殿堂！",
  //       avatar: "https://testingcf.jsdelivr.net/gh/Kele-Bingtang/static/user/avatar2.png",
  //       link: "http://notes.teek.top/",
  //     },
  //     {
  //       name: "vuepress-theme-vdoing",
  //       desc: "🚀一款简洁高效的VuePress 知识管理&博客 主题",
  //       avatar: "https://doc.xugaoyi.com/img/logo.png",
  //       link: "https://doc.xugaoyi.com/",
  //     },
  //     {
  //       name: "One",
  //       desc: "明心静性，爱自己",
  //       avatar: "https://onedayxyy.cn/img/xyy-touxiang.png",
  //       link: "https://onedayxyy.cn/",
  //     },
  //     {
  //       name: "Hyde Blog",
  //       desc: "人心中的成见是一座大山",
  //       avatar: "https://teek.seasir.top/avatar/avatar.webp",
  //       link: "https://teek.seasir.top/",
  //     },
  //     {
  //       name: "二丫讲梵",
  //       desc: "💻学习📝记录🔗分享",
  //       avatar: "https://wiki.eryajf.net/img/logo.png",
  //       link: " https://wiki.eryajf.net/",
  //     },
  //     {
  //       name: "粥里有勺糖",
  //       desc: "简约风的 VitePress 博客主题",
  //       avatar: "https://theme.sugarat.top/logo.png",
  //       link: "https://theme.sugarat.top/",
  //     },
  //     {
  //       name: "VitePress 快速上手中文教程",
  //       desc: "如果你也想搭建它，那跟我一起做吧",
  //       avatar: "https://avatars.githubusercontent.com/u/90893790?v=4",
  //       link: "https://vitepress.yiov.top/",
  //     },
  //     {
  //       name: "友人A",
  //       desc: "おとといは兎をみたの，昨日は鹿，今日はあなた",
  //       avatar: "http://niubin.site/logo.jpg",
  //       link: "http://niubin.site/",
  //     },
  //   ],
  //   autoScroll: true,
  // },

效果（OK）

✅自动打开浏览器功能

配置

（1）在docs\.vitepress\config.mts文件defineConfig区域配置如下代码：

  // 运行后自动打开网页
  vite: {
    server: {
      open: true
    }
  },

（2）运行测试

运行以下命令后，就会自动打开浏览器了：完美。😊

bash

pnpm docs:dev

✅壁纸缺少箭头、由远及近效果、导航栏毛玻璃

配置

箭头配置：

由远及近效果、导航栏毛玻璃配置：

壁纸配置：

效果

✅多文件内存限制

已配置：

✅500KB报错

打包时出现如下警告

SHELL

(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

警告

提示你的内容太大了，打包后的任意文件超出了500KB，希望你能优化下,要么md文档内容写少点,当然这不现实

解决方法：

在Demo\docs-base\.vitepress\config.mts,添加如下配置

export default defineConfig({
    vite: {
     //其他配置项 
    build: {
      chunkSizeWarningLimit: 1500, // 限制警告的块大小
    },
  },
})

解决办法（已配置）

✅缺少公告、标签页、问候语、顶部滚动条

感觉这个配置后，就出现了打包报错的问题。。。。！！！

配置

效果（已实现）

✅配置不算子统计

编辑docs\.vitepress\theme\config\teekConfig.ts文件：

  // 布蒜子统计分析
  docAnalysis: {
    createTime: "2024-10-19",
    statistics: {
      provider: "busuanzi",
    },
    wordCount: true,
    readingTime: true,
    // overrideInfo: [
    //   { key: "lastActiveTime", value: (_, currentValue) => `${currentValue}前` },
    //   { key: "totalPosts", label: "文章总数目" },
    // ],
    appendInfo: [{ key: "index", label: "序号", value: "One" }],
  },

✅缺少底部51数据、footerinfo数据

配置

效果

✅关闭默认摘要功能

默认是有摘要的

配置

OK。

建议关闭自动摘要功能

推荐关闭自动显示摘要功能，这样首页文章会更加简约一点。

无摘要效果

有摘要效果

✅关闭首页卡片作者

配置

✅配置自动注入封面

配置

docs\.vitepress\config.ts文件：

    autoFrontmatter: true, // 自动生成 frontmatter
    permalinkOption: {
      notFoundDelayLoad: 1000, // 1秒后加载
    },

    // 自动格式formatter插件 添加文章封面图
    autoFrontmatterOption: {
      exclude: { title: true, date: true }, // 排除自动生成字段
      transform: frontmatter => {
       // 如果文件本身存在了 coverImg，则不生成
       if (frontmatter.coverImg) return;
        
       // 随机获取 coverImg
       const list = [
        "https://img.onedayxyy.cn/images/1.webp",
        "https://img.onedayxyy.cn/images/2.webp",
        "https://img.onedayxyy.cn/images/3.webp",
        "https://img.onedayxyy.cn/images/4.webp",
        "https://img.onedayxyy.cn/images/5.webp",
        "https://img.onedayxyy.cn/images/6.webp",
        "https://img.onedayxyy.cn/images/7.webp",
        "https://img.onedayxyy.cn/images/8.webp",
        "https://img.onedayxyy.cn/images/9.webp",
        "https://img.onedayxyy.cn/images/10.webp",
        "https://img.onedayxyy.cn/images/11.webp",
        "https://img.onedayxyy.cn/images/12.webp",
        "https://img.onedayxyy.cn/images/13.webp",
        "https://img.onedayxyy.cn/images/14.webp",
        "https://img.onedayxyy.cn/images/15.webp",
        "https://img.onedayxyy.cn/images/16.webp",
        "https://img.onedayxyy.cn/images/17.webp",
        "https://img.onedayxyy.cn/images/18.webp",
        "https://img.onedayxyy.cn/images/19.webp",
       ];
        
       const coverImg = list[Math.floor(Math.random() * list.length)];
        
       const transformResult = { ...frontmatter, coverImg };
        
       return Object.keys(transformResult).length ? transformResult : undefined;
      },
    }, 
  },

效果

✅让文章卡片的高度保持一致

问题

配置

docs\.vitepress\theme\style\var.scss文件：

css

// 让首页文章卡片的封面高度保持一致
.tk-post-item-card__cover-img .cover-img {
  cursor: pointer;
  height: 190px;
  -o-object-fit: cover;
  object-fit: cover;
  transition: transform .4s linear;
  width: 100%;
}

效果

✅卡片风格得跟随系统色变换、侧边滚动条颜色

配置（这些文件）

✅添加首页3个元素

默认没得

配置

效果

✅配置twikoo评论

配置

验证

有时twikoo不见了？？

有时就出现了：。。。

✅配置回到顶部提示、回到评论提示

配置（测试OK）

✅回退使用默认字体

使用了好看的字体后这里的样式就不明显了，回退使用默认字体

有问题后效果：

默认效果：

✅默认必须得折叠起来

还可以的情况

存在的问题

以上配置方式如下：

默认不配置的：

这个情况适用于目录少，目录层级少，目录下子文件少；否则的话，太丑了。。；

配置方法

docs\.vitepress\config.ts

    sidebarOption: {
      // initItems: false, //这条命令注释后，才会让文档和目录的样式保持一致
      collapsed: true, //打开侧边栏自动收缩功能
    },

效果（nice）

✅个人图标数量缺少

当前

配置

效果

✅解决这里宽度不一致问题

通过css实现了

忘记在哪里了哈哈哈哈。。。。

✅把文档风这里切换回去、底部footerinfo精简下

配置

效果

✅左侧滚动条太粗

配置

效果

✅往这里再加一行文章

需求

配置

docs\.vitepress\config.ts

  page: {
    pageSize: 18, //首页 Post 文章列表的分页配置
  },

效果

✅关闭自动在链接后添加.html功能

故障

解决办法

cleanUrls: true,

已解决

2025年7月19日更新。

环境：适用于Teek@1.3.5-2025.6.3

存在问题

底下占的位置太多了；

上面的umami应该改为51la；

配置前代码

docs\.vitepress\ConfigHyde\FooterInfo.ts

// 底部信息配置
import { version } from "vitepress-theme-teek/es/version"; // 导入版本号

export const FooterInfo = {
  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="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://twikoo.js.org/" title="本站评论系统使用 Twikoo" ><img alt="Twikoo" src="https://img.shields.io/badge/Comments-Twikoo-0072F9"></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.ucloud.cn/" title="本站部署服务使用 ucloud"><img alt="ucloud" src="https://img.shields.io/badge/Ucloud-Server?logo=alibabacloud&label=Server&color=%23FF6A00"></a> 

    <a target="_blank" href="https://edgeone.ai/zh" title="本站部署服务使用 EdgeOne"><img alt="EdgeOne" src="https://img.shields.io/badge/EdgeOne-CDN?logo=alibabacloud&label=CDN&color=%23FF6A00"></a>oge
    
    <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=%23FF6A00"></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.6.3`,
  },
  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 id="runtime"></span>(●'◡'●)`,
    `<a href="https://51.la/" target="_blank" style="display:flex;align-items:center;justify-content:center;">本网站由<img src="https://51.la/favicon.ico" style="width:16px;height:16px;" alt="51.LA"> 51.LA 提供数据统计服务</a>`,
    "初闻不知曲中意，再听已是曲中人",
  ],
  copyright: {
    createYear: 2021,
    suffix: "One Blog",
  },
  icpRecord: {
    name: "陇ICP备2023002645号",
    link: "http://beian.miit.gov.cn/",
  },
  // 网络安全备案信息配置
  securityRecord: {
    name: "甘公网安备62102702000211号",
    link: "https://beian.mps.gov.cn/",
  },
  customHtml: ``, // 搭配 ./theme/composables/useRuntime.ts
};

配置后代码

docs\.vitepress\ConfigHyde\FooterInfo.ts

// 底部信息配置
import { version } from "vitepress-theme-teek/es/version"; // 导入版本号

export const FooterInfo = {
  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="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://twikoo.js.org/" title="本站评论系统使用 Twikoo" ><img alt="Twikoo" src="https://img.shields.io/badge/Comments-Twikoo-0072F9"></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.ucloud.cn/" title="本站部署服务使用 ucloud"><img alt="ucloud" src="https://img.shields.io/badge/Ucloud-Server?logo=alibabacloud&label=Server&color=%23FF6A00"></a> 

    <a target="_blank" href="https://edgeone.ai/zh" title="本站部署服务使用 EdgeOne"><img alt="EdgeOne" src="https://img.shields.io/badge/EdgeOne-CDN?logo=alibabacloud&label=CDN&color=%23FF6A00"></a>
    
    <a target="_blank" href="https://51.la/" title="本站统计服务使用 51.LA"><img alt="51.LA" src="https://img.shields.io/badge/51.LA-000000?logo=51.LA&label=Count&color=%23FF6A00"></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.6.3`,
  },
  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 id="runtime"></span>(●'◡'●)`,
    "初闻不知曲中意，再听已是曲中人",
  ],
  copyright: {
    createYear: 2021,
    suffix: "One Blog",
  },
  icpRecord: {
    name: "陇ICP备2023002645号",
    link: "http://beian.miit.gov.cn/",
  },
  // 网络安全备案信息配置
  securityRecord: {
    name: "甘公网安备62102702000211号",
    link: "https://beian.mps.gov.cn/",
  },
  customHtml: ``, // 搭配 ./theme/composables/useRuntime.ts
};

✅配置首页欢迎语

2025年7月20日更新。

环境：适用于Teek@1.3.5-2025.6.3

版权：

次功能来源于《Hyde》模板，感谢大佬贡献的代码。

效果（这个功能不错哦）

配置方法

创建docs\.vitepress\theme\components\InformationCard.vue文件：

<script setup lang="ts">
import { onMounted, ref,h } from 'vue';
import { TkMessage } from "vitepress-theme-teek";

// 天气数据
const weatherData = ref({
  city: '',
  temperature: '',
  type: '',
  date: '',
  week: ''
});

// 获取天气信息的函数
const error = ref(false);
const loading = ref(false); // 控制加载中状态
// 获取天气信息的函数
const getWeatherInfo = async () => {
  loading.value = true; // 开始加载
  try {
    const response = await fetch('https://api.vvhan.com/api/weather');
    const data = await response.json();
    if (data.success) {
      weatherData.value = {
        city: data.city,
        temperature: `${data.data.low}-${data.data.high}`,
        type: data.data.type,
        date: data.data.date,
        week: data.data.week
      };
    } else {
      error.value = true;
      TkMessage.error('获取天气信息失败，请检查网络或者关闭代理'); // 显示错误提示
    }
  } catch (err) {
    console.error('获取天气信息失败', err);
  } finally {
    loading.value = false; // 加载结束
  }
};

// 储存舔狗日记内容
const diaryContent = ref('');

// 获取舔狗日记的函数
const getDiary = async () => {
  try {
    const response = await fetch('https://api.vvhan.com/api/text/dog?type=json');
    const data = await response.json();

    if (data.success) {
      diaryContent.value = data.data.content; // 获取内容
    } else {
      console.error('获取舔狗日记失败:', data.message);
    }
  } catch (fetchError) {
    console.error('获取舔狗日记失败', fetchError);
  }
};

const init = async () => {
  await getWeatherInfo(); // 获取天气信息
  await getDiary(); // 获取舔狗信息
};

// 新增：控制显示选项
const isConfigOpen = ref(false);
const showFPS = ref(true);
const showWeather = ref(true);
const showDate = ref(true);
const showTemperature = ref(true);
const showWeek = ref(true);
// const showgetDiary = ref(true);

// 新增：FPS计算
const fps = ref(0);
let frameCount = 0;
let lastTime = 0;

const updateFPS = (time: DOMHighResTimeStamp) => {
  if (lastTime === 0) {
    lastTime = time;
    requestAnimationFrame(updateFPS);
    return;
  }

  const delta = time - lastTime;
  frameCount += 1;

  if (delta > 1000) {
    fps.value = Math.round((frameCount * 1000) / delta);
    frameCount = 0;
    lastTime = time;
  }

  requestAnimationFrame(updateFPS);
};

onMounted(async () => {
  await init();
  requestAnimationFrame(updateFPS);
});

onMounted(() => {
  getWeatherInfo();
});
</script>

<template>
  <!-- 修改：欢迎卡片，包含天气信息和新功能 -->
  <ElCard class="info-card animate__animated animate__fadeIn welcome-card mobile-card" shadow="hover">
    <div class="welcome-content">
      <!-- 新增：FPS显示 -->
      <div v-if="showFPS" class="fps-display">FPS: {{ fps }}</div>

      <!-- 新增：配置开关 -->
      <El-Switch v-model="isConfigOpen" class="config-switch" active-color="#13ce66" inactive-color="#ff4949"></El-Switch>

      <!-- 配置面板 -->
      <div v-if="isConfigOpen" class="config-panel">
        <ElCheckbox v-model="showFPS">显示 FPS</ElCheckbox>
        <ElCheckbox v-model="showWeather">显示天气</ElCheckbox>
        <ElCheckbox v-model="showDate">显示日期</ElCheckbox>
        <ElCheckbox v-model="showTemperature">显示温度</ElCheckbox>
        <ElCheckbox v-model="showWeek">显示星期</ElCheckbox>
        <!-- <ElCheckbox v-model="showgetDiary">显示舔狗</ElCheckbox> -->
      </div>

      <!-- 欢迎信息 -->
      <template v-else>
        <h2 v-if="!error && weatherData.city" class="greeting">
          欢迎来自
          <span class="highlight">{{ weatherData.city }}</span>
          的小伙伴！🎉🎉🎉
        </h2>
        <div class="info-container">
          <div v-if="showTemperature" class="info-item">
            <i class="el-icon-sunny"></i>
            <span v-if="!error && weatherData.city">
              今日温度：
              <span class="highlight">{{ weatherData.temperature }}</span>
            </span>
          </div>
          <div v-if="showWeather" class="info-item">
            <i class="el-icon-cloudy"></i>
            <span v-if="!error && weatherData.city">
              天气：
              <span class="highlight">{{ weatherData.type }}</span>
            </span>
          </div>
          <div v-if="showDate" class="info-item">
            <i class="el-icon-date"></i>
            <span v-if="!error && weatherData.city">
              日期：
              <span class="highlight">{{ weatherData.date }}</span>
            </span>
          </div>
          <div v-if="showWeek" class="info-item">
            <i class="el-icon-calendar"></i>
            <span v-if="!error && weatherData.city">
              星期：
              <span class="highlight">{{ weatherData.week }}</span>
            </span>
          </div>
          <!-- <div v-if="showgetDiary" class="info-item">
            <i class="el-icon-calendar"></i>
            <h1 class="vertical-title">舔狗日记：</h1>
            <p v-if="diaryContent" class="diary-content">{{ diaryContent }}</p>
            <p v-else class="diary-content">加载中...</p>
          </div> -->
        </div>
      </template>
    </div>
  </ElCard>
</template>

<style lang="scss" scoped>
.welcome-card {
  margin: 4px;
  padding: 1.5rem;
  border-radius: 12px;
  text-align: center;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  background: var(--day-bg);
  color: var(--day-text);
  box-shadow: 0 4px 6px var(--day-shadow);
  transform: translateY(0);
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0); /* 完全透明的边框 */

  &.night-mode {
    background: var(--night-bg);
    color: var(--night-text);
    box-shadow: 0 4px 6px var(--night-shadow);

    &:hover {
      box-shadow: 0 10px 20px var(--night-shadow);
    }

    .highlight {
      color: var(--vp-c-brand-1);
    }
  }

  .welcome-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .greeting {
    font-size: 1.5rem;
    margin: 0;
    font-weight: bold;
  }

  .highlight {
    color: var(--vp-c-brand-1);
  }

  .info-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }

  .info-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    i {
      font-size: 1.2rem;
    }
  }

  .fps-display {
    font-size: 0.9rem;
    font-weight: bold;
  }

  .config-switch {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
  }

  .config-panel {
    display: flex;
    flex-wrap: wrap; /* 自动换行 */
    justify-content: center; /* 水平居中对齐 */
    align-items: center; /* 垂直居中对齐 */
  }

  .config-panel .el-checkbox {
    width: 15%; /* 每个元素占据 15% 宽度，PC保持1列 */
    margin: 5px; /* 元素间距 */
    display: flex;
    justify-content: center; /* 文字与复选框居中 */
    align-items: center;
  }

  @media (max-width: 768px) {
    .config-panel .el-checkbox {
      width: 40%; /* 如果屏幕更小，双列显示 */
    }
  }
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271

编辑docs\.vitepress\theme\components\TeekLayoutProvider.vue文件：

import InformationCard from "./InformationCard.vue";  //导入信息卡片和舔狗日记组件

    <template #teek-home-banner-after>
      <InformationCard />
    </template>

配置完，重新运行就可以看到现象了。

✅配置关于我-v1

2025年7月20日更新。

环境：适用于Teek@1.3.5-2025.6.3

版权：

次功能来源于《Hyde》模板，感谢大佬贡献的代码。

效果

配置方法

创建docs\.vitepress\theme\components\404.vue文件

<script setup lang="ts">
import { withBase, useRouter } from "vitepress";

const router = useRouter();

const ns = "error-page";
</script>

<template>
  <div :class="[ns, 'flx-center']">
    <img :src="withBase('/404.png')" :class="`${ns}__img`" alt="404" />
    <div :class="[`${ns}__detail`, 'flx-column']">
      <h2>404</h2>
      <h4>抱歉，您访问的页面不存在~🤷‍♂️🤷‍♀️</h4>
      <button @click="router.go('/')">返回首页</button>
    </div>
  </div>
</template>

<style scoped lang="scss">
$namespace: error-page;

.#{$namespace} {
  width: 100%;
  height: calc(100vh - var(--vp-nav-height));
  gap: 120px;

  &__detail {
    h2 {
      font-size: 60px;
      color: var(--vp-c-text-1);
      line-height: 1;
    }
    h4 {
      margin: 10px 0 20px 0;
      font-size: 19px;
      font-weight: normal;
      color: var(--vp-c-text-2);
    }

    button {
      color: #ffffff;
      background-color: #395ae3;
      box-shadow: 0 2px 0 rgba(5, 145, 255, 0.1);
      font-size: 14px;
      width: 100px;
      height: 32px;
      padding: 4px 15px;
      border-radius: 6px;
      outline: none;
      position: relative;
      display: inline-block;
      font-weight: 400;
      white-space: nowrap;
      text-align: center;
      background-image: none;
      border: 1px solid transparent;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      user-select: none;
      touch-action: manipulation;
      line-height: 1.5714285714285714;

      &:hover {
        background-color: #5a79f4;
      }
    }
  }

  @media (max-width: 768px) {
    flex-direction: column;
    gap: 60px;
    transform: translateY(-10%);
    &__detail {
      align-items: center;
    }
  }
}
</style>

创建docs\90.关于\10.关于我.md文件

---
title: 关于我
date: 2025-01-03 11:19:48
permalink: /about-me
layout: page # 必须指定为page
categories:
  - 更多
tags:
  - 关于我
author:
  name: One
  link: https://wiki.onedayxyy.cn/
sidebar: false
article: false
comment: false
---

<script setup>
import About from '../.vitepress/theme/components/About.vue'
</script>

<About />

运行后，观察效果。

✅配置关于我-v2

2025年7月25日更新。

比前一版更加好看些了。

环境：适用于Teek@1.3.5-2025.6.3

版权：

次功能来源于《Hyde》模板，感谢大佬贡献的代码。

效果

配置方法

创建docs\.vitepress\theme\components\404.vue文件

<template>
  <div class="about-container">
    <!-- Profile Section -->
    <ProfileSection :is-visible="aboutHeroVisible" />

    <!-- Skills Section -->
    <SkillsSection :is-visible="skillsSectionVisible" :is-mobile="isMobile" />

    <!-- Projects Section -->
    <div ref="ossSectionRef">
      <ProjectsSection :is-visible="ossSectionVisible" :is-mobile="isMobile" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useIntersectionObserver } from './About/useIntersectionObserver';
import { useMobileDetection } from './About/useMobileDetection';
import ProfileSection from './About/ProfileSection.vue';
import SkillsSection from './About/SkillsSection.vue';
import ProjectsSection from './About/ProjectsSection.vue';

// 移动端检测
const { isMobile } = useMobileDetection();

// 首屏元素延迟动画
const aboutHeroVisible = ref(false);
const skillsSectionVisible = ref(false);

// Projects section 观察器
const { isVisible: ossSectionVisible, targetRef: ossSectionRef } = useIntersectionObserver(0.2);

// 首屏动画优化
onMounted(() => {
  // 使用 requestAnimationFrame 优化动画触发时机
  requestAnimationFrame(() => {
    aboutHeroVisible.value = true;
    skillsSectionVisible.value = true;
  });
});
</script>

<style scoped>
.about-container {
  width: 100%;
  min-height: 100vh;
}

/* 全局动画优化 */
.about-container * {
  will-change: auto;
}

/* 减少重绘和回流 */
.about-container img {
  transform: translateZ(0);
}

/* 优化滚动性能 */
@media (prefers-reduced-motion: no-preference) {
  .about-container {
    scroll-behavior: smooth;
  }
}

/* 针对低性能设备的优化 */
@media (prefers-reduced-motion: reduce) {
  .about-container * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
</style>

拷贝仓库里About目录到如下docs\.vitepress\theme\components\路径：

创建docs\90.关于\10.关于我.md文件

---
title: 关于我
date: 2025-01-03 11:19:48
permalink: /about-me
layout: page # 必须指定为page
categories:
  - 更多
tags:
  - 关于我
author:
  name: One
  link: https://wiki.onedayxyy.cn/
sidebar: false
article: false
comment: false
---

<script setup>
import About from '../.vitepress/theme/components/About.vue'
</script>

<About />

运行后，观察效果。

✅配置侧边栏展开/折叠功能

2025年8月12日更新。

效果

配置

编辑‎docs/.vitepress/config.ts

sidebarTrigger: true,

结束。

✅关闭顶部提示和底部提示

2025年8月12日更新。

效果

配置

原文：文章配置 | vitepress-theme-teek

在对应md文档的formatter里配置：

bash

articleTopTip: false # 文章顶部提示
articleBottomTip: false # 文章底部提示

结束。

✅配置新版代码折叠遮罩层功能

2025年8月12日更新。

效果

配置

原文：

全局配置 | vitepress-theme-teek

编辑‎docs/.vitepress/config.ts

  // 新版代码块配置
  codeBlock: {
    disabled: false, // 是否禁用新版代码块
    collapseHeight: 700, // 超出高度后自动折叠，设置 true 则默认折叠，false 则默认不折叠
    overlay: true, // 代码块底部是否显示展开/折叠遮罩层
    overlayHeight: 400, // 当出现遮罩层时，指定代码块显示高度，当 overlay 为 true 时生效
    copiedDone: (TkMessage) => TkMessage.success("复制成功！"),
  },

结束。

✅配置首页特性页卡悬停效果

2025年8月14日更新。

效果

视频链接：

版权

来源《首页特性悬停效果》文章。

环境：适用于Teek@1.4.0-2025.8.12。

配置

给首页特性VPFeature加一个hover效果，添加如下代码即可

css

/* .vitepress/theme/style/var.css */

/* VPFeatures 页卡悬浮效果 */
.VPFeatures .items .item {
  transition: transform 0.3s;
}

.VPFeatures .items .item:hover {
  transform: translateY(-5px);
}

配置完，运行验证即可。

结束。

✅配置新版返回顶部和评论区配置

2025年8月14日更新。

版权

原文：《backTop》

环境：适用于Teek@1.4.0-2025.8.12。

配置

编辑docs\.vitepress\config.ts文件：

  //右下角回到顶部配置。
  backTop: {
    enabled: true, // 是否启动回到顶部功能
    content: "progress", // 回到顶部按钮的显示内容，可选配置 progress | icon
    done: TkMessage => TkMessage.success("返回顶部成功"), // 回到顶部后的回调
  },

  //右下角滚动滚动到评论区配置。
  toComment: {
    enabled: true, // 是否启动滚动到评论区功能
    done: TkMessage => TkMessage.success("已抵达评论区"), // 滚动到评论区后的回调
  },

结束。

✅批量给Teek博客所有文章添加封面

2025年8月18日测试。

版权

环境：在Teek@1.4.2-2025.8.17版本测试成功。（通用方法）

需求

批量给Teek博客所有文章添加封面

配置

docs\.vitepress\config.ts配置：

  vitePlugins: {
    sidebarOption: {
      // initItems: false, //这条命令注释后，才会让文档和目录的样式保持一致
      collapsed: true, //打开侧边栏自动收缩功能
      ignoreList: [/^_.*$/],
    },

    autoFrontmatter: true, // 自动生成 frontmatter
    // permalinkOption: {
    //   notFoundDelayLoad: 1000, // 1秒后加载
    // },

    // 自动格式formatter插件 添加文章封面图
    autoFrontmatterOption: {
      // exclude: { title: true, date: true }, // 排除自动生成字段
      transform: frontmatter => {
       // 如果文件本身存在了 coverImg，则不生成
       if (frontmatter.coverImg) return;
        
       const list = CoverImgList;
        
       const coverImg = list[Math.floor(Math.random() * list.length)];
        
       const transformResult = { ...frontmatter, coverImg };
        
       return Object.keys(transformResult).length ? transformResult : undefined;
      },
    }, 
  },

测试效果（运行项目后，完美。）

结束。

✅批量替换Teek博客所有文章封面

2025年8月18日测试。

版权

环境：在Teek@1.4.2-2025.8.17版本测试成功。（通用方法）

需求

bash

docs目录下都是一些由markdown文件组成的，可能是目录或者是markdown文件。

我现在想把这个目录下的所有markdown文件的formatter里包含 "coverImg:" 这一行的内容给删除掉，请给出一个完整的方法（python脚本都行。）

一个markdown文件具体formatter示例如下：
---
title: Teek简介
date: 2025-03-09 07:55:02
permalink: /teek
categories:
  - 博客搭建
tags:
  - Teek
sticky: 1
top: true
description: "全网最美博客-Teek(知识库&博客二合一)\U0001F61C"
titleTag: 推荐
---

我的项目是在vscode里存放，或者利用vscode的批量替换也行，请给出具体操作方法。

继续分析：

bash

Teek能实现 “批量操作front matter工具”吗？

需求背景：
现在我从网上剽了10张好看的妹纸图片，想让这些好看的妹纸做我的博客所有文章的封面，但是昨天已经用frontmatter 自动生成了壁纸，此时该怎么办呢？（感觉简便的方法  就是 只能利用autofrontmatter先删除coverImg信息，再重新生成coverImg信息）

配置

打开 VS Code 的全局搜索（Ctrl+Shift+F）
在搜索框输入：
```
^coverImg:.*$\n
```
1
点击正则表达式按钮（.* 图标）和匹配行首按钮（^ 图标）
替换框留空
点击「全部替换」

自己测试过程：

可以看到，已经被替换了，nice。

此时，再利用teek的auto formatter自动注入封面，就很nice

docs\.vitepress\config.ts配置：

  vitePlugins: {
    sidebarOption: {
      // initItems: false, //这条命令注释后，才会让文档和目录的样式保持一致
      collapsed: true, //打开侧边栏自动收缩功能
      ignoreList: [/^_.*$/],
    },

    autoFrontmatter: true, // 自动生成 frontmatter
    // permalinkOption: {
    //   notFoundDelayLoad: 1000, // 1秒后加载
    // },

    // 自动格式formatter插件 添加文章封面图
    autoFrontmatterOption: {
      // exclude: { title: true, date: true }, // 排除自动生成字段
      transform: frontmatter => {
       // 如果文件本身存在了 coverImg，则不生成
       if (frontmatter.coverImg) return;
        
       const list = CoverImgList;
        
       const coverImg = list[Math.floor(Math.random() * list.length)];
        
       const transformResult = { ...frontmatter, coverImg };
        
       return Object.keys(transformResult).length ? transformResult : undefined;
      },
    }, 
  },

运行测试（完美）

结束。

✅侧边栏样式美化

2025年8月17日更新。

版权

《https://vitepress.yiov.top/》大佬的《[侧边栏样式美化](https://vitepress.yiov.top/style.html#侧边栏样式美化)》文章，感谢大佬的开源分享。💖💖💖

环境：在Teek@1.4.2-2025.8.17测试成功。

背景

默认的侧边栏不太容易区分到底是目录还是文件，我们可以进行美化。

警告

本次需要提前下载好的2个svg下载地址如下：侧边栏美化所需svg

然后将下载好的svg压缩包解压后，将svg目录移动到docs\public路径下。

配置

（1）在 .vitepress/theme/style 目录新建一个 sidebarIcon.css 文件

.
├─ docs
│  ├─ .vitepress
│  │  └─ config.mts
│  │  └─ theme
│  │     └─ style
│  │        └─ index.css
│  │        └─ sidebarIcon.css
│  └─ index.md
└─ node_modules

其内容是：

css

/* .vitepress/theme/style/sidebarIcon.css */

/* 侧边栏缩放 */
.group:has([role='button']) .VPSidebarItem.level-0 .items {
  padding-left: 15px !important;
  border-left: 1px solid var(--vp-c-divider);
  border-radius: 2px;
  transition: background-color 0.25s;
}

/* 侧边栏图标 */
/* 选中所有 .VPSidebarItem 元素，排除带有 .is-link 类的 */
#VPSidebarNav .VPSidebarItem:not(.is-link).collapsed >.item {
    display: inline-flex;
    align-items: center;  /* 垂直居中对齐图标和文本 */
}

/* 为所有不带 .is-link 的 .VPSidebarItem 折叠状态添加图标 */
#VPSidebarNav .VPSidebarItem:not(.is-link).collapsed >.item::before {
    content: '';
    background-image: url('/svg/document.svg'); /* 设置图标路径 */
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;  /* 确保图标与文本垂直居中 */
    background-size: cover;
    margin-right: 4px;  /* 给图标和文本之间增加间距 */
}

#VPSidebarNav .VPSidebarItem:not(.is-link) >.item {
    display: inline-flex;
    align-items: center;  /* 垂直居中对齐图标和文本 */
}

/* 为所有不带 .is-link 的 .VPSidebarItem 非折叠状态添加图标 */
#VPSidebarNav .VPSidebarItem:not(.is-link) >.item::before {
    content: '';
    background-image: url('/svg/document-open.svg'); /* 设置图标路径 */
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;  /* 确保图标与文本垂直居中 */
    background-size: cover;
    margin-right: 4px;  /* 给图标和文本之间增加间距 */
}

/* 选中带有 .is-link 的 .VPSidebarItem 的直接子元素 .item */
#VPSidebarNav .VPSidebarItem.is-link > .item {
    display: inline-flex;
    align-items: center;  /* 垂直居中图标和文字 */
}

/* 为选中的 .item 添加图标 */
#VPSidebarNav .VPSidebarItem.is-link > .item::before {
    content: '';
    background-image: url('/svg/file.svg'); /* 图标路径 */
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    background-size: cover;
    margin-right: 4px;  /* 图标与文字间距 */
}

（2）然后在 index.css 中引入生效

/* .vitepress/theme/style/index.css */
@import './sidebarIcon.css';

（3）验证效果（完美）

结束。

配置过程 ​

配置过程 ​

目录 ​

汇总 ​

✅删除 反馈交流 ​

✅修复报错 ​

✅配置默认风格为 博客卡片风格 ​

✅修改标签页 首页 博客标题 ​

✅拷贝readme 和license文件过来 ​

✅个人头像配置 ​

✅更换为自己喜欢的壁纸 ​

✅关闭彩虹功能 ​

✅首页尺寸得往大调整下 ​

✅友情链接风格得调整下 ​

✅自动打开浏览器功能 ​

✅壁纸缺少箭头、由远及近效果、导航栏毛玻璃 ​

✅多文件内存限制 ​

✅500KB报错 ​

✅缺少公告、标签页、问候语、顶部滚动条 ​

✅配置不算子统计 ​

✅缺少底部51数据、footerinfo数据 ​

✅关闭默认摘要功能 ​

✅关闭首页卡片作者 ​

✅配置自动注入封面 ​

✅让文章卡片的高度保持一致 ​

✅卡片风格得跟随系统色变换、侧边滚动条颜色 ​

✅添加首页3个元素 ​

✅配置twikoo评论 ​

✅配置回到顶部提示、回到评论提示 ​

✅回退使用默认字体 ​

✅默认必须得折叠起来 ​

✅个人图标数量缺少 ​

✅解决这里宽度不一致问题 ​

✅把文档风这里切换回去、底部footerinfo精简下 ​

✅左侧滚动条太粗 ​

✅往这里再加一行文章 ​

✅关闭自动在链接后添加.html功能 ​

✅优化footer ​

✅配置首页欢迎语 ​

✅配置关于我-v1 ​

✅配置关于我-v2 ​

✅配置侧边栏展开/折叠 功能 ​

✅关闭顶部提示和底部提示 ​

✅配置 新版代码折叠遮罩层功能 ​

✅配置 首页特性页卡悬停效果 ​

✅配置新版返回顶部和评论区配置 ​

✅批量给Teek博客所有文章添加封面 ​

✅批量替换Teek博客所有文章封面 ​

✅侧边栏样式美化 ​

配置过程

配置过程

目录

汇总

✅删除反馈交流

✅修复报错

✅配置默认风格为博客卡片风格

✅修改标签页首页博客标题

✅拷贝readme 和license文件过来

✅个人头像配置

✅更换为自己喜欢的壁纸

✅关闭彩虹功能

✅首页尺寸得往大调整下

✅友情链接风格得调整下

✅自动打开浏览器功能

✅壁纸缺少箭头、由远及近效果、导航栏毛玻璃

✅多文件内存限制

✅500KB报错

✅缺少公告、标签页、问候语、顶部滚动条

✅配置不算子统计

✅缺少底部51数据、footerinfo数据

✅关闭默认摘要功能

✅关闭首页卡片作者

✅配置自动注入封面

✅让文章卡片的高度保持一致

✅卡片风格得跟随系统色变换、侧边滚动条颜色

✅添加首页3个元素

✅配置twikoo评论

✅配置回到顶部提示、回到评论提示

✅回退使用默认字体

✅默认必须得折叠起来

✅个人图标数量缺少

✅解决这里宽度不一致问题

✅把文档风这里切换回去、底部footerinfo精简下

✅左侧滚动条太粗

✅往这里再加一行文章

✅关闭自动在链接后添加.html功能

✅优化footer

✅配置首页欢迎语

✅配置关于我-v1

✅配置关于我-v2

✅配置侧边栏展开/折叠功能

✅关闭顶部提示和底部提示

✅配置新版代码折叠遮罩层功能

✅配置首页特性页卡悬停效果

✅配置新版返回顶部和评论区配置

✅批量给Teek博客所有文章添加封面

✅批量替换Teek博客所有文章封面

✅侧边栏样式美化