One

主题

One2025-03-09
4530
18.4m
Get...

Teek 推荐 ​

Teek~宇宙最美博客：一场代码与美学的碰撞 ​

image-20250502073710566

目录 ​

[toc]

版权 ​

警告

此《vitepress-theme-teek 》项目是《天客 - Teeker》大佬开源的，感谢大佬开发的优秀主题，大佬威武，这里仅记录下个人日常使用teek的一些信息，关于项目具体信息，可访问其官网，多些。❤️❤️

  • 官方demo及仓库

官方demo：https://vp.teek.top/

仓库：https://github.com/Kele-Bingtang/vitepress-theme-teek

原作者天客 - Teeker掘金发表的文章：《我用 VitePress 打造了一个文档风、博客风主题，VuePress 晚安！》

背景 ​

警告

以下文字来源于《天客Teeker》作者《我用 VitePress 打造了一个文档风、博客风主题，VuePress 晚安！》文章，介绍了Teek的产生背景，这里只记录相关信息，感谢作者的优秀作品。

相信使用 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 本身功能构建的，并没有添加一些第三方美化的插件、功能，您可以访问下面使用 Teek 搭建的博客地址(一开始跟随 Teek 的两位小伙伴的博客)，这些博客添加了很多美化功能，也许更符合您的爱好。

Ones Blog | Hyde Blog

🍊 功能概览

相较于 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 的功能，增强自己的站点风格。

开箱即用版📢 ​

开箱即用版~Teek-one💖 介绍

我的网站效果 https://onedayxyy.cn/

提示

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

此模板是在《天客 - Teeker》大佬开源项目《vitepress-theme-teek 》基础上 添加了很多额外功能开源的，因为原作者开源库只提供了Teek(文档库)简约风格，而Teek-one开源库则加入了很多额外功能，使得我们的博客更加丰富有趣且开箱即用，非常适合小白使用（强烈建议小白直接拉取次库体验效果😜）。

感谢大佬开发的主题，大佬威武。❤️❤️

特色 ​

此Teek-one开源版本具有如下功能：

  1. 速度快
  2. 支持多种博客风格（文档风格、博客大图风格、博客卡片风格）
  3. 可自动注入文章permalink、分类、创建时间、文章封面等
  4. 字体加粗颜色为红色
  5. 引用背景色为紫色且为圆角
  6. 默认识别url
  7. 移动端文章顶部有导航栏
  8. 首页卡片 鼠标悬停时具有蓝色阴影效果
  9. 鼠标好看的风格
  10. 好看的中文字体
  11. 网页侧边栏音乐播放器
  12. 骚骚的看板娘
  13. 五彩纸屑
  14. 自定义好看的404页面
  15. 顶部进度条
  16. 网页切换文字效果
  17. Umami统计
  18. 51la统计数据
  19. footer底部小熊和徽标
  20. 好看的时间轴
  21. 归档页贡献图
  22. 全局问候语
  23. 右上角 主题色切换按钮、布局切换按钮、博客风格切换按钮
  24. 导航栏图标
  25. 清单页、登录页、风险提示页
  26. ……

部分效果见如下图所示：

  • 简约文档风格

image-20250526063538038

  • Banner 大图

image-20250521212430758

  • Banner 小图

image-20250521212511405

  • 全背景图

image-20250521212550366

  • 列表风格

image-20250521212754544

  • 卡片风格

image-20250521212823393

更多效果，请访问我的网站One。

部署💖 ​

Teek是一个纯静态博客，因此部署非常简单，按如下命令直接安装就好。

（1）自己电脑得提前安装好git和nodejs：

（2）在自己winodws pc上部署Teek

bash
#来到自己电脑d盘
cd /d/
#项目拉取
git clone https://gitee.com/onlyonexl/vitepress-theme-teek-one-public.git

cd /d/vitepress-theme-teek-online-install-one-public
#依赖安装（只能用 pnpm 安装依赖）
pnpm install

#项目本地运行
pnpm docs:dev #本地运行

#项目打包
pnpm docs:build

执行pnpm docs:dev后，浏览器默认就会打开一个http://localhost:5173/网页：（恭喜你，此时你的Teek博客已经部署完成了）

（3）将Teek生成的静态文件推送到云服务器的nginx站点目录下

利用pnpm docs:build 命令打包好静态文件，然后把docs\.vitepress\dist路径下的内容直接传输到自己的云服务器的nginx站点目录下，这样其它小伙伴就可以通过域名来访问你的博客了。

特别注意：

一般情况，自己的云服务器都是通过nginx来代理静态站点的，但是这里需要单独做一个额外的配置，否则自己的Teek博客部署到云服务器后，刷新url会报404。

具体配置方法如下：

vim /etc/nginx/conf.d/onedayxyy.cn.conf （这里编辑自己的nginx配置文件就好）

bash
    location / {
        index index.html index.htm;
        try_files $uri $uri.html $uri/ =404; #添加这一行

		……
    }

image-20250516062832580

配置后重启nginx： nginx -s reload

nginx完整配置如下：

bash
[root@wiki ~]# cat /etc/nginx/conf.d/onedayxyy.cn.conf 
server {
    listen 80;
    server_name onedayxyy.cn;
    #配置https重定向
    return 301 https://$host$request_uri;
}

server {
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;


    listen  443 ssl;
    server_name  onedayxyy.cn;

    root /root/rsync/rsync-vitepress/dist;    
    location / {
        index index.html index.htm;
        try_files $uri $uri.html $uri/ =404;

        # non existent pages
        error_page 404 /404.html;

        # a folder without index.html raises 403 in this setup
        error_page 403 /404.html;

        # adjust caching headers
        # files in the assets folder have hashes filenames
        location ~* ^/assets/ {
            expires 1y;
            add_header Cache-Control "public, immutable";
        }
    } 

    location /images {
        alias /images;
        index index.html;
      valid_referers none blocked *.onedayxyy.cn onedayxyy.cn *.gitee.com gitee.com *.cnb.cool cnb.cool *.sleele.com localhost 127.0.0.1;
      if ( $invalid_referer ) {
           # 如不满足，指定访问如下资源
           rewrite ^/ https://onedayxyy.cn/error/1.png;
           return 403;
      }
    }
    

    location /error {
        autoindex on; # 启用目录索引
        alias /FdangDaoLianImages;
        index index.html;   # 默认显示index.html文件，如果没有则列出目录内容
    }   
    

    ssl_certificate             /etc/letsencrypt/live/onedayxyy.cn/fullchain.pem;
    ssl_certificate_key         /etc/letsencrypt/live/onedayxyy.cn/privkey.pem; 

    ssl_session_timeout 5m;
    ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
    ssl_ciphers EECDH+CHACHA20:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
    ssl_prefer_server_ciphers on;
    add_header Strict-Transport-Security "max-age=31536000";
    
    access_log /var/log/nginx/onedayxyy.cn.https.log;
}

（4）验证

访问自己域名：

https://onedayxyy.cn/

image-20250502073710566

扩展

如何将本地Teek生成的静态文件推送到云服务器的nginx站点目录，有多种办法（见如下详细链接）：

  1. shell一键发布 （shell一键发布版内容到teek网站）
  2. cnb一键发布 （一条cnb流水线，解放双手）
  3. 或者利用其它传输软件；（例如sftp,ftp,winscp……）

或者也可以利用Vercel部署自己的Teek。

升级 ​

一条命令就可以完成在线升级，特别丝滑哦。

bash
pnpm add vitepress-theme-teek@latest -D

日志 ​

Teek-one更新日志:

2025-05-23
  • 升级到Teek@1.3.4-2025.5.23
2025-05-21
  • 升级到Teek@1.3.3-2025.5.21
2025-05-12
  • 升级到Teek@1.2.0-2025.5.12
2025-05-08
  • 新增全局问候
  • 首页友情卡片内容滚动
  • 新增归档页贡献图
2025-05-07
  • 增加footer底部小熊和徽标
  • 增加好看的时间轴
2025-04-28
  • 增加umami网站统计
2025-04-24
  • 新增网页标题切换 & 看板娘风格更换 & 顶部滚动条 & 修复回到顶部失效问题 & 字体优化
2025-04-22
  • 移除首页右上角音乐播放器
2025-04-11
  • 发布Teek-one@release-v1.0.0 （此版本已完全满足个人博客日常使用，足够丝滑，强烈推荐。）

🍊 扩展：官方更新日志

https://github.com/Kele-Bingtang/vitepress-theme-teek/blob/dev/CHANGELOG.md

计划 ​

  1. 重点优化 "知识库+博客" 风格博客功能
  2. 添加一些其他主题/博客 有趣的元素到Teek里
  3. Teek性能、细节持续优化
  4. 希望有更多大佬能参与到这个项目，贡献自己一份力量
  5. 选一些好看的壁纸(风景/妹纸/动漫等)
  6. ……

反馈 ​

在使用过程中有任何问题和想法，请给作者提 Issue。 你也可以在 Issue 查看别人提的问题和给出解决方案。

或者加入我们的交流群，请前往 Teek 官网 的首页查看进群方式。（或者 添加我的微信并备注 进Teek群）

image-20230107215114763

总结 ​

提示

Teek：宇宙最美博客，实至名归 ❤️❤️❤️

  1. 理念超前：Teek 以“将本地目录的 Markdown 文档渲染成博客”这一设计思想贯穿其中，大道至简，实用且强大。
  2. 双模式支持：同时支持博客和文档库风格，满足多样化的需求，无论是个人分享还是技术文档都能轻松驾驭。
  3. 纯静态部署：部署简单，云服务器占用资源极小，真正做到轻量化、高效化。
  4. 极致体验：细节打磨到位，操作丝滑流畅，用户体验无可挑剔。
  5. 持续迭代：开发者热心持续开发新功能，及时修复 Bug，完全开源，诚意满满。
  6. 社区氛围：群内热心小伙伴手把手教学，耐心解答问题，价值感和情绪价值双拉满。

无论是从设计理念、功能丰富度，还是从用户体验和社区支持来看，Teek 都堪称全网最美博客，实至名归！

请花3秒立马行动起来吧：😜

如果你想拥有一个简约文档风的博客，那么请使用作者的官网模板（Teek官网）；

image-20250526063538038

如果你想拥有一个功能完整、界面漂亮、体验丝滑的博客，那么请使用作者头号粉丝One和Hyde的模板；

image-20250502073710566

关于我 ​

我的博客主旨：

  • 排版美观，语言精炼；
  • 文档即手册，步骤明细，拒绝埋坑，提供源码；
  • 本人实战文档都是亲测成功的，各位小伙伴在实际操作过程中如有什么疑问，可随时联系本人帮您解决问题，让我们一起进步！

🍀 个人网站

image-20250109220325748

🍀 微信二维码

x2675263825 （舍得）， qq：2675263825。

image-20230107215114763

🍀 微信公众号

《云原生架构师实战》

image-20230107215126971

🍀 csdn

https://blog.csdn.net/weixin_39246554?spm=1010.2135.3001.5421

image-20230107215149885

🍀 知乎

https://www.zhihu.com/people/foryouone

image-20230107215203185

最后 ​

如果你还有疑惑，可以去我的网站查看更多内容或者联系我帮忙查看。

如果你有更好的方式，评论区留言告诉我。谢谢！

好了，本次就到这里了，感谢大家阅读，最后祝大家生活快乐，每天都过的有意义哦，我们下期见！

最近更新