VuePress 插件常用功能

back-to-top (返回顶部)

该插件会给你的站点添加一个 返回顶部 按钮。当页面向下滚动时，该按钮会显示在页面的右下角，点击它就会滚动到页面顶部。

该插件已经集成到默认主题中。

使用方法

安装

npm i -D @vuepress/plugin-back-to-top@next

配置

import { backToTopPlugin } from '@vuepress/plugin-back-to-top'

export default {
  plugins: [
    backToTopPlugin(),
  ],
}

样式

你可以通过 CSS 变量来自定义 返回顶部 按钮的样式：

:root {
  --back-to-top-z-index: 5;

  --back-to-top-color: #3eaf7c;
  --back-to-top-color-hover: #71cda3;
}

container (自定义容器)

为你的 VuePress 站点注册自定义容器。

该插件简化了 markdown-it-container 的使用方法，但同时也保留了其原本的能力。

默认主题的 自定义容器 就是由该插件支持的

使用方式

安装

npm i -D @vuepress/plugin-container@next

配置

import { containerPlugin } from '@vuepress/plugin-container'

export default {
  plugins: [
    containerPlugin({
      // 配置项
    }),
  ],
}

容器语法

::: <type> [info]
[content]
:::

• type 是必需的，应通过 type 配置项来指定。
• info 是可选的，其默认值可以通过 locales 的 defaultInfo 配置项来指定。
• content 可是任何合法的 Markdown 内容。

Tips

该插件可以被多次使用，以便支持不同类型的容器。

配置项

type

• 类型：string
• 详情：容器的类型。它会被用作 markdown-it-container 的 name 参数

locales

• 类型： Record<string, { defaultInfo: string }>

• 详情：

  容器在不同 locales 下的默认 info 。

  如果没有指定该配置项，默认 info 会使用大写的 type 。

• 示例：

  export default {
    plugins: [
      containerPlugin({
        type: 'tip',
        locales: {
          '/': {
            defaultInfo: 'TIP',
          },
          '/zh/': {
            defaultInfo: '提示',
          },
        },
      }),
    ],
  }

• 参考

  • 指南 > 多语言支持

before

• 类型： (info: string) => string

• 默认值：

  (info: string): string =>
    `<div class="custom-container ${type}">${info ? `<p class="custom-container-title">${info}</p>` : ''}\n`

• 详情：

  一个用于渲染容器起始标签的函数。

  第一个参数是 容器语法 的 info 部分。

  如果你没有设置 after 配置项，则该配置项也不会生效。

after

• 类型： (info: string) => string

• 默认值：

  (): string => '</div>\n'

• 详情：

  一个用于渲染容器结束标签的函数。

  第一个参数是 容器语法 的 info 部分。

  如果你没有设置 before 配置项，则该配置项也不会生效。

render

• 类型：

  type MarkdownItContainerRenderFunction = (
    tokens: Token[],
    index: number,
    options: any,
    env: MarkdownEnv,
    self: Renderer
  ) => string

• 详情：

  markdown-it-container 的 render 配置项。

  该插件使用了一个默认的 render 函数。但如果你指定了该配置项，那么默认的 render 函数就会被替换掉，此时 locales 、 before 和 after 配置项都会被忽略。

validate

• 类型： (params: string) => boolean
• 详情：markdown-it-container 的 validate 配置项

marker

• 类型： string
• 详情：markdown-it-container 的 marker 配置项。

external-link-icon (链接图标)

该插件会为你 Markdown 内容中的外部链接添加一个图标，即 该插件已经集成到默认主题中。

使用方法

安装

npm i -D @vuepress/plugin-external-link-icon@next

配置

import { externalLinkIconPlugin } from '@vuepress/plugin-external-link-icon'

export default {
  plugins: [
    externalLinkIconPlugin({
      // 配置项
    }),
  ],
}

配置项

locales