Skip to content

Commit 121e6ca

Browse files
ulivzulivz
committed
add nav link component to distinguish internal and external link
1 parent 0494566 commit 121e6ca

File tree

5 files changed

+101
-59
lines changed

5 files changed

+101
-59
lines changed

‎docs/.vuepress/config.js

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,20 +27,15 @@ module.exports = {
2727
link: '/default-theme-config/'
2828
},
2929
{
30-
text: 'Dropdown Test',
30+
text: 'Links',
3131
type: 'dropdown',
3232
items: [
3333
{
34-
text: 'item1',
35-
link: '/dropdown-test/'
36-
},
37-
{
38-
text: 'item1',
39-
link: '/dropdown-test/'
34+
text: 'Vue',
35+
link: 'https://vuejs.org/',
4036
}
4137
],
42-
link: '/dropdown-test/'
43-
},
38+
}
4439
],
4540
sidebar: {
4641
'/guide/': [

‎lib/default-theme/NavLink.vue

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<template>
2+
<router-link
3+
class="router-link"
4+
:to="item.link"
5+
v-if="!isExternal(item.link)">
6+
{{ item.text }}
7+
</router-link>
8+
<a
9+
v-else
10+
:href="item.link"
11+
target="_blank"
12+
class="router-link">
13+
{{ item.text }}
14+
</a>
15+
</template>
16+
17+
<script>
18+
import { isExternal } from './util'
19+
export default {
20+
props: {
21+
item: {
22+
required: true
23+
}
24+
},
25+
mixins: [
26+
{
27+
methods: {
28+
isExternal
29+
}
30+
}
31+
]
32+
}
33+
</script>

‎lib/default-theme/NavLinks.vue

Lines changed: 55 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,19 @@
33
<!-- user links -->
44
<div class="nav-item" v-for="item in userLinks" :key="item.link">
55
<div
6-
v-if="item.type === 'dropdown'"
7-
class="nav-dropdown-wrapper">
6+
v-if="item.type === 'dropdown'"
7+
class="nav-dropdown-wrapper">
88
<span>{{ item.text }}</span>
9+
<span class="arrow"></span>
910
<ul class="nav-dropdown">
10-
<li v-for="subItem in item.items">
11-
<router-link
12-
:to="subItem.link">
13-
{{ subItem.text }}
14-
</router-link>
11+
<li
12+
v-for="subItem in item.items"
13+
:key="subItem.link">
14+
<nav-link :item="subItem"></nav-link>
1515
</li>
1616
</ul>
1717
</div>
18-
<router-link
19-
v-else
20-
:to="item.link">
21-
{{ item.text }}
22-
</router-link>
18+
<nav-link v-else :item="item"></nav-link>
2319
</div>
2420
<!-- github link -->
2521
<a v-if="githubLink"
@@ -35,16 +31,17 @@
3531

3632
<script>
3733
import OutboundLink from './OutboundLink.vue'
34+
import NavLink from './NavLink.vue'
3835
import { isActive, ensureExt } from './util'
3936
4037
export default {
41-
components: { OutboundLink },
38+
components: { OutboundLink, NavLink },
4239
computed: {
4340
userLinks () {
4441
return (this.$site.themeConfig.nav || []).map(({ text, link, type, items }) => ({
4542
text,
4643
type,
47-
link: ensureExt(link),
44+
link: link ? ensureExt(link) : void 0,
4845
items: (items || []).map(({ text, link }) => ({ text, link: ensureExt(link) }))
4946
}))
5047
},
@@ -73,8 +70,6 @@ export default {
7370
color inherit
7471
&:hover, &.router-link-active
7572
color $accentColor
76-
.github-link
77-
margin-left 1.5rem
7873
.nav-item
7974
position relative
8075
display inline-block
@@ -84,46 +79,58 @@ export default {
8479
.nav-dropdown-wrapper
8580
cursor pointer
8681
padding-right 15px
87-
&:after
88-
content: ''
89-
position absolute
90-
right: 0px
91-
top: calc(50% - 2px)
92-
display block
93-
border-left: 4px solid transparent
94-
border-right: 4px solid transparent
95-
border-top: 5px solid #ccc
82+
.arrow
83+
display: inline-block;
84+
vertical-align: middle;
85+
margin-top: -1px;
86+
margin-left: 6px;
87+
width: 0;
88+
height: 0;
89+
border-left: 4px solid transparent;
90+
border-right: 4px solid transparent;
91+
border-top: 5px solid #ccc;
9692
&:hover
9793
.nav-dropdown
9894
display: block
9995
.nav-dropdown
100-
display: none
101-
box-sizing: border-box;
102-
max-height: calc(100vh - 2.7rem)
103-
overflow-y: auto
104-
position: absolute
105-
top: 100%
106-
right: 0
107-
background-color: #fff
108-
padding: 10px 0
109-
border: 1px solid #ddd
110-
border-bottom-color: #ccc
111-
text-align: left
112-
border-radius: 0.25rem
113-
white-space: nowrap
114-
margin 0
11596
& > li
97+
color inherit
11698
line-height 1.7rem
117-
padding: 0 1.5rem 0 1.25rem;
99+
padding: 0 1.5rem 0 1.25rem
100+
&:hover
101+
color $accentColor
102+
.github-link
103+
margin-left 1.5rem
118104
119105
@media (max-width: $MQMobile)
120-
.nav-links a
121-
margin-left 0
106+
.nav-links
107+
.nav-item
108+
display block
109+
margin-left 0
110+
.github-link
111+
margin-left 0
122112
123113
@media (min-width: $MQMobile)
124-
.nav-links a
125-
&:hover, &.router-link-active
126-
color $textColor
127-
margin-bottom -2px
128-
border-bottom 2px solid lighten($accentColor, 5%)
114+
.nav-links
115+
a
116+
&:hover, &.router-link-active
117+
color $textColor
118+
margin-bottom -2px
119+
border-bottom 2px solid lighten($accentColor, 5%)
120+
.nav-dropdown
121+
display: none
122+
box-sizing: border-box;
123+
max-height: calc(100vh - 2.7rem)
124+
overflow-y: auto
125+
position: absolute
126+
top: 100%
127+
right: 0
128+
background-color: #fff
129+
padding: 10px 0
130+
border: 1px solid #ddd
131+
border-bottom-color: #ccc
132+
text-align: left
133+
border-radius: 0.25rem
134+
white-space: nowrap
135+
margin 0
129136
</style>

‎lib/default-theme/Sidebar.vue

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,11 +81,14 @@ function resolveOpenGroupIndex (route, items) {
8181
display none
8282
border-bottom 1px solid $borderColor
8383
padding 0.5rem 0 0.75rem 0
84-
a
84+
.nav-item, .github-link, .nav-dropdown > li
8585
display block
86+
line-height 1.25rem
8687
font-weight 600
8788
font-size 1.1em
8889
padding 0.5rem 0 0.5rem 1.5rem
90+
.nav-item .nav-dropdown-wrapper .nav-dropdown > li
91+
padding-top 10px
8992
.sidebar-links
9093
margin-top 1.5rem
9194

‎lib/default-theme/util.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,12 @@ export function getHash (path) {
1616
}
1717
}
1818

19+
export function isExternal (path) {
20+
return outboundRE.test(path)
21+
}
22+
1923
export function ensureExt (path) {
20-
if (outboundRE.test(path)) {
24+
if (isExternal(path)) {
2125
return path
2226
}
2327
const hashMatch = path.match(hashRE)

0 commit comments

Comments
 (0)