2022-04-09

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

配置

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

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

配置字段

caniuse

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

  • 类型: false | CanIUsePluginOptions

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

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

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

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

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

externalLinkIcon

关联插件: @vuepress/plugin-external-link-icon

  • 类型: false | string

  • 默认值: ''

  • 详情: 该插件会为你 Markdown 内容中的外部链接添加一个图标,即

    一般来说你不需要对它进行配置

网站内容搜索插件

关联插件: @vuepress/plugin-search

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

  • 默认配置: ''

docsearch

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

关联插件:@vuepress/plugin-docsearch

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

  • 默认配置: ''

提示

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

prismjs

代码块语法高亮插件

关联插件: @vuepress/plugin-prismjs

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

该插件默认仅会在 开发模式下使用,生产模式使用 plugin-shiki

shiki

代码语法高亮插件

关联插件: @vuepress/plugin-shiki

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

该插件默认仅会在 生产模式下使用

nprogress

页面切换时展示进度条。

关联插件: @vuepress/plugin-nprogress

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

copyCode

代码拷贝插件

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

关联插件:vuepress-plugin-copy-code2

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

  • 默认配置:
    module.exports = {
      theme: themePlume({
        themePlugins: {
          copyCode: {
            selector: '.page-content div[class*="language-"] pre',
            locales: {
              '/': {
                copy: '复制成功',
                hint: '复制代码',
              },
            },
          },
        },
      }),
    }
    

markdownEnhance

Markdown 功能扩展插件

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

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

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

  • 默认配置:
    module.exports = {
      theme: themePlume({
        themePlugins: {
          markdownEnhance: {
            container: true, // 自定义容器 info note tip warning danger details
            codegroup: true, // 代码块分组
            align: true, // 自定义对齐
            mark: true, // 标记
            tasklist: true, // 任务列表
            demo: true, // 代码演示
          }
        }
      })
    }
    

comment

评论插件

关联插件: vuepress-plugin-comment2

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

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

  • 默认配置:''