feat: add openInNewTab option to nav and sidebar (#236)

* add openInNewTab option to nav and sidebar

* update docs

* tweaks

Author: egoist

src/components/HeaderNav.vue

@@ -11,14 +11,21 @@
             v-for="(childItem, index) in item.children"
             :key="index"
           >
-            <uni-link :to="childItem.link">{{ childItem.title }}</uni-link>
+            <uni-link
+              :to="childItem.link"
+              :openInNewTab="childItem.openInNewTab"
+              >{{ childItem.title }}</uni-link
+            >
           </li>
         </ul>
       </div>
 
-      <uni-link v-if="!item.children" :to="item.link">{{
-        item.title
-      }}</uni-link>
+      <uni-link
+        v-if="!item.children"
+        :to="item.link"
+        :openInNewTab="item.openInNewTab"
+        >{{ item.title }}</uni-link
+      >
     </div>
   </div>
 </template>

src/components/SidebarItem.vue

@@ -16,26 +16,14 @@
     </div>
     <template v-if="!item.collapsable || open">
       <template v-for="(link, index) of children">
-        <a
-          v-if="isExternalLink(link.link)"
-          :key="index"
-          :href="link.link"
+        <uni-link
           class="ItemLink"
-          target="_blank"
-        >
-          {{ link.title }}
-          <external-link-icon />
-        </a>
-        <router-link
-          v-else
           :key="index"
           :to="link.link"
-          :prefetch-files="getPrefetchFiles(link.link)"
-          class="ItemLink"
-          :class="{active: $route.path === link.link}"
+          :openInNewTab="link.openInNewTab"
+          :prefetchFiles="getPrefetchFiles(link.link)"
+          >{{ link.title }}</uni-link
         >
-          {{ link.title }}
-        </router-link>
         <div
           class="LinkToc"
           v-if="
@@ -54,8 +42,7 @@
             v-for="heading in $store.state.page.headings"
             :key="heading.slug"
             v-html="heading.text"
-          >
-          </router-link>
+          ></router-link>
         </div>
       </template>
     </template>
@@ -64,8 +51,12 @@
 
 <script>
 import {isExternalLink, getFileUrl, getFilenameByPath} from '../utils'
+import UniLink from './UniLink.vue'
 
 export default {
+  components: {
+    UniLink
+  },
   props: {
     item: {
       type: Object,
@@ -89,6 +80,7 @@ export default {
   },
   methods: {
     isExternalLink,
+
     getPrefetchFiles(path) {
       const {sourcePath, routes} = this.$store.getters.config
       if (routes && routes[path]) {
@@ -98,6 +90,13 @@ export default {
       const filename = getFilenameByPath(path)
       const fileUrl = getFileUrl(sourcePath, filename)
       return fileUrl ? [fileUrl] : []
+    },
+
+    getLinkTarget(link) {
+      if (!isExternalLink(link) || link.openInNewTab === false) {
+        return '_self'
+      }
+      return '_blank'
     }
   }
 }

src/components/UniLink.vue

@@ -6,9 +6,11 @@ export default {
 
   render(h, {data, children}) {
     const attrs = {...data.attrs}
-    const {to} = attrs
+    const {to, openInNewTab} = attrs
+    delete attrs.openInNewTab
     if (isExternalLink(to)) {
       delete attrs.to
+      delete attrs.prefetchFiles
       return h(
         'a',
         {
@@ -17,10 +19,15 @@ export default {
           attrs: {
             ...attrs,
             href: to,
-            target: '_blank'
+            target: openInNewTab === false ? '_self' : '_blank'
           }
         },
-        [...children, h('external-link-icon', {class: 'external-link-icon'})]
+        [
+          ...children,
+          openInNewTab === false
+            ? null
+            : h('external-link-icon', {class: 'external-link-icon'})
+        ]
       )
     }
     return h('router-link', data, children)

website/docs/options.md

@@ -40,13 +40,18 @@ An array of navigation items to display at navbar.
 interface NavItem {
   title: string
   link?: string
+  // Whether to open the link in a new tab
+  // Only works for external links
+  // Defaults to `true`
+  openInNewTab?: boolean
   // Or use `children` to display dropdown menu
   children?: Array<NavItemLink>
 }
 
 interface NavItemLink {
   title: string
   link: string
+  openInNewTab?: boolean
 }
 ```
 
@@ -66,6 +71,10 @@ interface SidebarItem {
 interface SidebarItemLink {
   title: string
   link: string
+  // Whether to open the link in a new tab
+  // Only works for external links
+  // Defaults to `true`
+  openInNewTab?: boolean
   /* Whether to show TOC, true by default */
   toc?: boolean
 }

website/docs/zh/options.md

@@ -41,13 +41,18 @@ Customize the logo in header.
 interface NavItem {
   title: string
   link?: string
+  // Whether to open the link in a new tab
+  // Only works for external links
+  // Defaults to `true`
+  openInNewTab?: boolean
   // Use `children` instead of `link` to display dropdown
   children?: Array<NavItemLink>
 }
 
 interface NavItemLink {
   title: string
   link: string
+  openInNewTab?: boolean
 }
 ```
 
@@ -66,6 +71,10 @@ interface SidebarItem {
 interface ItemLink {
   title: string
   link: string
+  // Whether to open the link in a new tab
+  // Only works for external links
+  // Defaults to `true`
+  openInNewTab?: boolean
   /* 是否显示 TOC，默认为 true */
   toc: boolean
 }