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

* add openInNewTab option to nav and sidebar

* update docs

* tweaks

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
 }