diff --git a/packages/@vuepress/theme-default/components/NavLink.vue b/packages/@vuepress/theme-default/components/NavLink.vue index c73080abb8..93174cb089 100644 --- a/packages/@vuepress/theme-default/components/NavLink.vue +++ b/packages/@vuepress/theme-default/components/NavLink.vue @@ -3,7 +3,7 @@ class="nav-link" :to="link" @focusout.native="focusoutAction" - v-if="!isExternal(link)" + v-if="isInternal" :exact="exact" >{{ item.text }} {{ item.text }} - + @@ -39,13 +39,42 @@ export default { return Object.keys(this.$site.locales).some(rootLink => rootLink === this.link) } return this.link === '/' + }, + + isNonHttpURI () { + return isMailto(this.link) || isTel(this.link) + }, + + isBlankTarget () { + return this.target === '_blank' + }, + + isInternal () { + return !isExternal(this.link) && !this.isBlankTarget + }, + + target () { + if (this.isNonHttpURI) { + return null + } + if (this.item.target) { + return this.item.target + } + return isExternal(this.link) ? '_blank' : '' + }, + + rel () { + if (this.isNonHttpURI) { + return null + } + if (this.item.rel) { + return this.item.rel + } + return this.isBlankTarget ? 'noopener noreferrer' : '' } }, methods: { - isExternal, - isMailto, - isTel, focusoutAction () { this.$emit('focusout') } diff --git a/packages/docs/docs/theme/default-theme-config.md b/packages/docs/docs/theme/default-theme-config.md index 1b69f64348..0ecc1a4437 100644 --- a/packages/docs/docs/theme/default-theme-config.md +++ b/packages/docs/docs/theme/default-theme-config.md @@ -54,6 +54,20 @@ module.exports = { } ``` +Outbound links automatically get `target="_blank" rel="noopener noreferrer"`. You can offer `target` and `rel` to customize the attributes: + +``` js +// .vuepress/config.js +module.exports = { + themeConfig: { + nav: [ + { text: 'External', link: 'https://google.com', target:'_self', rel:'' }, + { text: 'Guide', link: '/guide/', target:'_blank' } + ] + } +} +``` + These links can also be dropdown menus if you provide an array of `items` instead of a `link`: ```js diff --git a/packages/docs/docs/zh/theme/default-theme-config.md b/packages/docs/docs/zh/theme/default-theme-config.md index 410f2728ba..62e24b37f5 100644 --- a/packages/docs/docs/zh/theme/default-theme-config.md +++ b/packages/docs/docs/zh/theme/default-theme-config.md @@ -48,6 +48,21 @@ module.exports = { ] } } + + +``` +外部链接 `` 标签的特性将默认包含`target="_blank" rel="noopener noreferrer"`,你可以提供 `target` 与 `rel`,它们将被作为特性被增加到 `` 标签上: + +``` js +// .vuepress/config.js +module.exports = { + themeConfig: { + nav: [ + { text: 'External', link: 'https://google.com', target:'_self', rel:'' }, + { text: 'Guide', link: '/guide/', target:'_blank' } + ] + } +} ``` 当你提供了一个 `items` 数组而不是一个单一的 `link` 时,它将显示为一个 `下拉列表` :