约 780 字大约 3 分钟

2022-04-09

主题内置的使用的插件,扩展了主题的众多功能,你可以在这个 字段中, 实现对内部使用的各个插件的自定义配置。

配置

所有主题内部使用的插件, 均在 plugins 字段中进行配置。

import { themePlume } from 'vuepress-theme-plume'
module.exports = {
  theme: themePlume({
    plugins: {
      // this
    }
  })
}

内置插件

caniuse

关联插件: @vuepress-plume/plugin-caniuse

  • 类型: false | CanIUsePluginOptions

  • 默认值: { mode: 'embed' }

  • 详情:该插件支持在你的文章中嵌入 can I use 特性支持图表。

    设置为 false 表示不启动该插件。

    • caniuse.mode: 图表嵌入模式, embed表示嵌入可交互式的图表, image 嵌入动态图片。
  • 配置示例:

    module.exports = {
      theme: themePlume({
        plugins: {
          caniuse: {
            mode: 'embed'
          },
        },
      }),
    }

网站内容搜索插件

关联插件: @vuepress/plugin-search

详细介绍与配置,请查阅 官方文档

  • 默认配置: ''

docsearch

使用 Algolia DocSearch 提供支持的网站内容搜索插件

关联插件:@vuepress/plugin-docsearch

详细介绍与配置,请查阅 官方文档

  • 默认配置: ''

提示

请勿 同时配置 searchdocsearch ,两者的功能是类似的,且同时配置仅会优先使用 search

shiki

代码语法高亮插件, 支持 亮/暗 双模式,同时还支持 highlight、diff、focus、error level 等。

关联插件: @vuepress-plume/plugin-shikiji

提示

不选择使用 prismjsshiki 的原因是,它们在实现 代码高亮 亮/暗 双模式时, 需要生成双份代码块的 html内容,可能导致页面体积过大。

而选择 shikiji 会仅生成单份代码块的 html 内容,通过 CSS 变量来控制代码块的高亮颜色。 同时,shikiji 还支持更丰富的功能。

[2023-12-31]: shikiji 已与 shiki 合并,正式更名为 shiki,因此,插件也更名使用 shiki

默认配置:

export default {
  theme: themePlume({
    plugins: {
      shiki: {
        theme: { light: 'vitesse-light', dark: 'vitesse-dark' }
      }
    }
  })
}

copyCode

代码拷贝插件

支持在代码块中进行代码复制

关联插件:@vuepress-plume/plugin-copy-code

  • 默认配置:
    export default {
      theme: themePlume({
        plugins: {
          copyCode: {
            selector: '.page-content div[class*="language-"] pre',
          },
        },
      }),
    }

markdownEnhance

Markdown 功能扩展插件

关联插件:vuepress-plugin-md-enhance

扩展支持:自定义容器、代码块分组、上下角标、自定义对齐、脚注、标记、任务列表、chart、流程图、代码演示 等功能。

相关介绍及配置,请查阅 官方文档

  • 默认配置:
    export default {
      theme: themePlume({
        plugins: {
          markdownEnhance: {
            hint: true, // 自定义容器 info note tip warning caution details important
            codegroup: true, // 代码块分组
            align: true, // 自定义对齐
            mark: true, // 标记
            tasklist: true, // 任务列表
            demo: true, // 代码演示
          }
        }
      })
    }

comment

评论插件

关联插件: vuepress-plugin-comment2

支持使用 giscustwikoowaline 启用评论功能。

相关介绍及配置,请查阅 官方文档

  • 默认配置:''

baiduTongji

百度统计插件

关联插件: vuepress-plume/plugin-baidu-tongji

  • type: false | { key: string }
  • 默认配置:false