One

主题

00:00:00
2025-09-242025-09-25博客搭建Teek
1447
7m
0

在线安装 ​

在线安装 ​

环境 ​

在 Teek@1.5.0-2025.9.23 版本上测试。

版本 ​

建议使用如下包管理器安装 vitepress-theme-teek：

前言 ​

如果你想快速构建一个和 Teek 文档类似的项目，可以直接拉取 Teek 文档模板仓库。

bash
git clone https://github.com/Kele-Bingtang/vitepress-theme-teek-docs-template.git

如果你更喜欢从零开始慢慢研究 Teek，则可以按照下面的在线安装步骤构建并逐步丰富您的项目。

原文链接 ​

https://vp.teek.top/guide/quickstart.html 《快速开始（Teek官网）》

image-20250923223651457

1、VitePress 安装 ​

（1）在自己电脑 d盘 创建一个存放vitepress的目录：vitepress-theme-teek-one （名称无所谓，自己定义就好）

bash
cd /d/我的开源项目
mkdir vitepress-theme-teek-one
cd /d/我的开源项目/vitepress-theme-teek-one

（2）安装vitepress

有关 VitePress 的安装教程来源于 VitePress 文档。如果安装失败，请阅读 VitePress 文档查看最新的安装教程。

bash
pnpm add -D vitepress

（3）快速初始化

VitePress 附带一个命令行设置向导，可以帮助你构建一个基本项目。安装后，通过运行以下命令启动向导：

bash
pnpm vitepress init

将需要回答几个简单的问题：

记得选择在./docs目录下，其他步骤默认就好。

bash
┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config?
│  ./docs
│
◇  Site title:
│  My Awesome Project
│
◇  Site description:
│  A VitePress Site
│
◇  Theme:
│  Default Theme
│
◇  Use TypeScript for config and theme files?
│  Yes
│
◇  Add VitePress npm scripts to package.json?
│  Yes
│
└  Done! Now run pnpm run docs:dev and start writing.

2、Teek 在线安装 ​

bash
#进入项目根目录
cd /d/我的开源项目/vitepress-theme-teek-one

#执行命令
pnpm install vitepress-theme-teek -D

3、Teek 引入 ​

（1）根据 VitePress 的要求，需要在 .vitepress/theme/index.ts 文件中引入 Teek 主题。如果没有该路径，需要先创建它：

我这里需要创建theme目录，再创建theme/index.ts文件：（然后直接写入如下代码）

ts
// .vitepress/theme/index.ts
import Teek from "vitepress-theme-teek";
import "vitepress-theme-teek/index.css";

export default {
  extends: Teek,
};

（2）然后在 .vitepress/config.mts 文件中引入 Teek 的配置信息：

ts
// .vitepress/config.mts
import { defineConfig } from "vitepress"; //默认已存在
import { defineTeekConfig } from "vitepress-theme-teek/config";

// Teek 主题配置
const teekConfig = defineTeekConfig({});

// VitePress 配置
export default defineConfig({
  extends: teekConfig,
  // ...
});

image-20250923222857449

有关 Teek 更多的配置信息，请从 配置简介 开始阅读。

4、运行 ​

请查看你的 package.json 文件，确保存在下面 npm 脚本：（默认就是如此，无需配置）

json
{
  "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:preview": "vitepress preview docs"
  }
}

docs:dev 脚本将启动具有即时热更新的本地开发服务器。使用以下命令运行它：

来到项目根目录，运行：

bash
pnpm run docs:dev
  • 打包验证
bash
pnpm dcos:build

如果能成功打包的话，那就说明OK了。

  • 验证

浏览器打开http://localhost:5173/验证：

image-20250923222426794

结束。

存在的问题 ​

打包报异常提示 ​

image-20250923223530574

bash
Administrator@DESKTOP-7PB0PFA MINGW64 /d/我的开源项目/vitepress-theme-teek-one
$ pnpm run docs:dev                                                                                                                                                                                            

> @ docs:dev D:\我的开源项目\vitepress-theme-teek-one
> vitepress dev docs

22:35:16 [vitepress-plugin-sidebar-resolve v1.2.1] 自定义 Sidebar 必须是对象形式
22:35:16 [vitepress-plugin-sidebar-resolve v1.2.1] Injected Sidebar Data Successfully. 注入侧边栏数据成功!
22:35:16 [vitepress-plugin-permalink v1.2.1] Injected Permalinks Data Successfully. 注入永久链接数据成功! 
22:35:17 [vitepress-plugin-doc-analysis v1.0.13] Injected DocAnalysisInfo Data Successfully. 注入文档分析数据成功!
22:35:17 [vitepress-plugin-catalogue v1.1.2] Injected Catalogues Data Successfully. 注入目录页数据成功!
22:35:17 [vitepress-plugin-file-content-loader v1.0.13] Injected Posts Data Successfully. 注入 Posts 数据成功!

  vitepress v1.6.4

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

打包报异常提示 ​

image-20250923223444413

bash
$ pnpm run docs:build

> @ docs:build D:\我的开源项目\vitepress-theme-teek-one
> vitepress build docs


  vitepress v1.6.4

⠋ building client + server bundles...22:33:54 [vitepress-plugin-sidebar-resolve v1.2.1] 自定义 Sidebar 必须是对象形式
22:33:54 [vitepress-plugin-sidebar-resolve v1.2.1] Injected Sidebar Data Successfully. 注入侧边栏数据成功!
22:33:54 [vitepress-plugin-permalink v1.2.1] Injected Permalinks Data Successfully. 注入永久链接数据成功!
⠙ building client + server bundles...22:33:54 [vitepress-plugin-doc-analysis v1.0.13] Injected DocAnalysisInfo Data Successfully. 注入文档分析数据成功!
22:33:54 [vitepress-plugin-catalogue v1.1.2] Injected Catalogues Data Successfully. 注入目录页数据成功!
⠸ building client + server bundles...22:33:54 [vitepress-plugin-file-content-loader v1.0.13] Injected Posts Data Successfully. 注入 Posts 数据成功!
⠦ building client + server bundles...
iconfont.woff2?t=1755181778742 referenced in iconfont.woff2?t=1755181778742 didn't resolve at build time, it will remain unchanged to be resolved at runtime

iconfont.woff?t=1755181778742 referenced in iconfont.woff?t=1755181778742 didn't resolve at build time, it will remain unchanged to be resolved at runtime

iconfont.ttf?t=1755181778742 referenced in iconfont.ttf?t=1755181778742 didn't resolve at build time, it will remain unchanged to be resolved at runtime
⠸ building client + server bundles...
iconfont.woff2?t=1755181778742 referenced in iconfont.woff2?t=1755181778742 didn't resolve at build time, it will remain unchanged to be resolved at runtime

iconfont.woff?t=1755181778742 referenced in iconfont.woff?t=1755181778742 didn't resolve at build time, it will remain unchanged to be resolved at runtime

iconfont.ttf?t=1755181778742 referenced in iconfont.ttf?t=1755181778742 didn't resolve at build time, it will remain unchanged to be resolved at runtime
✓ building client + server bundles...
✓ rendering pages...
build complete in 7.85s.

Administrator@DESKTOP-7PB0PFA MINGW64 /d/我的开源项目/vitepress-theme-teek-one
$

结束。

直接拉原作者的开源库吧 ​

2025年9月23日22:42:29。

这里我直接拉原作者的开源库吧，自己一步步配置太耗时了🤣！

刚好作者这里已经把Teek的开源库更新到最新版了：

https://github.com/Kele-Bingtang/vitepress-theme-teek-docs-template

image-20250923224151390

最近更新