One

主题

2025-06-262025-07-02指南
2894
14.1m
Get...

Teek原版优化记录 ​

Teek原版优化记录 ​

目录 ​

[toc]

汇总 ​

关闭看板娘、音乐播放器、背景彩带、404组件、下拉猫；

汇总

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：
 demo：https://onedayxyy.cn/
 简约模板：https://gitee.com/onlyonexl/vitepress-theme-teek-one-public-simple  （推荐）
 花里胡哨模板：https://gitee.com/onlyonexl/vitepress-theme-teek-one-public
Hyde：
 demo：https://teek.seasir.top/
 模板：https://gitee.com/SeasirHyde/teek-hyde
-----------------------------------------------------------
One demo： https://wiki.onedayxyy.cn/ （One模板增强版）（图床加了cdn，网站没加cdn） （自己个人数据最新记录）
One demo 简约版： https://onedayxyy.cn/  （持续更新）  （主站 开启了cdn） （模板数据）

Hyde demo： https://hyde.onedayxyy.cn/ （Hyde模板增强版）
teek demo： https://teek.onedayxyy.cn/ （原作者简约版）
-----------------------------------------------------------

个人仓库：
vitepress-theme-teek-one-private #增强版
vitepress-theme-teek-one-public-simple #简约版
-----------------------------------------------------------
#主站测试版推送
rsync.exe -avPzruh --delete --port 8730 --password-file=/cygdrive/d/vitepress-theme-teek-one-private/shell/password.txt /cygdrive/d/vitepress-theme-teek-one-public-simple/docs/.vitepress/dist root@106.75.214.199::cmi-vitepress/


#提交数据
cd /d/vitepress-theme-teek-one-public-simple
git status
git pull

git add -A
git commit -m"update data"
git push

git status

Hyde模板存在bug ​

（导致自己最新One增加模板也存在这个问题）,因为自己这个模板也是基于hyde模板做的；

本地测试没问题，但是网站如果使用阿里云cdn就会出现以下问题：

image-20250627043423256

image-20250627043429090

重大版本记录 ​

（1）One demo 简约版： https://onedayxyy.cn/ （持续更新） （主站 开启了cdn） （模板数据）

gitee仓库

最近在持续更新这个模板；

image-20250627044100436

bash
#v1-2025.6.27-最新版本-测试无bug
$ git log
commit d99608624bf2814bab8e61e590b1972e459e912e (HEAD -> master, origin/master)
Author: hg_it_nuc <2675263825@qq.com>
Date:   Thu Jun 26 23:27:12 2025 +0800

    first commit

（2）One增加模板-私有库 （包含个人笔记最新数据）

基于hyde模板（使用阿里云cdn后，存在bug）

已停止更新数据；

最新demo 在https://wiki.onedayxyy.cn/ （One模板增强版）（图床加了cdn，网站没加cdn） （自己个人数据最新记录）

主仓库：cnb，同时推送到gitee；

image-20250627043836858

（3）2个模板：

image-20250627043705276

配置过程 ​

✅删除 反馈交流 ​

  • 默认

image-20250625192319521

  • 配置方法

注释次部分代码：

image-20250625192422636

  • 效果（OK）

image-20250625192443206

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

重新运行下就好了！！！

image-20250625192649963

✅修复报错 ​

  • 默认是报错的

image-20250625214607555

  • 修复后

image-20250625214712755

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

  • 当前

默认是文档风格

image-20250625193021810

  • 配置方法

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

ts
// 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);

image-20250625215722329

  • 验证（OK的）

image-20250625215807386

image-20250625215816142

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

  • 默认

image-20250625215911679

  • 配置

image-20250626040733250

image-20250625221207185

image-20250625221231176

  • 配置后

image-20250625221310794

✅拷贝readme 和license文件过来 ​

  • 默认是没的

image-20250626041751538.png

  • 拷贝过来

image-20250626042227817

  • 效果

image-20250626042243472

✅个人头像配置 ​

  • 当前

image-20250625221605223

  • 配置

编辑前：

image-20250626042456409

记得把img目录拷贝过来：

image-20250626042552176

编辑后：

image-20250626042622879

  • 效果

image-20250626042648501

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

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

  • 配置前

image-20250626043110958

配置后：

image-20250626043352894

✅关闭彩虹功能 ​

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

  • 默认

image-20250626043527067

  • 主要是这个文件

image-20250626044117530

  • 配置

image-20250626045557823

  • 效果

image-20250626045527984

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

image-20250626044814790

  • 配置

  • 效果

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

image-20250626044838419

  • 配置方法

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

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://onedayxyy.cn/images/POETIZE-logo.jpg",
        name: "POETIZE",
        desc: "最美博客",
        link: "https://poetize.cn/",
      },
      {
        avatar: "https://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: "https://zhouyu2156.github.io/favicon.png",
        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文件：

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）

✅自动打开浏览器功能 ​

  • 配置（测试OK）

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

image-20250626044922463

  • 配置

箭头配置：

image-20250626121930123

image-20250626121955557

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

image-20250626122021341

壁纸配置：

image-20250626122109836

  • 效果

image-20250626122038924

✅多文件内存限制 ​

已配置：

image-20250626122753257

✅500KB报错 ​

  • 报错现象

image-20250626122430358

  • 解决办法（已配置）

image-20250626123031777

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

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

image-20250626122633596

  • 配置

image-20250626124328392

image-20250626124354764

image-20250626124414464

  • 效果（已实现）

image-20250626124459105

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

image-20250626045109245

  • 配置

  • 效果

✅关闭默认摘要功能 ​

  • 默认是有摘要的

  • 配置

OK。

✅关闭首页卡片作者 ​

  • 配置

✅配置自动注入封面 ​

  • 配置

docs\.vitepress\config.ts文件：

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://onedayxyy.cn/images/1.webp",
        "https://onedayxyy.cn/images/2.webp",
        "https://onedayxyy.cn/images/3.webp",
        "https://onedayxyy.cn/images/4.webp",
        "https://onedayxyy.cn/images/5.webp",
        "https://onedayxyy.cn/images/6.webp",
        "https://onedayxyy.cn/images/7.webp",
        "https://onedayxyy.cn/images/8.webp",
        "https://onedayxyy.cn/images/9.webp",
        "https://onedayxyy.cn/images/10.webp",
        "https://onedayxyy.cn/images/11.webp",
        "https://onedayxyy.cn/images/12.webp",
        "https://onedayxyy.cn/images/13.webp",
        "https://onedayxyy.cn/images/14.webp",
        "https://onedayxyy.cn/images/15.webp",
        "https://onedayxyy.cn/images/16.webp",
        "https://onedayxyy.cn/images/17.webp",
        "https://onedayxyy.cn/images/18.webp",
        "https://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;
      },
    },
  },

image-20250626181739850

  • 效果

image-20250626181801332

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

  • 问题

image-20250626181910913

  • 配置

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%;
}

image-20250626182329611

  • 效果

image-20250626182252613

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

image-20250626045004878

  • 配置（这些文件）

image-20250626185053672

✅添加首页3个元素 ​

  • 默认没得

image-20250626185222275

  • 配置

image-20250626185335259

  • 效果

image-20250626185321944

✅配置twikoo评论 ​

  • 配置

image-20250627044554330

image-20250627045233354

image-20250627045253536

  • 验证

有时twikoo不见了？？

image-20250627045536669

有时就出现了：。。。

image-20250627045556944

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

  • 配置（测试OK）

image-20250627045735266

存在问题 ​

个人图标数量缺少 ​

  • 当前

  • 配置

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

image-20250627050013962

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

image-20250627050105436

左侧滚动条太粗 ​

image-20250627050326955

解决Hyde模板存在的bug ​

经测试，发现是head 代码产生的bug；。。。。。

使用了好看的字体后 这里的样式就不明显了 ​

有问题后效果：

image-20250627061000713

默认效果：

image-20250627061128764

优化代码 ​

优化性能 ​

  • 把banner壁纸替换为在线url
最近更新