📋 背景
相信使用 VitePress
的小伙伴们知道,VitePress
默认主题适合搭建文档站,不适合搭建博客站,但是 VitePress
提供了大量的插槽支持拓展或者覆盖其内置的主题,于是我在默认主题的基础上进行拓展:vitepress-theme-teek 诞生了🎉。
我第一次搭建博客使用 VuePress
的主题 Vdoing
,如果用过 Vdoing
搭建的小伙伴可能熟悉我的网站 Young Kbt,然后一直用到了现在,此时我的博客已经有了很多的文档,但是 VuePress
面对大量的文档已经显得力不从心,本地启动需要花费很长时间才能成功,于是我把目光移到了 VitePress
。
但是 VitePress
主题较于 VuePress
主题太少了🥹,很多的都是在个人项目里定制开发,并没有抽离出来(如一个 NPM 包),而已有的主题不符合我的使用习惯,毕竟用了 Vdoing
的很多便捷功能(PS: Vdoing
真好用),所以一直等待着平替品。
2025 年初我打算给一个项目 Hd Security
写使用文档,于是打算尝试用 VitePress
来搭建,在搭建的时候竟然发现 VitePress
默认是基于文档路径来当作 URL
访问,而不是像 VuePress
可以单独给文章设置一个自定义永久链接来访问,这就难受了🙂。
于是我打算实现这个 Permalink
永久链接功能,慢慢开始阅读 VitePress
源码、一些开源的 VitePress
主题源码,寻找灵感,慢慢事情就不对劲了🤔,我了解了 VitePress
的许多拓展用法,然后动了坏心思:实现一个类似于 Vdoing
的 VitePress
主题,利用 VitePress
即时启动、闪电般的热更新特性解决 VuePress 启动/构建慢的问题,于是 Teek 诞生了🎉。
Teek 一开始是照着 Vdoing
原型开发,毕竟没有大量时间从零设计。后来慢慢实现了 Vdoing
大部分功能,原本打算就此收手,然而 Vdoing
群里的 2 个小伙伴尝试使用了初版 Teek,并给予了我极大的鼓励和支持。他们边使用边提大量需求(照着其他开源项目的功能使劲提 😭),我想着正好熟悉下前端开发,于是不断完善 Teek,重构架构、规范代码和版本、编写使用文档,最后就是大家现在看到的 Teek。
在此感谢 Teek
参考的优质 VitePress
、VuePress
主题和博客
vuepress-theme-vdoing、粥里有勺糖、VitePress 快速上手中文教程、友人A、Lumen、Nólëbase 集成。
📖 介绍
Teek 是一个 轻量、简洁高效、灵活配置,易于扩展 的 VitePress 主题 ✨,可以轻松打造属于你自己的知识管理平台,它有如下特性:
知识管理
包含三种典型的知识管理形态:结构化、碎片化、体系化。轻松打造属于你自己的知识管理平台。
结构化 & 体系化
自动生成侧边栏、目录页、索引页、面包屑等,轻松构建一个结构化知识库。
碎片化 & 个性化
博客功能提供快速构建知识的碎片化形态,并提供大量个性化的主题配置。
文档风 & 博客风
支持通过配置随意切换文档风和博客风,支持个人博客、文档站、知识库等场景。
链接访问:文档地址 | Github 仓库 (欢迎点个 star✨~)
Teek 的官方文档站默认采用 VitePress 原始风格,当然您可以点击右上角的主题面板,切换 Demo 来查看效果:
下面先给出用 Teek 实现的效果图,再用文字介绍 Teek 的 Feature
。
Banner 大图
Banner 小图
全背景图
列表风格
卡片风格
碎片化文章页
登录页
风险链接提示页
目录页
归档页
文章清单页
📸 博客案例
Teek 文档站的内容仅仅基于 Teek 本身功能构建的,并没有添加一些第三方美化的插件、功能,您可以访问下面使用 Teek 搭建的博客地址(一开始跟随 Teek 的两位小伙伴的博客),这些博客添加了很多美化功能,也许更符合您的爱好。
🎉 功能概览
相较于 VitePress
默认主题,Teek 主要实现了博客风格的功能,这些功能也兼容文档风格。
全局
- 侧边栏自动生成,根据目录自动生成侧边栏,无需手动配置
- 提供目录页,根据
Markdown
文件路径自动生成目录 - 自动生成
frontmatter
,并且支持拓展frontmatter
格式 - 自动生成一级标题
- 全站背景图片
Markdown
拓展:居中、居右容器、卡片容器、Demo
容器、TODO
列表、Video
容器- 主题多元化:4 种布局模式、8 种主题风格选择,且支持自定义扩展新的主题风格
- ...
首页
Banner
功能:提供 3 种风格选择:局部背景色、局部图片、全屏图片,提供打印个性签名、切换个性签名选择,提供feature
功能- 文章列表:支持切换列表和卡片模式,展示文章标题、封面图、作者、创建时间、更新时间、标签、分类,且支持重写文章列表
- 博客卡片栏:博主信息栏、精选文章栏、分类栏、标签栏、友情链接栏、站点信息栏
- 全屏壁纸模式:只保留
Banner
背景图片或全站背景图片,且禁止滚动、打开开发者工具、右键功能 - 页脚:展示社交图标、版权信息、备案信息、自定义信息
- ...
文章页
- 文章信息:展示面包屑、作者、创建时间、更新时间、标签、分类、字数、阅读时长
- 评论区:提供
Giscus
、Twikoo
、Waline
、Artalk
四种评论提供商选择,并且支持自定义评论区 - 代码块:UI 升级,支持一键折叠/展开
- 文章页风格书页化:提供 3 种风格选择:
VitePress
原生、整体卡片化、片段卡片化 - 文章打赏:支持 3 种打赏风格选择
- 文章分享:提供一键复制文章链接功能
- 最近更新栏:展示最近更新文章
- ...
功能页
- 分类页
- 标签页
- 归档页
- 清单页
- 登录页
- 风险链接提示页
除了上述功能,Teek 也提供了各种 CSS
文件来增强 VitePress
的样式,并提供大量的插槽支持二次开发。
如果您是其他主题的用户,也可以按需引入 Teek 的功能,增强自己的站点风格。
💡 反馈交流
在使用过程中有任何问题和想法,请给我提 Issue。 你也可以在 Issue
查看别人提的问题和解决方案。
或者加入我们的交流群,请前往 Teek 官网 的首页查看进群方式。