From 2680b5ac875e0732ca5ef3bd23b0f86232e54b4b Mon Sep 17 00:00:00 2001 From: Billyyyyy3320 Date: Thu, 1 Aug 2019 22:23:46 +0800 Subject: [PATCH 1/4] feat($theme-default): support nav config for attr of external links fix #1353 --- .../theme-default/components/NavLink.vue | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/packages/@vuepress/theme-default/components/NavLink.vue b/packages/@vuepress/theme-default/components/NavLink.vue index c73080abb8..73872880a2 100644 --- a/packages/@vuepress/theme-default/components/NavLink.vue +++ b/packages/@vuepress/theme-default/components/NavLink.vue @@ -11,11 +11,11 @@ :href="link" @focusout="focusoutAction" class="nav-link external" - :target="isMailto(link) || isTel(link) ? null : '_blank'" - :rel="isMailto(link) || isTel(link) ? null : 'noopener noreferrer'" + :target="target" + :rel="rel" > {{ item.text }} - + @@ -39,6 +39,18 @@ export default { return Object.keys(this.$site.locales).some(rootLink => rootLink === this.link) } return this.link === '/' + }, + + target () { + return isMailto(this.link) || isTel(this.link) ? null : this.item.target || '_blank' + }, + + isTargetBlank () { + return this.target === '_blank' + }, + + rel () { + return isMailto(this.link) || isTel(this.link) ? null : this.item.rel || 'noopener noreferrer' } }, From e8f91f8454528c9aabf9df500ef9ce6f115c3ab4 Mon Sep 17 00:00:00 2001 From: Billyyyyy3320 Date: Thu, 1 Aug 2019 23:52:12 +0800 Subject: [PATCH 2/4] docs: support nav config for attr of external links --- packages/docs/docs/theme/default-theme-config.md | 13 +++++++++++++ .../docs/docs/zh/theme/default-theme-config.md | 14 ++++++++++++++ 2 files changed, 27 insertions(+) diff --git a/packages/docs/docs/theme/default-theme-config.md b/packages/docs/docs/theme/default-theme-config.md index 1b69f64348..04d0bcd48c 100644 --- a/packages/docs/docs/theme/default-theme-config.md +++ b/packages/docs/docs/theme/default-theme-config.md @@ -54,6 +54,19 @@ 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:'' }, + ] + } +} +``` + 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..cf23c45a6f 100644 --- a/packages/docs/docs/zh/theme/default-theme-config.md +++ b/packages/docs/docs/zh/theme/default-theme-config.md @@ -48,6 +48,20 @@ 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:'' }, + ] + } +} ``` 当你提供了一个 `items` 数组而不是一个单一的 `link` 时，它将显示为一个 `下拉列表` ： From 9eee190cab713eb62154f499270283fd1a0ac55f Mon Sep 17 00:00:00 2001 From: Billyyyyy3320 Date: Fri, 11 Oct 2019 11:43:20 +0800 Subject: [PATCH 3/4] feat($theme-default): support nav config for attr of internal links --- .../theme-default/components/NavLink.vue | 15 +++++++++------ packages/docs/docs/theme/default-theme-config.md | 1 + .../docs/docs/zh/theme/default-theme-config.md | 1 + 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/@vuepress/theme-default/components/NavLink.vue b/packages/@vuepress/theme-default/components/NavLink.vue index 73872880a2..b8517b1eaa 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 }} Date: Sat, 12 Oct 2019 17:21:27 +0800 Subject: [PATCH 4/4] refactor($theme-default): improve code readability --- .../theme-default/components/NavLink.vue | 34 +++++++++++++------ 1 file changed, 24 insertions(+), 10 deletions(-) diff --git a/packages/@vuepress/theme-default/components/NavLink.vue b/packages/@vuepress/theme-default/components/NavLink.vue index b8517b1eaa..93174cb089 100644 --- a/packages/@vuepress/theme-default/components/NavLink.vue +++ b/packages/@vuepress/theme-default/components/NavLink.vue @@ -15,7 +15,7 @@ :rel="rel" > {{ item.text }} - + @@ -41,22 +41,36 @@ export default { return this.link === '/' }, - target () { - return isMailto(this.link) || isTel(this.link) ? null : this.item.target - || (isExternal(this.link) ? '_blank' : '') + isNonHttpURI () { + return isMailto(this.link) || isTel(this.link) }, - isTargetBlank () { + isBlankTarget () { return this.target === '_blank' }, - rel () { - return isMailto(this.link) || isTel(this.link) ? null : this.item.rel - || (this.isTargetBlank ? 'noopener noreferrer' : '') + isInternal () { + return !isExternal(this.link) && !this.isBlankTarget }, - isInternal () { - return !isExternal(this.link) && !this.isTargetBlank + 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' : '' } },