Skip to content

样式增强

Teek 提供了一些 SCSS 文件来加强 Vitepress 和 Teek 的样式,比如:

Vitepress

文档风格首页添加彩色渐变动画、文章一级标题添加渐变色、Banner 描述添加渐变效果、侧边栏标题组字号加粗等。

Teek

首页 Banner 描述添加渐变效果、首页 Banner 壁纸添加缩放动画等

这些 SCSS 文件并不会直接生效,您需要手动引入这些文件。

Vitepress 样式增强

vp-plus 目录下查看所有的 SCSS 样式增强文件内容。

SCSS 文件如下(可能不全):

sh
vp-plus.
├─ aside.scss                   # 文章页目录栏样式
├─ blockquote.scss              # 引用块样式
├─ code-block-mobile.scss       # 代码块移动端样式
├─ container-bg.scss            # 容器背景样式更改,内置 container-var
├─ container-flow.scss          # container-fluid + container-icon 组合
├─ container-fluid.scss         # 容器流体样式
├─ container-icon.scss          # 容器 ICON 样式
├─ container-left.scss          # 容器左侧框样式
├─ container-var.scss           # 容器 css var 变量
├─ container.scss               # container-bg + container-icon + container-var 组合
├─ doc-h1-gradient.scss                  # 文章一级标题样式
├─ mark.scss                    # 文章内容标记样式(mark 标签)
├─ nav-blur.scss                # 导航栏毛玻璃样式
├─ nav-search-button.scss       # 导航栏搜索按钮样式
├─ nav-switch-button.scss       # 导航栏深色、浅色模式切换按钮样式
├─ nav-translation.scss         # 导航栏国际化下拉样式
├─ nav.scss                     # nav-search-button  + nav-switch-button + nav-translation 组合
├─ index-rainbow.scss                 # 首页彩虹渐变动画样式
├─ sidebar.scss                 # 侧边栏样式

需要在 .vitepress/theme/index.ts 引入:

ts
import "vitepress-theme-teek/vp-plus/code-block-mobile.scss";
import "vitepress-theme-teek/vp-plus/sidebar.scss";
import "vitepress-theme-teek/vp-plus/aside.scss";
import "vitepress-theme-teek/vp-plus/nav.scss";
import "vitepress-theme-teek/vp-plus/doc-h1-gradient.scss";

// ...

Teek 样式增强

tk-plus 目录下查看所有的 SCSS 样式增强文件内容。

SCSS 文件如下(可能不全):

sh
tk-plus.
├─ banner-desc-gradient.scss        # 首页 Banner 描述添加渐变效果
├─ banner-full-img-scale.scss       # 首页 Banner 壁纸添加缩放动画

需要在 .vitepress/theme/index.ts 引入:

ts
import "vitepress-theme-teek/tk-plus/banner-desc-gradient.scss";
import "vitepress-theme-teek/tk-plus/banner-full-img-scale.scss";

// ...