Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat($theme-default): Support configuring target and rel for nav links (
close #1353) (#1734)
  • Loading branch information
billyyyyy3320 authored and kefranabg committed Oct 16, 2019
1 parent bc4032d commit 770ba72
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 7 deletions.
43 changes: 36 additions & 7 deletions packages/@vuepress/theme-default/components/NavLink.vue
Expand Up @@ -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>

Expand All @@ -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')
}
Expand Down
14 changes: 14 additions & 0 deletions packages/docs/docs/theme/default-theme-config.md
Expand Up @@ -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
Expand Down
15 changes: 15 additions & 0 deletions packages/docs/docs/zh/theme/default-theme-config.md
Expand Up @@ -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` 时,它将显示为一个 `下拉列表`
Expand Down

0 comments on commit 770ba72

Please sign in to comment.