插件

介绍

插件通常会为 VuePress 添加全局功能。

整个插件系统的架构如下:

使用插件

你可以通过在 .vuepress/config.js 中做一些配置来使用插件:

module.exports = {
  plugins: [require("./my-plugin.js")],
};

使用来自依赖的插件

一个插件可以在以 vuepress-plugin-xxx 的形式发布到 npm，你可以这样使用它:

module.exports = {
  plugins: ["vuepress-plugin-xx"],
};

同时，如果你的插件名以 vuepress-plugin- 开头，你可以使用缩写来省略这个前缀:

module.exports = {
  plugins: ["xxx"],
};

和下面等价:

module.exports = {
  plugins: ["vuepress-plugin-xxx"],
};

这也适用于 Scoped Packages (opens new window):

module.exports = {
  plugins: ["@org/vuepress-plugin-xxx", "@vuepress/plugin-xxx"],
};

等价于:

module.exports = {
  plugins: ["@org/xxx", "@vuepress/xxx"],
};

注意

以 @vuepress/plugin- 开头的插件是官方维护的插件。

插件的配置

通过config.js的plugin字段配置。

Babel 式

插件可以通过在配置内的数组中封装名称和选项对象来指定选项:

module.exports = {
  plugins: [
    [
      "vuepress-plugin-xxx",
      {
        /* options */
      },
    ],
  ],
};

由于这种风格和 babeld Plugin/Preset Options (opens new window) 一致，我们称之为"Babel 风格"。

对象式

VuePress 也提供了一种更简单的方式来使用来自依赖的插件:

module.exports = {
  plugins: {
    xxx: {
      /* options */
    },
  },
};

注意

由于某些插件可能存在多个实例，强烈推荐使用babel 风格写法。

提示

可以通过显示地将选项设置成 false 来禁用一个插件:

• Babel 风格

module.exports = {
  plugins: [
    ["xxx", false], // disabled.
  ],
};

• 对象风格

module.exports = {
  plugins: {
    xxx: false, // disabled.
  },
};

官方插件

• active-header-links (opens new window): 页面滚动时自动激活侧边栏链接
• back-to-top (opens new window): 添加返回顶部按钮
• google-analytics (opens new window): 添加 Google analytics
• last-updated (opens new window): 更新时间
• medium-zoom (opens new window): 图片缩放
• nprogress (opens new window): 进度条
• PWA (opens new window): 支持 Progressive Web App
• register-component (opens new window): 注册 components
• search (opens new window): 基于标题的搜索插件

提示

具体用法详见: VuePress 插件 (opens new window)

社区插件

• clean-urls (opens new window): 在 VuePress 中使用简洁链接
• container (opens new window): 在 VuePress 中使用 Markdown 容器
• copyright (opens new window): 在 VuePress 中处理复制行为
• dehydrate (opens new window): 修改 VuePress 生成的 HTML 文件
• git-log (opens new window): 在 VuePress 中整合 git 日志
• mathjax (opens new window): 在 VuePress 中使用 TeX 语法
• migrate (opens new window): 从其他网站迁移到 VuePress
• named-chunks (opens new window): 在 VuePress 中使用命名模块
• redirect (opens new window): 在 VuePress 中处理重定向
• serve (opens new window): 在本地构建静态 VuePress 服务器
• zooming (opens new window): 使 VuePress 中的图片支持缩放(使用 zooming)

提示

文档详见: VuePress 社区 (opens new window)