快速开始

版本

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

• pnpm推荐
• yarn
• npm

VitePress 安装

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

pnpm

pnpm add -D vitepress

yarn

yarn add -D vitepress

npm

npm add -D vitepress

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

pnpm

pnpm vitepress init

yarn

yarn vitepress init

npm

npx vitepress init

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

┌ Welcome to VitePress!
│
◇ Where should VitePress initialize the config?
│ ./docs
│
◇ Where should VitePress look for your markdown files?
│ ./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
│
◇ Add a prefix for VitePress npm scripts?
│ Yes
│
◇ Prefix for VitePress npm scripts:
│ docs
│
└ Done! Now run pnpm run docs:dev and start writing.

Teek 在线安装

pnpm

pnpm install vitepress-theme-teek -D

yarn

yarn add vitepress-theme-teek -D

npm

npm install vitepress-theme-teek -D

Teek 引入

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

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

export default {
  extends: Teek,
};

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

// .vitepress/config.mts
import { defineConfig } from "vitepress";
import { defineTeekConfig } from "vitepress-theme-teek/config";

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

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

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

启动运行

请查看你的 package.json 文件，确保存在下面 npm 脚本：

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

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

pnpm

pnpm run docs:dev

yarn

yarn docs:dev

npm

npm run docs:dev

vitepress dev docs 的 docs 并不是固定写死的，有三种场景可以进行选择：

• 如果 .vitepress 和 Markdown 文档在项目根目录下，则 vitepress dev docs 改为 vitepress dev
• 如果 .vitepress 和 Markdown 文档在项目 src 目录下，则 vitepress dev docs 改为 vitepress dev src
• 如果 .vitepress 在项目根目录下，Markdown 文档放在 src 目录下，则 vitepress dev docs 改为 vitepress dev，且需要在 .vitepress/config.mts 里配置 srcDir: src，srcDir 的作用请看 VitePress - srcDir

总结：VitePress 以 .vitepress 所在的目录层级 + srcDir 为参照逐层对 Markdown 文档扫描解析。

版本更新

Teek 不定期提供新特性或者修复 Bug，届时只需要更新版本号即可：

pnpm

pnpm add vitepress-theme-teek@latest -D

yarn

yarn add vitepress-theme-teek@latest -D

npm

npm add vitepress-theme-teek@latest -D