Vitepress Theme Teek

主题

Teeker2025-03-08 01:30:12
748
3.1m
0

主题增强 ​

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

布局模式 ​

4 种布局模式分别为：

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

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

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

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

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

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

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

提示

defaultDocMaxWidth 和 defaultPageMaxWidth 的值仅限 0-100。

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

两个区别在于，hidden 只是隐藏该功能，您仍然可以设置其他配置默认值，只是在页面禁止用户手动切换配置。

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

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

主题色板 ​

12 种主题色板分别为 vp-primary、vp-success、vp-warning、vp-danger、tk-primary、tk-success、tk-warning、tk-danger、ep-primary、ep-success、ep-warning、ep-danger。

其中 vp- 开头的使用 VitePress 内置的主题色板，tk- 开头的使用 Teek 的主题色板，ep- 开头的使用 ElementPlus 的主题色板。

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

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

const teekConfig = defineTeekConfig({
  themeEnhance: {
    themeColor: {
      defaultColorName: "ep-primary",
    },
  },
});
  • 如果希望禁用主题色板切换功能，可以设置 themeEnhance.themeColor.disable 为 true
  • 如果希望隐藏主题色板切换功能（不允许用户手动切换），可以设置 themeEnhance.themeColor.hidden 为 true
ts
import { defineTeekConfig } from "vitepress-theme-teek/config";

const teekConfig = defineTeekConfig({
  themeEnhance: {
    themeColor: {
      disable: true,
      // hidden: true,
    },
  },
});

聚光灯 v1.1.0 ​

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

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

const teekConfig = defineTeekConfig({
  themeEnhance: {
    spotlight: {
      defaultValue: true,
    },
  },
});
  • 如果希望禁用藏聚光灯功能，可以设置 themeEnhance.spotlight.disable 为 true
  • 如果希望隐藏藏聚光灯功能（不允许用户手动切换），可以设置 themeEnhance.spotlight.hidden 为 true
ts
import { defineTeekConfig } from "vitepress-theme-teek/config";

const teekConfig = defineTeekConfig({
  themeEnhance: {
    spotlight: {
      disable: true,
      // hidden: true,
    },
  },
});

文档单独配置 ​

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

yaml
---
layoutMode: bothWidthAdjustable
themeColorName: ep-primary
spotlight: false
---

功能参考 ​

最近更新