📖
结构化 && 体系化
自动生成侧边栏、目录页、索引页、面包屑等，轻松构建一个结构化知识库。
FPS: 0
快速开始版本 建议使用如下包管理器安装 `vitepress-theme-teek`： - pnpm<Badge type="tip" text="推荐" / - yarn - npm VitePress 安装 有关 VitePress 的安装教程来源于 VitePress 文档。如果安装失败，请阅读 VitePress 文档查看最新的安装教程。 ```sh [pnpm] pnpm add -D vitepress ``` ```sh [yarn] yarn add -D vitepress ``` ```sh [npm] npm add -D vitepress ``` VitePress
配置简介Teek 内置了大量的主题配置，但不会影响 vitepress 原来的配置，两者是独立生效的。 主题的配置通常添加在 `.vitepress/config.mts` 文件中。 如下是一份简单的模板： ```ts // .vitepress/config.mts import { defineConfig } from "vitepress"; import { defineTeekConfig } from "vitepress-theme-teek/config"; // Teek 主题配置 const teekConfig = defineTeekConfig({ // ... });
Markdown 拓展VitePress 使用 `markdown-it` 来对 Markdown 进行解析和渲染，最终转为 Vue 组件。 `markdown-it` 是一款功能强大的 Markdown 解析器，支持丰富的 Markdown 语法，能够轻松将 Markdown 文本转换为 HTML 格式，并提供了许多语法扩展和插件。如果希望文章页拓展一些新的功能、UI，那么可以利用它拦截并处理 Markdown 生成的 HTML。 阅读 VitePress 的代码可以发现，它利用 `markdown-it` 添加了代码块高亮、代码块行号、Tip 容器等功能，在 VitePress 官网的 Markdown 拓展
开发指南开发环境 | 类型 | 名称 | 版本 | | :------------ | :---------------- | :--------------- | | 操作系统 | Windows 11 专业版 | 26100.3476 | | 开发工具 | Microsoft VS Code | 1.96.2 | | 调试工具 | Microsoft Edge | 134.0.3124.85 | | 代码版本控制 | Git |
frontmatter 配置`frontmatter` 支持基于页面的配置。在每个 Markdown 文件中，可以使用 `frontmatter` 配置来覆盖 主题配置 中的大部分选项。 首页配置 description Teek 提供了 `description` 选项，用于在首页 Banner 展示一些描述信息，您可以通过 `tk.description` 或者 `tk.banner.description` 来配置首页的 `description`。 `description` 获取优先级：`tk.banner.description` ```yaml --- layout: home tk: descr
私密文章私密文章需要一个登录页进行登录，如果你想先体验登录页的效果，在导航栏 <mark 您也可以通过 `teek-login-page` 插槽自定义登录页。 ```vue <script setup lang="ts" name="TeekLayoutProvider"> import Teek from "vitepress-theme-teek"; import YourLoginPageComponent from "./YourLoginPageComponent"; </script> <template> <Teek.Layout>- 功能页配置私密文章（登录页）<Badge type="tip" text="v1.3.0" / 什么是登录页？在导航栏 <mark>功能页 -> 登录页</mark> 点击查看效果。 您可以通过 `teek-login-page` 插槽自定义登录页。 使用登录页需要 2 个步骤： - 创建一个登录页，如何创建请看 登录页 - 开启私密文章监听 ```ts // .vitepress/config.mts import { defineTeekConfig } from "vitepress-theme-teek/config"; const teekConfig =
站点统计Teek 集成了三种常见的站点统计工具： - 百度分析 `Baidu Analytics` - 谷歌分析 `Google Analytics` - `Umami` 分析 让你可以轻松地在 VitePress 网站中集成并管理这些分析工具。无论是谷歌分析的强大功能，还是百度统计对中国市场的适配，或者是 `Umami` 的隐私友好型方案，都可以通过这个插件快速集成并使用。 百度统计 ```ts // .vitepress/config.mts import { defineTeekConfig } from "vitepress-theme-teek/config"; const teekCon
开发技巧介绍 Teek 开发路程的一些技巧。 规范 Teek 建议在进行项目开发时，一个文件的代码行数推荐 300 行以下，最好不超过 500 行，禁止超过 1000 行。 如果超过 300+ 行，应该考虑下是否可以拆分为多个文件，这是一个良好的 结构化思维和分治思维。 Teek 建议您在开发前先思考有哪些模块，然后分别创建模块文件，而不是先在一个文件写完，再拆分。 举个例子： 代码合在一个文件： ```html <div <div class="header"> <img src="logo.png" /> <h1>网站名称</h
路由钩子VitePress 提供的 `useRouter` 有 4 个路由钩子，分别为： - `onBeforeRouteChange`：路由变化前触发，如果在该钩子函数中返回 `false`，则不会进行路由跳转 - `onBeforePageLoad`：页面加载前执行，在 `onBeforeRouteChange` 之后触发，如果在该钩子函数中返回 `false`，则不会进行路由跳转 - `onAfterPageLoad`：页面加载后执行 - `onAfterRouteChange`：路由变化后触发，在 `onAfterPageLoad` 之后触发 Teek 内置的 4 个评论区组件使用了 `onA
贡献指南感谢您使用 Teek。 以下是关于向 Teek 提交反馈或代码的指南。在向 Teek 提交 Issue 或者 PR 之前，请先花几分钟时间阅读以下内容。 Issue 规范 - 遇到问题时，请先确认这个问题是否已经在 Issue 中有记录或者已被修复 - 提 Issue 时，请用简短的语言描述遇到的问题，并添加出现问题时的环境和复现步骤，必要时需提供可复现问题最小代码仓库 环境包含 - `浏览器` 版本 - `操作系统` 版本 - `node` 版本 - `vitepress` 版本 - `Teek` 版本 参与开发 参考 开发指南。 代码规范 在编写代码时，请注意： - 确保代码可以通过
鸣谢本文记录 Teek 在成长过程中帮忙测试、开发的小伙伴们，以及 Teek 参考的其他优质 VitePress、VuePress 主题，感谢你们让 Teek 更加优秀。 主题 Teek 的灵感主要来自于 vuepress-theme-vdoing，在 VitePress 没有出来之前，Teek 使用 `vuepress-theme-vdoing` 搭建的博客站，因此 Teek 含有 `vuepress-theme-vdoing` 的绝大部分功能。 ```yaml - name: vuepress-theme-vdoing desc: 🚀一款简洁高效的VuePress 知识管理&博客 主题- 样式增强Teek 提供了一些样式文件来加强 VitePress 和 Teek 的样式，比如： 文档风格首页添加彩色渐变动画、文章一级标题添加渐变色、Banner 描述添加渐变效果、侧边栏标题组字号加粗等。 > Teek 首页 Banner 描述添加渐变效果、首页 Banner 壁纸添加缩放动画等 这些样式文件并不会直接生效，您需要手动引入这些文件。 VitePress 样式增强 在 vp-plus 目录下查看所有的样式样式增强文件内容。 SCSS 文件如下（可能不全）： ```sh vp-plus. ├─ aside.scss 文章页目录栏样式 ├─ b
Vite 插件VitePress 处于 Vite 环境下，因此天然支持 Vite 插件。 Teek 有过一个想法，那就是将所有功能完全插件化，通过 `NPM` 下载各个插件来合并成主题： - 目录页插件 - 归档页插件 - 文章信息插件 - Footer 插件 - ... 这完全是可行的，每个插件都是独立的，支持任何 VitePress 项目。 但是目前没有太多精力去实现这个计划，您可以通过 Teek 的按需引入功能（等价于下载插件），来加载自己需要的功能。 在了解 Vite 插件实现之前，建议您先去 Vite 官方文档 了解什么是 Vite。 下面介绍在 VitePress 中自定义 Vite 插件的场景
样式布局样式与组件分离 Teek 并没有和普通的 Vue 项目一样，使用如下模板进行编写组件： ```vue <script setup lang="ts" // 组件逻辑 </script> <template> <!-- 组件模板 --> </template> <style lang="scss" scoped> /* 组件样式 */ </style> ``` 而是使用： ```vue <script setup lang="ts"> // 组件逻辑 </script> <templa
主题配置在主题开发中，往往需要提供一些配置来丰富主题的功能，最简单的是和 VitePress 的 `themeConfig` 配置合在一起： ```ts {8} // .vitepress/config.mts import { defineConfig } from "vitepress"; export default defineConfig({ // ... themeConfig: { // vitepress 配置 // 自定义主题配置 }, }); ``` 然后在组件里通过 `useData` 获取 `themeConfig` 的内容： ```vue <- 目录结构Teek 的目录结构如下： ```sh packages. ├─ components 组件目录，具体内容请看「组件布局的目录结构」 ├─ config 配置文件目录，在 `.vitepress/config.mts` 文件中引入 ├─ helper 工具类目录 ├─ composables composables 目录 ├─ locale 国际化文件目录 ├─ markdown markdown 插件目录 ├─ static 静态资源目录 ├─ teek Teek 入口文件 ├─ theme-cha
- 容器自定义Teek 提供了两种创建容器的 API，这两种容器 Teek 分别命名为 Simple 容器、Card 容器。 Teek 容器都有哪些？请看 Markdown 拓展。 容器 API 请看 Markdown 插件工具 Simple 容器 VitePress 的 `info`、`tip`、`warning`、`danger` 容器都是 Simple 容器，其原理是添加 `div` 来包裹 Markdown 文本，然后通过 CSS 来实现样式。 举个例子（并非实际） ```markdown 测试 TIP ``` 最终渲染为： ```html <div class="tip" <p
- 1
- 2
- 3
- 4
- 5
共 74 条
站点信息
文章数目83 篇
近一周新增2 篇
近一月新增2 篇
已运行时间293 天
本站总字数198.9k 字
最后活动时间7 时前
本站被访问了Get...
本站曾来访过Get...
序号One
