修改为默认博客风
修改为默认博客风
环境
Teek@1.5.0-2025.9.23
自己的开源库《vitepress-theme-teek-one》 --(克隆自 作者Teeker的文档风开源库《vitepress-theme-teek-docs-template》)
2025年9月24日测试
背景
作者提供的开源库默认是文档风,如何设置它为博客风呢?

这里面干净的空空如也哇……🤣

配置
说明
以下配置是在 群主 文档风开源库《vitepress-theme-teek-docs-template》下,将文档风修改为博客风的一些配置,请阅读。
1、删除原有的.vitepress目录下所有内容

2、拷贝开发库里的内容过来
拷贝开发库里的内容过来,放到如下docs\.vitepress目录下:

3、配置一些地方
配置如下6个文件:
docs\.vitepress\config.ts报错
docs\.vitepress\theme\config\teekConfig.ts报错
docs\.vitepress\teekConfig.ts报错
docs\.vitepress\theme\index.ts报错
docs\.vitepress\theme\composables\useRibbon.ts报错
docs\.vitepress\theme\components\ConfigSwitch.vue报错01处报错:

按注释修改:
编辑docs\.vitepress\config.ts文件:
import { version } from "vitepress-theme-teek/es/version";
02处报错:

编辑docs\.vitepress\theme\config\teekConfig.ts文件:
将@teek修改为vitepress-theme-teek
import type { TeekConfig } from "vitepress-theme-teek/config";
03处报错:

编辑docs\.vitepress\teekConfig.ts文件:
按注释提示修改:

04处报错
再次运行测试:
报其它的错误:

编辑docs\.vitepress\theme\index.ts文件:
按注释提示修改:

修改好了:

再次测试:
还是报错:(为啥呢,都已经使用在线版本了啊……)


和之前私有库做个对比?

应该就是这里的问题:
https://vp.teek.top/guide/styles-plus.html#样式增强

我先引入这些scss:

再次运行,观察效果:
报其它错了哦:

2处报错:

05处报错

编辑docs\.vitepress\theme\composables\useRibbon.ts文件:
之前私有库配置:

修复拉:
import { computed, type MaybeRef, toValue } from "vue";
import { isClient, useScopeDispose } from "vitepress-theme-teek";
06处报错

编辑docs\.vitepress\theme\components\ConfigSwitch.vue文件:
问题原因:

修改后:
import {
TkThemeEnhanceBaseTemplate as BaseTemplate,
} from "vitepress-theme-teek";
import { useClipboard, useStorage } from "vitepress-theme-teek";
以上全部修改完成。
4、验证

扩展(测试过程,可忽略)
拷贝本地的teekConfig.template.ts文件(测试步骤,可忽略)
对原来的teekConfig.ts文件做好备份(teekConfig.ts.bak)
拷贝teekConfig.template.ts文件到teekConfig.ts

配置完后,再次运行:
依旧没博客风,但是多了一个公告弹窗栏:


只能拷贝作者的Teek开发库里相关的代码了



🚩开始切换
🚩删除原有的.vitepress目录下所有内容

拷贝开发库里的内容过来

🚩处理报错过程
直接运行后报错:

01处报错:

按注释修改:
import { version } from "vitepress-theme-teek/es/version";
02处报错:

将@teek修改为vitepress-theme-teek
import type { TeekConfig } from "vitepress-theme-teek/config";
03处报错:

按注释提示修改:

04处报错
再次运行测试:
报其它的错误:

按注释提示修改:

修改好了:

再次测试:
还是报错:(为啥呢,都已经使用在线版本了啊……)


和之前私有库做个对比?

应该就是这里的问题:
https://vp.teek.top/guide/styles-plus.html#样式增强

我先引入这些scss:

再次运行,观察效果:
报其它错了哦:

2处报错:

05处报错

之前私有库配置:

修复拉:
import { computed, type MaybeRef, toValue } from "vue";
import { isClient, useScopeDispose } from "vitepress-theme-teek";
06处报错

问题原因:

修改后:
import {
TkThemeEnhanceBaseTemplate as BaseTemplate,
} from "vitepress-theme-teek";
import { useClipboard, useStorage } from "vitepress-theme-teek";
再次验证:OK啦。😜

结束。