Vitepress Theme Teek

主题

Teeker2025-03-18
1075
4.9m

样式增强 ​

Teek 提供了一些样式文件来增强 VitePress 和 Teek 的样式。

比如现在看到的一级标题渐变色，如果只是单纯安装 Teek 是不会有这个效果，需要引入 Teek 内置的样式增强文件来实现：

ts
// .vitepress/theme/index.ts
import "vitepress-theme-teek/theme-chalk/tk-doc-h1-gradient.css";

VitePress

  • 首页图片背景添加彩色渐变动画
  • 文章一级标题添加渐变色
  • 侧边栏标题组字号加粗
  • VitePress 内容容器样式增强
  • 导航栏样式增强
  • 侧边栏样式增强
  • ...

Teek

  • 首页 Banner 描述添加渐变效果
  • 首页 Banner 壁纸添加缩放动画
  • 首页卡片悬停效果增强

这些样式增强文件并不会默认开启，而是需要您自行引入来开启。

VitePress 样式增强 ​

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

SCSS 文件如下（可能不全）：

sh
vp-plus.
├─ aside.scss                   # 右侧目栏录文字悬停和激活样式
├─ blockquote.scss              # > 引用块样式
├─ brand-color-animation.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         # 文章一级标题渐变色
├─ index-rainbow.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 组合
├─ scrollbar.scss               # 滚动条样式
├─ sidebar.scss                 # 侧边栏样式
├─ table.scss                   # 表格样式调整，去掉单元格之间的线条

在 .vitepress/theme/index.ts 按需引入（css 文件需要以 tk- 开头）：

ts
// .vitepress/theme/index.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";

// ...

如果您的项目有 scss 依赖，可以直接引入 scss 样式文件：

ts
// .vitepress/theme/index.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";
import "vitepress-theme-teek/vp-plus/doc-doc-fade-in.scss";

// ...

Teek 样式增强 ​

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

样式文件如下（可能不全）：

sh
tk-plus.
├─ banner-desc-gradient.scss        # 首页 Banner 描述添加渐变效果
├─ banner-full-img-scale.scss       # 首页 Banner 壁纸添加缩放动画
├─ fade-up-animation.scss           # 首次进入页面添加渐显动画
├─ home-card-hover.scss             # 首页卡片悬停效果

在 .vitepress/theme/index.ts 按需引入（css 文件需要以 tk- 开头）：

ts
// .vitepress/theme/index.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/theme-chalk/tk-fade-up-animation.css";
import "vitepress-theme-teek/theme-chalk/tk-home-card-hover.css";

// ...

如果您的项目有 scss 依赖，可以直接引入 scss 样式文件：

ts
// .vitepress/theme/index.ts
import "vitepress-theme-teek/tk-plus/banner-desc-gradient.scss";
import "vitepress-theme-teek/tk-plus/banner-full-img-scale.scss";
import "vitepress-theme-teek/tk-plus/fade-up-animation.scss";
import "vitepress-theme-teek/tk-plus/home-card-hover.scss";

// ...

功能增强 ​

复制提示 v1.5.0 ​

Teek 提供 复制提示 功能，当复制文本时，会在顶部添加一些提示语，在 .vitepress/theme/index.ts 中引入并使用：

ts
// .vitepress/theme/index.ts
import Teek, { useCopyBanner } from "vitepress-theme-teek";
import "vitepress-theme-teek/index.css";

export default {
  extends: Teek,
  Layout: TeekLayoutProvider,
  setup: () => {
    // 使用复制提示功能（默认配置）
    useCopyBanner();

    /**
     * 配置方式，可自定义提示语
     *
     * 1. 提示语。默认:复制成功，复制和转载请标注本文地址
     * 2. 显示的持续时间(毫秒)，默认 3000
     */
    // useCopyBanner("复制成功", 4000);
  },
};
最近更新