Skip to content

快速开始 推荐

版本

Teek badge

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

VitePress 安装

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

sh
pnpmadd-Dvitepress
sh
yarnadd-Dvitepress
sh
npmadd-Dvitepress

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

sh
pnpmvitepressinit
sh
yarnvitepressinit
sh
npxvitepressinit

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

sh
WelcometoVitePress!WhereshouldVitePressinitializetheconfig?./docsWhereshouldVitePresslookforyourmarkdownfiles?./docsSitetitle:MyAwesomeProjectSitedescription:AVitePressSiteTheme:DefaultThemeUseTypeScriptforconfigandthemefiles?YesAddVitePressnpmscriptstopackage.json?YesAddaprefixforVitePressnpmscripts?YesPrefixforVitePressnpmscripts:docsDone!Nowrunpnpmrundocs:devandstartwriting.

Teek 在线安装

sh
pnpminstallvitepress-theme-teek-D
sh
yarnaddvitepress-theme-teek-D
sh
npminstallvitepress-theme-teek-D

Teek 引入

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

ts
importTeek from"vitepress-theme-teek";import"vitepress-theme-teek/index.css";exportdefault{extends:Teek,};

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

ts
import{defineConfig } from"vitepress";import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=defineTeekConfig({});exportdefaultdefineConfig({extends:teekConfig,});

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

启动运行

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

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

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

sh
pnpmrundocs:dev
sh
yarndocs:dev
sh
npmrundocs:dev

vitepress dev docsdocs并不是固定写死的,有三种场景可以进行选择:

  • 如果 .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:srcsrcDir的作用请看 VitePress - srcDir

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

版本更新

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

sh
pnpmaddvitepress-theme-teek@latest-D
sh
yarnaddvitepress-theme-teek@latest-D
sh
npmaddvitepress-theme-teek@latest-D
最近更新