2025-09-06 博客 Teek 10907 字 48 分钟 -- 次

Teek-one模板手把手使用文档

最后更新于: 2026-06-27 15:38:29

Teek-one模板手把手使用文档

Teek~一款简约、唯美、丝滑且强大的VitePress主题博客(博客和知识库二合一)

前言

产生背景

提示

以下文字来源于《天客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 集成。

背景

为什么要写这篇文章呢？

静态类型博客(ssg)部署非常简单，无非就是拉取代码，本地运行，构建数据，推送数据。但是对小白来说，如何快速部署一个ssg类型博客，如何使用博客，且将其发布到自己个人域名下，尤其是面对一个全新的博客，总会显得不知所措。

老夫也是过来人，不想见小白因为各种小问题踩各种坑，浪费了光阴却中途放弃，于是鄙人写了这篇手把手使用Teek博客的文档，各位小伙伴使用过程中有任何问题，可以在群里@我，我会帮大家快速部署属于自己的博客博客哦😜。

所以：

你想要 3s 即刻就会拥有和我一样的个人博客吗？
宇宙最美博客~Teek博客(博客和文档库二合一)，你想要体验吗？

那就按这篇手把手教程快速部署一个宇宙最美博客哦，哈哈哈。🤣

简介

Teek 是一个 轻量、简洁高效、灵活配置，易于扩展 的 VitePress 主题 ✨，可以轻松打造属于你自己的知识管理平台，它有如下特性：

知识管理

包含三种典型的知识管理形态：结构化、碎片化、体系化。轻松打造属于你自己的知识管理平台。

结构化 & 体系化

自动生成侧边栏、目录页、索引页、面包屑等，轻松构建一个结构化知识库。

碎片化 & 个性化

博客功能提供快速构建知识的碎片化形态，并提供大量个性化的主题配置。

文档风 & 博客风

支持通过配置随意切换文档风和博客风，支持个人博客、文档站、知识库等场景。

🍊视频讲解

https://www.bilibili.com/video/BV1YuaUzWE1Z/?vd_source=77325423ced14ef15b0723db235167e3 Teek~一款简约、唯美、丝滑且强大的VitePress主题博客(博客和知识库二合一)

PixPin_2025-09-04_19-03-25

🍊关于Teek博客介绍，详情见如下链接：

https://onedayxyy.cn/teek/teek-blog 《Teek博客》

🍊细节展示

链接访问：文档地址 | 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最大亮点：

Teek~一款简约、唯美、丝滑且强大的VitePress主题博客 ❤️❤️❤️

理念超前：Teek 以“将本地目录的 Markdown 文档渲染成博客”这一设计思想贯穿其中，大道至简，实用且强大。
双模式支持：能同时满足 知识库 & 博客 & 云笔记 需求，且功能完整、体验丝滑，试问全网还有哪个网站能与其争锋？
纯静态部署：一键轻松部署，最低配服务器即可满足需求，真正做到轻量化、高效化。
极致体验：风格简约、唯美，阅读/编辑文章就像读一本书一样清晰、舒适，细节打磨到位，操作丝滑流畅，用户体验无可挑剔。
数据管理：本地typora/obsidian维护markdown文档，git管理，一键发布本地md知识目录到网站；
社区氛围：群内热心小伙伴手把手教学，耐心解答问题，价值感和情绪价值双拉满，群主对小伙伴提出的需求基本有求必应……
持续迭代：开发者热心持续开发新功能，及时修复 Bug，完全开源，诚意满满。

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

版权

警告

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

官方demo及仓库

Teek官方文档：https://vp.teek.top/

Teek原作者博客：https://notes.teek.top/

模板：

Teek爱好者《One》开源的模板：Teek-one（本人开箱即用的漂亮博客风，适合小白，强烈推荐😜） https://cnb.cool/onedayxyy/vitepress-theme-teek-one-public

官方开箱即用版仓库（官方开箱即用的简约文档风，适合小白，强烈推荐😜）：https://github.com/Kele-Bingtang/vitepress-theme-teek-docs-template

官方开发版仓库（想二开Teek的可选择这个）：https://github.com/Kele-Bingtang/vitepress-theme-teek

推广文章：

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

一切博客，凡是作者不能很好地支持更新，都不如 Teek博客。🤣

开箱即用版

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

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

NOTE

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

此模板是在《天客 - Teeker》大佬开源项目《vitepress-theme-teek 》基础上添加了一些友好的用户体验开源的，非常适合小白使用（强烈建议小白直接拉取次库体验效果😜）。

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

部分效果见如下图所示：

简约文档风格

Banner 大图

卡片风格

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

前提条件

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

安装好git；
安装好nodejs；（Node.js 需要满足18.0.0 及以上版本）
具有自己的域名；（可选）
有手就行；

以下配置是讲述了如何拉取自己Teek-one模板，且想要修改把当前网站修改为自己网站的配置信息，都是手把手教程，按着配置弄就完全OK，保准无坑。😍

项目需知

1.项目结构

以下是Teek的各目录结构。

2.命名规则

🍊命名规则

我们在维护Teek仓库之前，必须得弄清楚Teek里目录及文件的命名规则，以方便后续维护Teek网站。

🍊原文链接

原文链接：结构化目录 | vitepress-theme-teek

如果你搭建的是博客风的站点，那么 Teek 建议和 vdoing 一样，使用以下命名约定：

无论是文件还是文件夹，请为其名称添加上正确的正整数序号和 .，从 00 或 01 开始累计，如 01.文件夹、02.文件.md，我们将会按照序号的顺序来决定其在侧边栏当中的顺序
同一级别目录别内即使只有一个文件或文件夹也要为其加上序号

序号只是用于决定先后顺序，并不一定需要连着，如 01、02、03...，实际可能会在两个文章中间插入一篇新的文章，因此为了方便可以采用间隔序号 10、20、30...，后面如果需要在 10 和 20 中间插入一篇新文章，可以给定序号 15。

当然可以使用非序号的命名，这并不影响使用，添加序号只是为了排序，且更具有结构化，如果同一个目录下同时存在带序号和不带序号的文件，在生成侧边栏时，Teek 会分为两个区：带序号区和不带序号区，两个区内部按照各自的逻辑排序，在最终生成侧边栏的时候，不带序号区始终放在带序号区的后面。

从维护性、可读性的角度分析，带有序号的文件名在本地目录看起来更加直观；从站点渲染的角度分析，在生成侧边栏时，Teek 会根据文件名的序号进行排序。

🍊最佳姿势

一级目录下只能存在一个md，其余必须为目录。目录按序号递增（例如10. 20. 30. 40.）；

3.rewrite模式

🍊模式选择

当前Teek-one默认的模式已强制修改为rewrite，别问为什么，贫道自有道理，肯定是最佳实践啦。

那么，为什么要切换到rewrite呢？

左下角会有中文路径提示
url打开会有中文提示

这2个问题导致proxy模式的vitepress主题体验就是一坨粑粑（所以不得不切到rewrite模式）。🤣

Teek里文件路径使用原则

Teek里的每个页面url链接只能是https://域名/一级前缀/随机uid （例如我网站《Teek博客》文章的唯一链接就是https://onedayxyy.cn/teek/teek-blog，此时一级前缀就是teek，随机uid 就是teek-blog）
必须保证一级目录下的所有md都得有同一个一级前缀，例如 /一级前缀/随机uid
一级前缀决定了是否都在同一个侧边栏显示。你一级目录下，都是其子目录，默认都弄成同一个一级前缀就好了。如果不想让他出现在侧边栏，那就单独指定一个一级目录。
所以，一级前缀就统一整成 /技术/xxx /专题/xxx /生活/xxx /兴趣/xxx /关于/xxx (这里的中文可以替换为对应的英文)

1、拉取模板

（1）克隆仓库

 1#来到自己电脑d盘
 2cd /d/
 3#项目拉取
 4git clone https://cnb.cool/onedayxyy/vitepress-theme-teek-one-public.git
 5
 6cd /d/vitepress-theme-teek-one-public
 7#依赖安装（只能用 pnpm 安装依赖）
 8pnpm install
 9
10#项目本地运行
11pnpm docs:dev #本地运行
12
13#项目打包
14pnpm docs:build

提示

推荐小白使用Teek-One这个模板，此模板遵循大道至简，简约、唯美、丝滑且强大。

让然也可以使用Teek原作者《vitepress-theme-teek-docs-template》模板。

（2）浏览器访问http://localhost:5173/观察效果

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

以上，Teek博客本地部署好了，接下来，那么我们把模板中的一些信息修改为自己的个人信息。

🍊扩展：

dockre部署

警告

仅用于快速拉起一个teek博客，实际部署推荐以上源码部署。

1#dockre一键启动teek博客
2docker run -d -p 8054:80 --name docker.cnb.cool/onedayxyy/vitepress-theme-teek-one-public/teek-blog --restart unless-stopped teek-blog

2、修改信息

左上角网站名称、标签页名称、首页网站名称、网站logo

1.左上角网站名称

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

1title: "One", //左上角网站名称

效果：

2.标签页名称

编辑docs\index.md文件：

1#标签页名称
2title: One
3#标签页-副标题
4titleTemplate: 明心静性，爱自己

效果：

3.首页网站名称

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

修改banner.name属性为One Blog 🎉 （记得批量把博客默认配置/小图/大图/全图/卡片等下的banner.name属性都配置一遍）

  1import type { TeekConfig } from "vitepress-theme-teek/config";
  2
  3// 文档配置
  4export const teekDocConfig: TeekConfig = {
  5  themeEnhance: {
  6    layoutSwitch: {
  7      defaultMode: "bothWidthAdjustable",
  8    },
  9  },
 10};
 11
 12// 博客基础配置
 13const teekBlogCommonConfig: TeekConfig = {
 14  teekHome: true,
 15  vpHome: false,
 16  loading: true,
 17  wallpaper: {
 18    enabled: true,
 19    hideBanner: true,
 20  },
 21  footerInfo: {
 22    customHtml: `<span id="runtime"></span>`, // 需要搭配 .vitepress/theme/helper/useRuntime.ts 使用
 23  },
 24  docAnalysis: {
 25    createTime: "2025-03-23",
 26    statistics: {
 27      provider: "busuanzi",
 28    },
 29  },
 30  friendLink: {
 31    list: [
 32      {
 33        name: "Teeker",
 34        desc: "朝圣的使徒，正在走向编程的至高殿堂！",
 35        avatar: "https://testingcf.jsdelivr.net/gh/Kele-Bingtang/static/user/avatar2.avif",
 36        link: "http://notes.teek.top/",
 37      },
 38      {
 39        name: "vuepress-theme-vdoing",
 40        desc: "🚀一款简洁高效的VuePress 知识管理&博客 主题",
 41        avatar: "https://doc.xugaoyi.com/img/logo.avif",
 42        link: "https://doc.xugaoyi.com/",
 43      },
 44      {
 45        name: "One",
 46        desc: "明心静性，爱自己",
 47        avatar: "https://onedayxyy.cn/img/xyy.avif",
 48        link: "https://onedayxyy.cn/",
 49      },
 50      {
 51        name: "Hyde Blog",
 52        desc: "人心中的成见是一座大山",
 53        avatar: "https://teek.seasir.top/avatar/avatar.avif",
 54        link: "https://teek.seasir.top/",
 55      },
 56      {
 57        name: "二丫讲梵",
 58        desc: "💻学习📝记录🔗分享",
 59        avatar: "https://wiki.eryajf.net/img/logo.avif",
 60        link: " https://wiki.eryajf.net/",
 61      },
 62      {
 63        name: "粥里有勺糖",
 64        desc: "简约风的 VitePress 博客主题",
 65        avatar: "https://theme.sugarat.top/logo.avif",
 66        link: "https://theme.sugarat.top/",
 67      },
 68      {
 69        name: "VitePress 快速上手中文教程",
 70        desc: "如果你也想搭建它，那跟我一起做吧",
 71        avatar: "https://avatars.githubusercontent.com/u/90893790?v=4",
 72        link: "https://vitepress.yiov.top/",
 73      },
 74      {
 75        name: "友人A",
 76        desc: "おとといは兎をみたの，昨日は鹿，今日はあなた",
 77        avatar: "http://niubin.site/logo.avif",
 78        link: "http://niubin.site/",
 79      },
 80    ],
 81    autoScroll: true,
 82  },
 83  social: [
 84    {
 85      icon: "mdi:github",
 86      name: "GitHub",
 87      link: "https://github.com/kele-bingtang",
 88    },
 89    {
 90      icon: "simple-icons:gitee",
 91      name: "Gitee",
 92      link: "https://gitee.com/kele-bingtang",
 93    },
 94  ],
 95};
 96
 97// 博客默认配置
 98export const teekBlogConfig: TeekConfig = {
 99  ...teekBlogCommonConfig,
100  banner: {
101    name: "One Blog 🎉",
102    description: "故事由我书写，旅程由你见证，传奇由她聆听 —— 来自 Young Kbt",
103    bgStyle: "partImg",
104  },
105};
106
107// 博客小图配置
108export const teekBlogParkConfig: TeekConfig = {
109  ...teekBlogCommonConfig,
110  banner: {
111    name: "One Blog 🎉",
112    bgStyle: "partImg",
113    imgSrc: ["/blog/bg1.avif", "/blog/bg2.avif", "/blog/bg3.avif"],
114    description: [
115      "故事由我书写，旅程由你见证，传奇由她聆听 —— 来自 Young Kbt",
116      "积跬步以至千里，致敬每个爱学习的你 —— 来自 Evan Xu",
117      "这一生波澜壮阔或是不惊都没问题 —— 来自 Weibw",
118    ],
119    descStyle: "switch",
120  },
121  footerGroup: [
122    {
123      title: "外部链接",
124      links: [
125        { name: "示例 1", link: "https://vp.teek.top" },
126        { name: "示例 2", link: "https://vp.teek.top" },
127        { name: "示例 3", link: "https://vp.teek.top" },
128      ],
129    },
130    {
131      title: "内部链接",
132      links: [
133        { name: "快速开始", link: "/guide/quickstart" },
134        { name: "配置简介", link: "/reference/config" },
135      ],
136    },
137  ],
138};
139
140// 博客大图配置
141export const teekBlogFullConfig: TeekConfig = {
142  ...teekBlogCommonConfig,
143  post: {
144    coverImgMode: "full",
145  },
146  banner: {
147    name: "One Blog 🎉",
148    bgStyle: "fullImg",
149    imgSrc: ["/blog/bg1.avif", "/blog/bg2.avif", "/blog/bg3.avif"],
150    description: [
151      "故事由我书写，旅程由你见证，传奇由她聆听 —— 来自 Young Kbt",
152      "积跬步以至千里，致敬每个爱学习的你 —— 来自 Evan Xu",
153      "这一生波澜壮阔或是不惊都没问题 —— 来自 Weibw",
154    ],
155    descStyle: "types",
156  },
157  comment: {
158    provider: "giscus",
159    options: {
160      repo: "Kele-Bingtang/vitepress-theme-teek",
161      repoId: "R_kgDONpVfBA",
162      category: "Announcements",
163      categoryId: "DIC_kwDONpVfBM4Cm3v9",
164    },
165  },
166  codeBlock: {
167    overlay: true,
168  },
169  themeEnhance: {
170    themeColor: {
171      append: [
172        {
173          label: "博客扩展主题",
174          tip: "博客扩展主题",
175          options: [
176            { label: "紫罗兰", value: "violet", color: "#7166f0" },
177            { label: "珊瑚粉", value: "coral-pink", color: "#ff6b6b" },
178            { label: "天蓝", value: "sky-blue", color: "#00bbf9" },
179            { label: "蓝绿", value: "blue-green", color: "#00f5d4" },
180            { label: "石板灰", value: "slate-gray", color: "#708090" },
181            { label: "粉红", value: "pink", color: "#f15bb5" },
182            { label: "黄绿", value: "yellow-green", color: "#8ac926" },
183            { label: "橙红", value: "orange-red", color: "#ff9e6b" },
184          ],
185        },
186      ],
187    },
188  },
189};
190
191// 博客全图配置
192export const teekBlogBodyConfig: TeekConfig = {
193  ...teekBlogCommonConfig,
194  pageStyle: "segment-nav",
195  bodyBgImg: {
196    imgSrc: ["/blog/bg1.avif", "/blog/bg2.avif", "/blog/bg3.avif"],
197  },
198  banner: {
199    name: "One Blog 🎉",
200    description: [
201      "故事由我书写，旅程由你见证，传奇由她聆听 —— 来自 Young Kbt",
202      "积跬步以至千里，致敬每个爱学习的你 —— 来自 Evan Xu",
203      "这一生波澜壮阔或是不惊都没问题 —— 来自 Weibw",
204    ],
205    descStyle: "types",
206  },
207  themeEnhance: {
208    layoutSwitch: {
209      defaultMode: "original",
210    },
211  },
212};
213
214// 博客卡片配置
215export const teekBlogCardConfig: TeekConfig = {
216  ...teekBlogCommonConfig,
217  post: {
218    postStyle: "card",
219  },
220  homeCardListPosition: "left",
221  banner: {
222    name: "One Blog 🎉",
223    bgStyle: "fullImg",
224    imgSrc: ["/blog/bg1.avif", "/blog/bg2.avif", "/blog/bg3.avif"],
225    description: [
226      "故事由我书写，旅程由你见证，传奇由她聆听 —— 来自 Young Kbt",
227      "积跬步以至千里，致敬每个爱学习的你 —— 来自 Evan Xu",
228      "这一生波澜壮阔或是不惊都没问题 —— 来自 Weibw",
229    ],
230    descStyle: "types",
231  },
232};

效果：

4.网站logo

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

1logo: "/xyy-favicon.ico", //网站logo

效果：

1.侧边栏个人头像、呢称、背景图、座右铭

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

 1  blogger: {
 2    // 博主信息，显示在首页侧边栏
 3
 4    name: "One", // 侧边栏个人昵称
 5    slogan: "明心静性，爱自己", // 侧边栏个人座右铭
 6    avatar: "/img/xyy.avif",  //侧边栏个人头像
 7    shape: "circle-rotate", // 头像风格：square 为方形头像，circle 为圆形头像，circle-rotate 可支持鼠标悬停旋转
 8    circleBgImg: "https://img.onedayxyy.cn/images/Teek/TeekBg/14.avif", // 侧边栏个人头像圆形背景图
 9    circleBgMask: false, // 头像圆形背景图是否显示遮罩层
10    color: "#ffffff",
11    circleSize: 120,
12    status: {
13      icon: "😪",
14      size: 28,
15      title: "困",
16    },
17  },

效果：

编辑docs\index.md文件：

 1  features: # 可选的
 2    - title: 初见
 3      details: 茫茫人海，我们相遇
 4      link: / # 可选
 5      # imgUrl: /img/web.avif # 可选
 6      image: /img/xyy-1.avif # 可选
 7    - title: 幸福
 8      details: 与你一起，真的幸福
 9      link: /
10      # imgUrl: /img/ui.avif
11      image: /img/xyy-2.avif
12    - title: 后来
13      details: 再见竟是，再也不见
14      link: /
15      # imgUrl: /img/other.avif
16      image: /img/xyy-3.avif

效果：

壁纸

编辑docs\.vitepress\ConfigHyde\Wallaper.ts文件，把自己喜欢的图片放进去就好：

 1// 首页壁纸 - 动态获取本地图片服务器的图片
 2
 3// 壁纸服务配置 - 统一配置服务地址，一处修改全局生效
 4export const WALLPAPER_SERVICE_CONFIG = {
 5  baseUrl: 'https://imgapi.onedayxyy.cn',
 6  // baseUrl: 'https://imgapi.onedayxyy.cn',
 7  apiEndpoint: '/api/images',
 8  get fullUrl() {
 9    return `${this.baseUrl}${this.apiEndpoint}`
10  }
11}
12
13// 备用图片列表（当本地服务不可用时使用）
14const fallbackImages = [
15  "https://img.onedayxyy.cn/images/Teek/TeekBg/1.avif", 
16  // "https://img.onedayxyy.cn/images/Teek/TeekBg/2.avif", 
17  // "https://img.onedayxyy.cn/images/Teek/TeekBg/3.avif", 
18  // "https://img.onedayxyy.cn/images/Teek/TeekBg/4.avif", 
19  // "https://img.onedayxyy.cn/images/Teek/TeekBg/5.avif", 
20  // "https://img.onedayxyy.cn/images/Teek/TeekBg/6.avif", 
21  // "https://img.onedayxyy.cn/images/Teek/TeekBg/7.avif", 
22  // "https://img.onedayxyy.cn/images/Teek/TeekBg/8.avif", 
23  // "https://img.onedayxyy.cn/images/Teek/TeekBg/9.avif", 
24  // "https://img.onedayxyy.cn/images/Teek/TeekBg/10.avif", 
25  // "https://img.onedayxyy.cn/images/Teek/TeekBg/11.avif", 
26  // "https://img.onedayxyy.cn/images/Teek/TeekBg/12.avif", 
27  // "https://img.onedayxyy.cn/images/Teek/TeekBg/13.avif", 
28  // "https://img.onedayxyy.cn/images/Teek/TeekBg/14.avif", 
29  // "https://img.onedayxyy.cn/images/Teek/TeekBg/15.avif", 
30  // "https://img.onedayxyy.cn/images/Teek/TeekBg/16.avif",
31  // "https://img.onedayxyy.cn/images/Teek/TeekBg/17.avif",
32  // "https://img.onedayxyy.cn/images/Teek/TeekBg/18.avif",
33  // "https://img.onedayxyy.cn/images/Teek/TeekBg/19.avif",
34];
35// 动态获取图片列表的函数
36async function fetchDynamicWallpapers(): Promise<string[]> {
37  try {
38    // 使用统一配置的图片服务API
39    const response = await fetch(WALLPAPER_SERVICE_CONFIG.fullUrl, {
40      method: 'GET',
41      headers: {
42        'Accept': 'application/json',
43      },
44    });
45    
46    if (!response.ok) {
47      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
48    }
49    
50    const data = await response.json();
51    const images = data.images || [];
52    
53    // 将相对路径转换为完整的服务器URL
54    const wallpapers = images.map((imagePath: string) => `${WALLPAPER_SERVICE_CONFIG.baseUrl}${imagePath}`);
55    
56    // 如果获取到图片，返回动态图片列表，否则返回备用图片
57    return wallpapers.length > 0 ? wallpapers : wallpapers;
58    
59  } catch (error) {
60    console.warn('无法获取动态壁纸，使用备用图片:', error);
61    return fallbackImages;
62  }
63}
64
65// 创建一个Promise来获取壁纸
66let wallpaperPromise: Promise<string[]> | null = null;
67
68// 获取壁纸的函数
69function getWallpapers(): Promise<string[]> {
70  if (!wallpaperPromise) {
71    wallpaperPromise = fetchDynamicWallpapers();
72  }
73  return wallpaperPromise;
74}
75
76// 导出的Wallpaper数组 - 在服务端渲染时使用备用图片，客户端动态加载
77export const Wallpaper: string[] = fallbackImages;
78
79// 导出动态获取函数供主题使用
80export { getWallpapers, fetchDynamicWallpapers };

这里的Teek博客的首页壁纸使用的是余温大佬开发的Go壁纸api，你可以选择继续使用我的壁纸。或者把这一行注释掉，然后换成自己的壁纸。

文章封面

编辑docs\.vitepress\ConfigHyde\Cover.ts文件，把自己喜欢的图片放进去就好：

 1// 首页壁纸
 2export const Cover = [
 3  "https://img.onedayxyy.cn/images/Teek/TeekCover/1.avif", 
 4  "https://img.onedayxyy.cn/images/Teek/TeekCover/2.avif", 
 5  "https://img.onedayxyy.cn/images/Teek/TeekCover/3.avif", 
 6  "https://img.onedayxyy.cn/images/Teek/TeekCover/4.avif", 
 7  "https://img.onedayxyy.cn/images/Teek/TeekCover/5.avif", 
 8  "https://img.onedayxyy.cn/images/Teek/TeekCover/6.avif", 
 9  "https://img.onedayxyy.cn/images/Teek/TeekCover/7.avif", 
10  "https://img.onedayxyy.cn/images/Teek/TeekCover/8.avif", 
11  "https://img.onedayxyy.cn/images/Teek/TeekCover/9.avif", 
12  "https://img.onedayxyy.cn/images/Teek/TeekCover/10.avif", 
13  "https://img.onedayxyy.cn/images/Teek/TeekCover/11.avif", 
14  "https://img.onedayxyy.cn/images/Teek/TeekCover/12.avif", 
15  "https://img.onedayxyy.cn/images/Teek/TeekCover/13.avif", 
16  "https://img.onedayxyy.cn/images/Teek/TeekCover/14.avif", 
17  "https://img.onedayxyy.cn/images/Teek/TeekCover/15.avif", 
18  "https://img.onedayxyy.cn/images/Teek/TeekCover/16.avif",
19  "https://img.onedayxyy.cn/images/Teek/TeekCover/17.avif",
20  "https://img.onedayxyy.cn/images/Teek/TeekCover/18.avif",
21  "https://img.onedayxyy.cn/images/Teek/TeekCover/19.avif",
22  "https://img.onedayxyy.cn/images/Teek/TeekCover/20.avif",
23  "https://img.onedayxyy.cn/images/Teek/TeekCover/21.avif",
24  "https://img.onedayxyy.cn/images/Teek/TeekCover/22.avif",
25  "https://img.onedayxyy.cn/images/Teek/TeekCover/23.avif",
26  "https://img.onedayxyy.cn/images/Teek/TeekCover/24.avif",
27  "https://img.onedayxyy.cn/images/Teek/TeekCover/25.avif",
28];

以上的壁纸路径是我图床里的，你也可以把图片放大项目里，此时的路径就需要改为/img/xx.avif了，这里使用的是相对路径，相对于docs\public目录而言的。

Twikoo评论

（1）docker部署twikoo服务

Twikoo评论需要单独搭建服务，具体部署方法见如下链接：《 https://onedayxyy.cn//zhuanti/twikoo-install 》

（2）次项目配置Twikoo

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

1envId: 'https://twikoo.onedayxyy.cn/', // 换成你自己配置的域名

Algolia搜索

Algolia搜索需要单独搭建服务，具体部署方法见如下链接：《 https://onedayxyy.cn/teek/algolia 》

Teek博客默认支持本地搜索，但是当数据量大的时候，就会出现卡顿现象。因此这里需手动配置下Algolia搜索。配置过程，稍微会复杂点，但是按文档提示的来，一般没多大问题。

以上文档包含了Algolia配置过程，及项目配置过程。

3、管理数据

以上个人信息修改完后，我们看下如何往博客里新增文章数据呢？

如何把原有博客数据迁移到Teek博客？
如何在Teek博客新建文章呢？

请看下文。

1.迁移数据

（特别注意🛑）

（1）删除模板中存在的老数据

此时，就可以把模板docs目录下的10.运维、15.前端……65.Teek等目录都给删除了，然后把你之前的个人笔记数据给放到Teek的docs目录下，然后按上面提到的方式命名。

（2）创建自己的新数据

例如，我们会创建如下目录结构：（每个目录下有多个子目录或者md）

具体目录结构截图示例：

特别注意：

在把你之前的数据迁移到teek时，这里需要格外注意一个问题。

teek目前使用rewrite模式的autoformatter插件来给md强制注入永久permalink，每个md的permalink格式为/一级前缀/随机uid。

因此，当你想要使用teek的rewrite模式后，这里需要我们提前配置一点东西，后续就可以丝滑使用了：

（3）指定一级前缀规则

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

 1                  { folderName: "10.运维", prefix: "/linux/$uuid5", removeLevel: 99}, // 清空前缀并且添加前缀使用随机数
 2                  { folderName: "15.前端", prefix: "/qianduan/$uuid5", removeLevel: 99}, // 清空前缀并且添加前缀使用随机数
 3                  { folderName: "20.编程", prefix: "/code/$uuid5", removeLevel: 99}, // 清空前缀并且添加前缀使用随机数
 4                  { folderName: "25.黑客", prefix: "/hacker/$uuid5", removeLevel: 99}, // 清空前缀并且添加前缀使用随机数
 5                  { folderName: "30.专题", prefix: "/zhuanti/$uuid5", removeLevel: 99}, // 清空前缀并且添加前缀使用随机数
 6                  { folderName: "35.工具", prefix: "/tools/$uuid5", removeLevel: 99}, // 清空前缀并且添加前缀使用随机数
 7                  { folderName: "40.生活", prefix: "/life/$uuid5", removeLevel: 99}, // 清空前缀并且添加前缀使用随机数
 8                  { folderName: "45.精神小屋", prefix: "/love/$uuid5", removeLevel: 99}, // 清空前缀并且添加前缀使用随机数
 9                  { folderName: "50.娱乐", prefix: "/yule/$uuid5", removeLevel: 99}, // 清空前缀并且添加前缀使用随机数
10                  { folderName: "55.兴趣", prefix: "/xingqu/$uuid5", removeLevel: 99}, // 清空前缀并且添加前缀使用随机数
11                  { folderName: "60.关于", prefix: "/about/$uuid5", removeLevel: 99}, // 清空前缀并且添加前缀使用随机数
12                  { folderName: "65.Teek", prefix: "/teek/$uuid5", removeLevel: 99}, // 清空前缀并且添加前缀使用随机数

即：有多少个一级目录，那么配置文件那里就必须配置多少行，这样每个一级目录下的内容就会出现在同一个侧边栏了。

配置完成后，不管你之前的md是否有permalink，teek的autoformatter插件都会强制注入永久permalink。（先可以用其他少量文档做下测试，没问题后，再迁移自己的个人数据。我这里都是测试没问题的，大家可以放心食用。🤣）

（4）配置导航栏项

你需要做的就是，在docs\.vitepress\ConfigHyde\Nav.ts文件里配置对应的url即可：

这里为了方便管理，每个一级目录下最好存放一个md,其序号可以命名为01. 让其为最优先的一个文件。（导航栏对应的菜单就可以配置对应一级目录下这个文件的permalink就行了。）

详情

最后形成的导航栏如下：

2.新增md

如果你想要新建一个md，该如何呢？

你只需要在对应目录下，新创建一个md就好，但是注意命名必须类似为 20.中国.md才行（以此为例）。

运行项目后，Teek里的autoformatter插件会自动给注入formater参数（如下截图）（你无需做任何操作）：

运行，然后观察效果：

1pnpm docs:dev

4、发布博客

以上个人的笔记数据已经整理好了，接下来，我们就把自己博客发布到公网上，供其它用户访问。

有以下2种方式：

cnb+eop（无服务器版）（推荐）
传统云服务器部署：云服务器+nginx

方式1：CNB+Eo Pages（推荐）

这里推荐使用CNB+Eo Pages，非常丝滑。

《CNB配合eo托管静态博客》（腾讯的eo Pages也的确丝滑）

具体步骤：
注册CNB，注册腾讯的EO;
把Teek项目代码上传到CNB仓库；
配置CNB流水线，一键发布博客到EO的Pages；
备注：
CNB是腾讯推出的云原生构建产品，EO是腾讯推出的免费cdn；

方式2：传统的云服务器部署

传统的云服务器部署，然后利用nginx代理。

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

安装好git；
安装好nodejs；（Node.js 需要满足18.0.0 及以上版本）

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

 1#来到自己电脑d盘
 2cd /d/
 3#项目拉取
 4git clone https://cnb.cool/onedayxyy/vitepress-theme-teek-one-public.git
 5
 6cd /d/vitepress-theme-teek-one-public
 7#依赖安装（只能用 pnpm 安装依赖）
 8pnpm install
 9
10#项目本地运行
11pnpm docs:dev #本地运行
12
13#项目打包
14pnpm 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配置文件就好）

配置后重启nginx： nginx -s reload

nginx完整配置如下：

 1[root@wiki ~]# cat /etc/nginx/conf.d/onedayxyy.cn.conf 
 2server {
 3    listen 80;
 4    server_name onedayxyy.cn;
 5    #配置https重定向
 6    return 301 https://$host$request_uri;
 7}
 8
 9server {
10    gzip on;
11    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
12
13
14    listen  443 ssl;
15    server_name  onedayxyy.cn;
16
17    root /root/rsync/rsync-vitepress/dist;    
18    location / {
19        index index.html index.htm;
20        try_files $uri $uri.html $uri/ =404;
21
22        # non existent pages
23        error_page 404 /404.html;
24
25        # a folder without index.html raises 403 in this setup
26        error_page 403 /404.html;
27
28        # adjust caching headers
29        # files in the assets folder have hashes filenames
30        location ~* ^/assets/ {
31            expires 1y;
32            add_header Cache-Control "public, immutable";
33        }
34    } 
35
36    location /images {
37        alias /images;
38        index index.html;
39      valid_referers none blocked *.onedayxyy.cn onedayxyy.cn *.gitee.com gitee.com *.cnb.cool cnb.cool *.sleele.com localhost 127.0.0.1;
40      if ( $invalid_referer ) {
41           # 如不满足，指定访问如下资源
42           rewrite ^/ https://onedayxyy.cn/error/1.avif;
43           return 403;
44      }
45    }
46    
47
48    location /error {
49        autoindex on; # 启用目录索引
50        alias /FdangDaoLianImages;
51        index index.html;   # 默认显示index.html文件，如果没有则列出目录内容
52    }   
53    
54
55    ssl_certificate             /etc/letsencrypt/live/onedayxyy.cn/fullchain.pem;
56    ssl_certificate_key         /etc/letsencrypt/live/onedayxyy.cn/privkey.pem; 
57
58    ssl_session_timeout 5m;
59    ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
60    ssl_ciphers EECDH+CHACHA20:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
61    ssl_prefer_server_ciphers on;
62    add_header Strict-Transport-Security "max-age=31536000";
63    
64    access_log /var/log/nginx/onedayxyy.cn.https.log;
65}

（4）验证

访问自己域名：

https://onedayxyy.cn/

扩展

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

shell一键发布（shell一键发布版内容到teek网站）
或者利用其它传输软件；（例如sftp,ftp,winscp……）

5、升级

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

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

FAQ

日志

具体官方更新日志见如下链接：《更新日志》

计划

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

反馈

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

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

赞赏

警告

次赞赏为直接给原作者充电，感谢大家热爱开源。好的产品，值得付费。😜

如果您正在使用这个项目并感觉这个项目给你带来帮助，或者是想支持我继续开发，您可以通过如下任意方式支持我：

Star 并分享 VitePress Theme Teek 🚀
通过以下二维码进行赞助，打赏作者一杯茶 🍵

谢谢！❤️

微信赞赏	微信	支付宝

您的赞助将帮助 Teek：

维护项目的基础设施
投入更多时间进行开发
提供更好的技术支持
开发更多实用功能

致谢

❤️ 感谢威武的群主开发了这个优秀的产品。

❤️ 感谢支持这个项目的朋友，您的每一份帮助都让这个项目变得更好！

❤️ 感谢为这个项目贡献代码的朋友 → Contributors

扩展

其它Teek小伙伴：

其它VitePress网站：

关于我

我的博客主旨：

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

🍀 个人网站

🍀 微信二维码

x2675263825 （舍得）， qq：2675263825。

🍀 微信公众号

《云原生架构师实战》

🍀 csdn

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

🍀 知乎

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

最后

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

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

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

📡

👤 作者: One

🔗 链接: https://onedayxyy.cn/topics/teek-blog

🌐 版权: 本站文章除特别声明外，均采用 CC BY-NC-SA 4.0 协议，转载请注明来自 One Blog！

上一篇 zola博客下一篇配置Twikoo评论系统

Teek-one模板手把手使用文档

目录

前言

背景

简介

亮点

版权

开箱即用版

前提条件

项目需知

1.项目结构

2.命名规则

3.rewrite模式

1、拉取模板

2、修改信息

左上角网站名称、标签页名称、首页网站名称、网站logo

1.左上角网站名称

2.标签页名称

3.首页网站名称

4.网站logo

侧边栏 个人头像、呢称、背景图、座右铭、首页3个banner图片

1.侧边栏 个人头像、呢称、背景图、座右铭

2.首页3个banner图片

壁纸

文章封面

Twikoo评论

Algolia搜索

3、管理数据

1.迁移数据

2.新增md

4、发布博客

方式1：CNB+Eo Pages（推荐）

方式2：传统的云服务器部署

5、升级

FAQ

日志

计划

反馈

赞赏

致谢

扩展

关于我

最后

本页导航

文档导航

侧边栏个人头像、呢称、背景图、座右铭、首页3个banner图片

1.侧边栏个人头像、呢称、背景图、座右铭