external-link-icon

@vuepress/plugin-external-link-icon

This plugin will add a icon to the external link in your markdown content, i.e. open in new window

This plugin has been integrated into the default theme.

Install

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

Options

locales

  • Type: Record<string, { openInNewWindow: string }>

  • Details:

    The a11y text of the external link icon in different locales.

    If this option is not specified, it will fallback to default text.

  • Example:

module.exports = {
  plugins: [
    [
      '@vuepress/plugin-external-link-icon',
      {
        locales: {
          '/': {
            openInNewWindow: 'open in new window',
          },
          '/zh/': {
            openInNewWindow: '在新窗口打开',
          },
        },
      },
    ],
  ],
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Frontmatter

externalLinkIcon

  • Type: boolean

  • Details:

    Whether to append an external link icon to external links in current page.

Styles

You can customize the style of the external link icon via CSS variables:

:root {
  --external-link-icon-color: #aaa;
}
1
2
3

Components

ExternalLinkIcon

  • Details:

    This plugin will register a <ExternalLinkIcon /> component globally, and you can use it without any props.

TIP

This component is mainly used for theme development. You don't need to use it directly in most cases.