样式增强
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";
// ...