主题增强

Teek 内置了 4 种布局模式、8 种主题风格可供切换，请将鼠标移到右上角的主题增强面板进行体验。

布局模式

4 种布局模式分别为：

• fullWidth：全部展开，使侧边栏和内容区域占据整个屏幕的全部宽度
• sidebarWidthAdjustableOnly：全部展开，侧边栏宽度可调，但内容区域宽度不变，调整后的侧边栏将可以占据整个屏幕的最大宽度
• bothWidthAdjustable：全部展开，侧边栏和内容区域宽度均可调，调整后的侧边栏和内容区域将可以占据整个屏幕的最大宽度
• original：原始的 VitePress 默认布局宽度

可以通过主题配置的 themeEnhance.layoutSwitch.defaultMode 来覆盖默认值，默认为 original。

import { defineTeekConfig } from "vitepress-theme-teek/config";

const teekConfig = defineTeekConfig({
  themeEnhance: {
    layoutSwitch: {
      defaultMode: "bothWidthAdjustable",
    },
  },
});

当处于 bothWidthAdjustable 布局模式下，您可以控制默认的页面最大宽度和内容最大宽度。

import { defineTeekConfig } from "vitepress-theme-teek/config";

const teekConfig = defineTeekConfig({
  themeEnhance: {
    layoutSwitch: {
      defaultMode: "bothWidthAdjustable",
      defaultDocMaxWidth: 90,
      defaultPageMaxWidth: 90,
    },
  },
});

提示

defaultDocMaxWidth 和 defaultPageMaxWidth 的值仅限 0-100。

如果希望隐藏布局模式切换功能（不允许用户手动切换），可以设置 themeEnhance.layoutSwitch.disabled 为 true：

import { defineTeekConfig } from "vitepress-theme-teek/config";

const teekConfig = defineTeekConfig({
  themeEnhance: {
    layoutSwitch: {
      disabled: true,
    },
  },
});

主题风格

8 种主题风格分别为 vp-default、vp-green、vp-yellow、vp-red、ep-blue、ep-green、ep-yellow、ep-red。

其中 vp- 开头的使用 VitePress 内置的颜色，ep- 开头的使用 ElementPlus 的颜色。

可以通过主题配置的 themeEnhance.themeColor.defaultColor 来覆盖默认值，默认为 vp-default。

import { defineTeekConfig } from "vitepress-theme-teek/config";

const teekConfig = defineTeekConfig({
  themeEnhance: {
    themeColor: {
      defaultColor: "ep-blue",
    },
  },
});

如果希望隐藏主题风格切换功能（不允许用户手动切换），可以设置 themeEnhance.themeColor.disabled 为 true：

import { defineTeekConfig } from "vitepress-theme-teek/config";

const teekConfig = defineTeekConfig({
  themeEnhance: {
    themeColor: {
      disabled: true,
    },
  },
});

聚光灯 v1.1.0

可以通过主题配置的 themeEnhance.spotlight.defaultValue 来覆盖默认值，默认为 true。

import { defineTeekConfig } from "vitepress-theme-teek/config";

const teekConfig = defineTeekConfig({
  themeEnhance: {
    spotlight: {
      defaultValue: true,
    },
  },
});

如果希望隐藏聚光灯功能（不允许用户手动切换），可以设置 themeEnhance.spotlight.disabled 为 true：

import { defineTeekConfig } from "vitepress-theme-teek/config";

const teekConfig = defineTeekConfig({
  themeEnhance: {
    spotlight: {
      disabled: true,
    },
  },
});

文档单独配置

Teek 支持在 Markdown 的 frontmatter 单独进行如下配置来覆盖全局的设置。

---
layoutMode: bothWidthAdjustable
themeColor: ep-blue
spotlight: false
---

功能参考

• 阅读增强