feat(theme): support custom target and rel in navbar links (#1993)

Co-authored-by: Kev1nzh37 <[email protected]>

Author: brc-dd

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
 }
 ```

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).

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)"
   >
     <slot />
     <VPIconExternalLink v-if="isExternal && !noIcon" class="icon" />

src/client/theme-default/components/VPMenuLink.vue

@@ -1,10 +1,11 @@
 <script lang="ts" setup>
+import type { DefaultTheme } from 'vitepress/theme'
 import { useData } from '../composables/data.js'
 import { isActive } from '../support/utils.js'
 import VPLink from './VPLink.vue'
 
 defineProps<{
-  item: any
+  item: DefaultTheme.NavItemWithLink
 }>()
 
 const { page } = useData()
@@ -15,6 +16,8 @@ const { page } = useData()
     <VPLink 
       :class="{ active: isActive(page.relativePath, item.activeMatch || item.link, !!item.activeMatch) }"
       :href="item.link"
+      :target="item.target"
+      :rel="item.rel"
     >
       {{ item.text }}
     </VPLink>

src/client/theme-default/components/VPNavBarMenuLink.vue

@@ -22,6 +22,8 @@ const { page } = useData()
       )
     }"
     :href="item.link"
+    :target="item.target"
+    :rel="item.rel"
   >
     {{ item.text }}
   </VPLink>

types/default-theme.d.ts

@@ -120,7 +120,7 @@ export namespace DefaultTheme {
 
   export type NavItem = NavItemWithLink | NavItemWithChildren
 
-  export type NavItemWithLink = {
+  export interface NavItemWithLink {
     text: string
     link: string
 
@@ -129,9 +129,11 @@ export namespace DefaultTheme {
      * RegExp object here because it isn't serializable
      */
     activeMatch?: string
+    target?: string
+    rel?: string
   }
 
-  export type NavItemChildren = {
+  export interface NavItemChildren {
     text?: string
     items: NavItemWithLink[]
   }