Skip to content

Commit 69c2e94

Browse files
Kele-BingtangKele-Bingtang
committed
feat: 🚀 新增文档说明，优化变量命名
1 parent 37f4563 commit 69c2e94

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+1270
-302
lines changed

‎demo/docs-base/.vitepress/config.mts

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { defineConfig } from "vitepress";
2-
import tkThemeConfig from "vitepress-theme-teek/config";
2+
import { defineTeekConfig } from "vitepress-theme-teek/config";
33
import timeline from "vitepress-markdown-timeline"; // 导入时间线插件
44

55
const description = ["Hd Security 使用文档", "认证框架"].toString();
66

7-
const tkConfig = tkThemeConfig({
7+
const tkConfig = defineTeekConfig({
88
author: { name: "Teeker", link: "https://github.com/Kele-Bingtang" },
99
blogger: {
1010
// 博主信息，显示在首页侧边栏
@@ -21,7 +21,7 @@ const tkConfig = tkThemeConfig({
2121
wordCount: true,
2222
readingTime: true,
2323
overrideInfo: [
24-
{ key: "lastActiveTime", value: (_, currentValue) => `${currentValue}前` },
24+
{ key: "lastActiveTime", value: (_, currentValue) => (currentValue + "").replace("前", "") },
2525
{ key: "totalPosts", label: "文章总数目" },
2626
],
2727
appendInfo: [{ key: "index", label: "序号", value: "天客 99" }],

‎demo/docs-locales-root/.vitepress/locales/shared.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { defineConfig } from "vitepress";
2-
import tkThemeConfig from "vitepress-theme-teek/config";
2+
import { defineTeekConfig } from "vitepress-theme-teek/config";
33

4-
const tkConfig = tkThemeConfig({
4+
const tkConfig = defineTeekConfig({
55
author: { name: "Teeker", link: "https://github.com/Kele-Bingtang" },
66
blogger: {
77
// 博主信息，显示在首页侧边栏

‎demo/docs-locales/.vitepress/locales/shared.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { defineConfig } from "vitepress";
2-
import tkThemeConfig from "vitepress-theme-teek/config";
2+
import { defineTeekConfig } from "vitepress-theme-teek/config";
33

4-
const tkConfig = tkThemeConfig({
4+
const tkConfig = defineTeekConfig({
55
author: { name: "Teeker", link: "https://github.com/Kele-Bingtang" },
66
blogger: {
77
// 博主信息，显示在首页侧边栏

‎docs/.vitepress/config.mts

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { defineConfig } from "vitepress";
2-
import tkThemeConfig from "vitepress-theme-teek/config";
2+
import { defineTeekConfig } from "vitepress-theme-teek/config";
3+
import { version } from "vitepress-theme-teek/es/version";
34

45
const description = ["vitepress-theme-teek 使用文档", "vitepress 主题框架"].toString();
56

6-
const tkConfig = tkThemeConfig({
7+
const tkConfig = defineTeekConfig({
78
author: { name: "Teeker", link: "https://github.com/Kele-Bingtang" },
89
footerInfo: {
910
copyright: {
@@ -101,11 +102,11 @@ export default defineConfig({
101102
items: [
102103
{ text: "Helper", link: "/ecosystem/helper" },
103104
{ text: "Hooks", link: "/ecosystem/hooks" },
104-
{ text: "MD Plugin Utils", link: "/ecosystem/md-plugin-utils" },
105+
{ text: "Markdown 插件工具", link: "/ecosystem/md-plugin-utils" },
105106
],
106107
},
107108
{
108-
text: "v1.0.0-alpha.0",
109+
text: version,
109110
items: [
110111
{ text: "历史版本", link: "https://github.com/Kele-Bingtang/vitepress-theme-teek/release" },
111112
{ text: "更新日志", link: "https://github.com/Kele-Bingtang/vitepress-theme-teek/blob/dev/CHANGELOG.md" },

‎docs/01.指南/01.简介/01.简介.md

+29-9
Original file line numberDiff line numberDiff line change
@@ -47,16 +47,36 @@ Teek 是一个基于 Vitepress 构建的主题，是在默认主题的基础上
4747

4848
## 拓展功能
4949

50-
相较于 Vitepress，Teek 添加了以下功能：
50+
相较于 Vitepress 主题，Teek 主要实现了博客风格的功能，部分功能也兼容文档风格，您现在正在阅读的是 Teek 的文档风格。
51+
52+
> 全局
5153
5254
- 侧边栏自动生成，根据目录自动生成侧边栏，无需手动配置
53-
- 提供目录页，根据 Markdown 文件路径自动生成目录
55+
- 提供目录页，根据 `Markdown` 文件路径自动生成目录
5456
- 自动生成 `frontmatter`，并且支持拓展 `frontmatter` 格式
5557
- 自动生成一级标题
56-
- 添加博客风格功能：Banner 背景图、全站背景图、打印或切换个性签名、文章列表、文章信息（作者、创建时间、标签、分类、字数、阅读时长）、面包屑、博主信息栏、热门文章栏、分类栏 + 分类页、标签栏 + 标签页、友情链接栏、站点信息栏、归档页、评论区等，且持 Vitepress 的国际化功能
57-
- 实现 Markdown 插件：多个 Markdown 容器、TODO 列表
58-
- 代码块 UI 升级，支持一键折叠/展开
59-
- 多个主题尺寸、主题风格选择，且支持自定义扩展新的尺寸和模式
60-
- 提供全屏壁纸模式，该模式只保留 Banner 背景图或全站背景图，禁止滚动、打开开发者工具、右键功能
61-
- 文章页 UI 支持切换书页风格（整体卡片化、片段卡片化）
62-
- ......
58+
- 全站背景图片
59+
- 自定义布局：分类页、标签页、归档页
60+
- `Markdown` 拓展：居中、居右容器、卡片容器、`Demo` 容器、`TODO` 列表
61+
- 主题多元化：4 种主题尺寸、8 种主题风格选择，且支持自定义扩展新的尺寸和模式
62+
- ...
63+
64+
> 首页
65+
66+
- `Banner` 功能：提供 3 种风格选择：局部背景色、局部图片、全屏图片，提供打印个性签名、切换个性签名选择，提供 `feature` 功能
67+
- 文章列表：展示文章标题、封面图、作者、创建时间、更新时间、标签、分类
68+
- 博客卡片栏：博主信息栏、热门文章栏、分类栏、标签栏、友情链接栏、站点信息栏
69+
- 全屏壁纸模式：只保留 Banner 背景图片或全站背景图片，且禁止滚动、打开开发者工具、右键功能
70+
- 页脚：展示社交图标、版权信息、备案信息、自定义信息
71+
- ...
72+
73+
> 文章页
74+
75+
- 文章信息：展示面包屑、作者、创建时间、更新时间、标签、分类、字数、阅读时长
76+
- 评论区：供 `Giscus`、`Twikoo`、`Waline`、`Artalk` 四种评论提供商选择
77+
- 代码块：UI 升级，支持一键折叠/展开
78+
- 文章页风格书页化：提供 3 种风格选择：Vitepress 原生、整体卡片化、片段卡片化
79+
- ...
80+
81+
82+
除了上述功能，Teek 也提供了 `CSS` 文件来增强 Vitepress 的样式。

‎docs/01.指南/01.简介/15.部署.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
title: 部署
3+
date: 2025-03-30 17:40:51
4+
permalink: /guide/destroy
5+
---
6+
7+
待补充...

‎docs/01.指南/01.简介/15.结构化目录.md renamed to ‎docs/01.指南/01.简介/20.结构化目录.md

File renamed without changes.

‎docs/01.指南/10.使用/20.样式增强.md

+28-3
Original file line numberDiff line numberDiff line change
@@ -34,20 +34,34 @@ vp-plus.
3434
├─ container-left.scss # 容器左侧框样式
3535
├─ container-var.scss # 容器 css var 变量
3636
├─ container.scss # container-bg + container-icon + container-var 组合
37-
├─ doc-h1-gradient.scss # 文章一级标题样式
37+
├─ doc-h1-gradient.scss # 文章一级标题样式
3838
├─ mark.scss # 文章内容标记样式（mark 标签）
3939
├─ nav-blur.scss # 导航栏毛玻璃样式
4040
├─ nav-search-button.scss # 导航栏搜索按钮样式
4141
├─ nav-switch-button.scss # 导航栏深色、浅色模式切换按钮样式
4242
├─ nav-translation.scss # 导航栏国际化下拉样式
4343
├─ nav.scss # nav-search-button + nav-switch-button + nav-translation 组合
44-
├─ index-rainbow.scss # 首页彩虹渐变动画样式
44+
├─ index-rainbow.scss # 首页彩虹渐变动画样式
4545
├─ sidebar.scss # 侧边栏样式
4646
```
4747

48-
需要在 `.vitepress/theme/index.ts` 引入：
48+
在 `.vitepress/theme/index.ts` 引入：
49+
50+
```ts
51+
// .vitepress/theme/index.ts
52+
import "vitepress-theme-teek/theme-chalk/tk-code-block-mobile.css";
53+
import "vitepress-theme-teek/theme-chalk/tk-sidebar.css";
54+
import "vitepress-theme-teek/theme-chalk/tk-aside.css";
55+
import "vitepress-theme-teek/theme-chalk/tk-nav.css";
56+
import "vitepress-theme-teek/theme-chalk/tk-doc-h1-gradient.css";
57+
58+
// ...
59+
```
60+
61+
如果您的项目有 `scss` 依赖，可以直接引入 SCSS 文件：
4962

5063
```ts
64+
// .vitepress/theme/index.ts
5165
import "vitepress-theme-teek/vp-plus/code-block-mobile.scss";
5266
import "vitepress-theme-teek/vp-plus/sidebar.scss";
5367
import "vitepress-theme-teek/vp-plus/aside.scss";
@@ -72,6 +86,17 @@ tk-plus.
7286
需要在 `.vitepress/theme/index.ts` 引入：
7387

7488
```ts
89+
// .vitepress/theme/index.ts
90+
import "vitepress-theme-teek/theme-chalk/tk-banner-desc-gradient.css";
91+
import "vitepress-theme-teek/theme-chalk/tk-banner-full-img-scale.css";
92+
93+
// ...
94+
```
95+
96+
如果您的项目有 `scss` 依赖，可以直接引入 SCSS 文件：
97+
98+
```ts
99+
// .vitepress/theme/index.ts
75100
import "vitepress-theme-teek/tk-plus/banner-desc-gradient.scss";
76101
import "vitepress-theme-teek/tk-plus/banner-full-img-scale.scss";
77102

‎docs/01.指南/40.开发/01.开发指南.md

+17-2
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,13 @@ git clone https://gitee.com/kele-bingtang/vitepress-theme-teek.git
4242
pnpm install
4343
```
4444

45+
## Teek 本地包构建
46+
47+
```bash
48+
pnpm to:theme stub
49+
```
50+
51+
4552
## 文档网站预览
4653

4754
```sh
@@ -60,8 +67,16 @@ pnpm czp # 提交远程
6067
如果需要分次提交，可以先执行 `git add ./x/x`，再执行 `pnpm run git-cz`，最后执行 `git push origin dev`（或者其他分支）。
6168
:::
6269

63-
## 组件打包
70+
## Teek 打包
71+
72+
先构建 build 本地包
73+
74+
```bash
75+
pnpm to:build stub
76+
```
77+
78+
最后执行打包
6479

6580
```sh
66-
pnpm stub
81+
pnpm build
6782
```

‎docs/10.配置/01.主题配置/20.卡片栏配置.md

+6-1
Original file line numberDiff line numberDiff line change
@@ -568,7 +568,12 @@ const teekConfig = defineTeekConfig({
568568
pageIteration: 2000,
569569
},
570570
overrideInfo: [
571-
{ key: "lastActiveTime", label: "活跃时间", value: (_, currentValue) => `${currentValue}前`, show: true },
571+
{
572+
key: "lastActiveTime",
573+
label: "活跃时间",
574+
value: (_, currentValue) => (currentValue + "").replace("前", ""),
575+
show: true,
576+
},
572577
],
573578
appendInfo: [{ key: "index", label: "序号", value: "天客 99" }],
574579
},

‎docs/10.配置/01.主题配置/35.评论配置.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ permalink: /reference/comment-config
66

77
## comment
88

9-
评论配置，目前内置 `giscus`、`twikoo`、`waline`、`artalk` 四种评论插件。
9+
评论配置，目前内置 `Giscus`、`Twikoo`、`Waline`、`Artalk` 四种评论插件。
1010

1111
支持在文章页的 `frontmatter` 配置 `comment.[key]`。
1212

@@ -244,7 +244,7 @@ pnpm add -D artalk
244244

245245
然后在 `.vitepress/theme/index.ts` 里面注入评论区的实例。
246246

247-
```ts {4-8,19-30}
247+
```ts {1,4-8,19-30}
248248
// .vitepress/theme/index.ts
249249
import Teek, { artalkSymbol, giscusSymbol, walineSymbol } from "vitepress-theme-teek";
250250
import "vitepress-theme-teek/index.css";

‎docs/15.主题开发/20.目录结构.md

-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ helper.
2727
├─ index.ts # 工具函数入口文件，导出了所有的工具函数
2828
├─ date.ts # 日期格式化函数
2929
├─ is.ts # 判断类型函数，如 isString、isFunction 等
30-
├─ scrollTo.ts # 滚动到指定页面位置函数
3130
├─ util.ts # 基础工具函数
3231
```
3332

‎docs/15.主题开发/30.组件布局.md

+3
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,7 @@ src
109109
│ ├─ CommentGiscus # Giscus 评论区组件
110110
│ ├─ CommentTwikoo # Twikoo 评论区组件
111111
│ ├─ CommentWaline # Waline 评论区组件
112+
│ ├─ DemoCode # Demo 容器组件
112113
│ ├─ Footer # 底部组件
113114
│ ├─ Home # 首页组件
114115
│ ├─ HomeBanner # 首页 Banner 组件
@@ -127,6 +128,8 @@ src
127128
│ ├─ Notice # 公告组件
128129
│ ├─ Pagination # 分页组件
129130
│ └─ RightBottomButton # 右下角按钮组组件
131+
│ └─ TransitionCollapse # 折叠动画组件
132+
│ └─ VpContainer # Vitepress 容器组件
130133
```
131134

132135
Vitepress 从 `src/index.ts`（入口文件）解析 `Layout` 函数，该函数返回 `src/layout.index.vue` 组件（入口组件），该入口组件将 Teek 的各个功能组件派发到 Vitepress 不同的插槽，最终形成现在的 Teek 主题。

‎docs/15.主题开发/60.容器自定义.md

+2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ Teek 提供了两种创建容器的 API，这两种容器 Teek 分别命名为 S
88

99
Teek 容器都有哪些？请看 [Markdown 拓展](/guide/markdown)。
1010

11+
容器 API 请看 [Markdown 插件工具](/ecosystem/md-plugin-utils)
12+
1113
## Simple 容器
1214

1315
Vitepress 的 `info`、`tip`、`warning`、`danger` 容器都是 Simple 容器，其原理是添加 `div` 来包裹 Markdown 文本，然后通过 CSS 来实现样式。

‎docs/15.主题开发/70.开发技巧.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: 开发技巧
3-
date:
3+
date: 2025-03-30 14:19:33
44
permalink: /develop/skill
55
---
66

0 commit comments

Comments
 (0)