feat($theme-default): Support configuring target and rel for nav links (

close #1353) (#1734)
vuejs · Oct 16, 2019 · 770ba72 · 770ba72
1 parent bc4032d
commit 770ba72
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 7 deletions.
diff --git a/packages/@vuepress/theme-default/components/NavLink.vue b/packages/@vuepress/theme-default/components/NavLink.vue
@@ -3,19 +3,19 @@
     class="nav-link"
     :to="link"
     @focusout.native="focusoutAction"
-    v-if="!isExternal(link)"
+    v-if="isInternal"
     :exact="exact"
   >{{ item.text }}</router-link>
   <a
     v-else
     :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 }}
-    <OutboundLink/>
+    <OutboundLink v-if="isBlankTarget"/>
   </a>
 </template>
 
@@ -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
@@ -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
@@ -48,6 +48,21 @@ module.exports = {
     ]
   }
 }
+
+
+```
+外部链接 `<a>` 标签的特性将默认包含`target="_blank" rel="noopener noreferrer"`，你可以提供 `target` 与 `rel`，它们将被作为特性被增加到 `<a>` 标签上：
+
+``` 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` 时，它将显示为一个 `下拉列表` ：