One

主题

2025-03-19指南指南
713
3.3m
Get...

样式增强 ​

Teek 提供了一些样式文件来加强 VitePress 和 Teek 的样式，比如：

VitePress

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

Teek

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

这些样式文件并不会直接生效，您需要手动引入这些文件。

VitePress 样式增强 ​

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

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-fade-in.scss# 文章页淡入效果├─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/theme-chalk/tk-code-block-mobile.css";import"vitepress-theme-teek/theme-chalk/tk-sidebar.css";import"vitepress-theme-teek/theme-chalk/tk-aside.css";import"vitepress-theme-teek/theme-chalk/tk-nav.css";import"vitepress-theme-teek/theme-chalk/tk-doc-h1-gradient.css";import"vitepress-theme-teek/theme-chalk/tk-doc-fade-in.css";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";import"vitepress-theme-teek/vp-plus/doc-doc-fade-in.scss";├─banner-desc-gradient.scss# 首页 Banner 描述添加渐变效果├─banner-full-img-scale.scss# 首页 Banner 壁纸添加缩放动画

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

ts
import"vitepress-theme-teek/theme-chalk/tk-banner-desc-gradient.css";import"vitepress-theme-teek/theme-chalk/tk-banner-full-img-scale.css";import"vitepress-theme-teek/tk-plus/banner-desc-gradient.scss";import"vitepress-theme-teek/tk-plus/banner-full-img-scale.scss";
版权：此文章版权归 One 所有，如有转载，请注明出处!
链接：可点击右上角分享此页面复制文章链接
在 GitHub 上编辑此页
最近更新