diff --git a/docs/config/theme-config.md b/docs/config/theme-config.md index 96c9fdd2..43dfc4b7 100644 --- a/docs/config/theme-config.md +++ b/docs/config/theme-config.md @@ -87,15 +87,22 @@ export default { ```ts type NavItem = NavItemWithLink | NavItemWithChildren -type NavItemWithLink = { +interface NavItemWithLink { text: string link: string activeMatch?: string + target?: string + rel?: string } -interface NavItemWithChildren { +interface NavItemChildren { text?: string items: NavItemWithLink[] +} + +interface NavItemWithChildren { + text?: string + items: (NavItemChildren | NavItemWithLink)[] activeMatch?: string } ``` diff --git a/docs/guide/theme-nav.md b/docs/guide/theme-nav.md index 784f5dc7..2c82d649 100644 --- a/docs/guide/theme-nav.md +++ b/docs/guide/theme-nav.md @@ -138,6 +138,25 @@ export default { `activeMatch` is expected to be a regex string, but you must define it as a string. We can't use actual RegExp object here because it isn't serializable during the build time. ::: +### Customize link's "target" and "rel" attributes + +By default, VitePress automatically determines `target` and `rel` attributes based on whether the link is an external link. But if you want, you can customize them too. + +```js +export default { + themeConfig: { + nav: [ + { + text: 'Merchandise', + link: 'https://www.thegithubshop.com/', + target: '_self', + rel: 'sponsored' + } + ] + } +} +``` + ## Social Links Refer [`socialLinks`](../config/theme-config#sociallinks). diff --git a/src/client/theme-default/components/VPLink.vue b/src/client/theme-default/components/VPLink.vue index f10bff04..6033a7be 100644 --- a/src/client/theme-default/components/VPLink.vue +++ b/src/client/theme-default/components/VPLink.vue @@ -8,6 +8,8 @@ const props = defineProps<{ tag?: string href?: string noIcon?: boolean + target?: string + rel?: string }>() const tag = computed(() => props.tag ?? props.href ? 'a' : 'span') @@ -20,8 +22,8 @@ const isExternal = computed(() => props.href && EXTERNAL_URL_RE.test(props.href) class="VPLink" :class="{ link: href }" :href="href ? normalizeLink(href) : undefined" - :target="isExternal ? '_blank' : undefined" - :rel="isExternal ? 'noreferrer' : undefined" + :target="target || (isExternal ? '_blank' : undefined)" + :rel="rel || (isExternal ? 'noreferrer' : undefined)" > diff --git a/src/client/theme-default/components/VPMenuLink.vue b/src/client/theme-default/components/VPMenuLink.vue index 909d233e..a4176608 100644 --- a/src/client/theme-default/components/VPMenuLink.vue +++ b/src/client/theme-default/components/VPMenuLink.vue @@ -1,10 +1,11 @@