151 lines
4.4 KiB
Vue
151 lines
4.4 KiB
Vue
<template>
|
|
<header class="navbar">
|
|
<SidebarButton @toggle-sidebar="$emit('toggle-sidebar')"/>
|
|
|
|
<div style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: calc(100vw - 120px);">
|
|
<!-- <router-link
|
|
:to="$localePath"
|
|
class="home-link noselect"
|
|
>
|
|
<img
|
|
class="logo"
|
|
v-if="$site.themeConfig.logo"
|
|
:src="$withBase($site.themeConfig.logo)"
|
|
:alt="$siteTitle"
|
|
>
|
|
<span
|
|
ref="siteName"
|
|
class="site-name"
|
|
v-if="$siteTitle"
|
|
:class="{ 'can-hide': $site.themeConfig.logo }"
|
|
>Kuboard - </span>
|
|
</router-link> -->
|
|
<a href="/" class="home-link noselect">
|
|
<span
|
|
ref="siteName"
|
|
class="site-name"
|
|
v-if="$siteTitle"
|
|
:class="{ 'can-hide': $site.themeConfig.logo }"
|
|
>Kuboard - </span>
|
|
</a>
|
|
<span class="home-link noselect" style="line-height: 2.2em; font-size: 1em; font-weight: 400;">
|
|
<StarCount style="margin-left: 10px;"></StarCount>
|
|
<a href="/learning/">
|
|
<span style="color: #42b983;">免费提供K8S教程</span>
|
|
</a>
|
|
<!-- <a href="https://webscan.qianxin.com/safe/detail/?query=kuboard.cn"><img border="0" src="https://webscan.qianxin.com/api/authcode?code=ab3ebe0592248d28477251ecaf72154f" style="display: none;"/></a> -->
|
|
<!-- <span style="color: #2c3e50;">|</span>
|
|
<a href="/support/#%E5%BE%AE%E6%9C%8D%E5%8A%A1%E8%90%BD%E5%9C%B0%E5%92%A8%E8%AF%A2">
|
|
<span style="color: #007af5;">微服务落地咨询</span>
|
|
</a> -->
|
|
</span>
|
|
</div>
|
|
|
|
<div
|
|
class="links"
|
|
:style="linksWrapMaxWidth ? {
|
|
'max-width': linksWrapMaxWidth + 'px'
|
|
} : {}"
|
|
>
|
|
<AlgoliaSearchBox
|
|
v-if="isAlgoliaSearch"
|
|
:options="algolia"
|
|
/>
|
|
<SearchBox v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false"/>
|
|
<NavLinks class="can-hide"/>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script>
|
|
import AlgoliaSearchBox from '@AlgoliaSearchBox'
|
|
import SearchBox from '@SearchBox'
|
|
// import SearchBox from './BdSearchBox'
|
|
import SidebarButton from '@theme/components/SidebarButton.vue'
|
|
import NavLinks from '@theme/components/NavLinks.vue'
|
|
|
|
export default {
|
|
components: { SidebarButton, NavLinks, SearchBox, AlgoliaSearchBox },
|
|
|
|
data () {
|
|
return {
|
|
linksWrapMaxWidth: null
|
|
}
|
|
},
|
|
|
|
mounted () {
|
|
const MOBILE_DESKTOP_BREAKPOINT = 719 // refer to config.styl
|
|
const NAVBAR_VERTICAL_PADDING = parseInt(css(this.$el, 'paddingLeft')) + parseInt(css(this.$el, 'paddingRight'))
|
|
const handleLinksWrapWidth = () => {
|
|
if (document.documentElement.clientWidth < MOBILE_DESKTOP_BREAKPOINT) {
|
|
this.linksWrapMaxWidth = null
|
|
} else {
|
|
this.linksWrapMaxWidth = this.$el.offsetWidth - NAVBAR_VERTICAL_PADDING
|
|
- (this.$refs.siteName && this.$refs.siteName.offsetWidth || 0)
|
|
}
|
|
}
|
|
handleLinksWrapWidth()
|
|
window.addEventListener('resize', handleLinksWrapWidth, false)
|
|
},
|
|
|
|
computed: {
|
|
algolia () {
|
|
return this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {}
|
|
},
|
|
|
|
isAlgoliaSearch () {
|
|
return this.algolia && this.algolia.apiKey && this.algolia.indexName
|
|
}
|
|
}
|
|
}
|
|
|
|
function css (el, property) {
|
|
// NOTE: Known bug, will return 'auto' if style value is 'auto'
|
|
const win = el.ownerDocument.defaultView
|
|
// null means not to return pseudo styles
|
|
return win.getComputedStyle(el, null)[property]
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus">
|
|
$navbar-vertical-padding = 0.7rem
|
|
$navbar-horizontal-padding = 1.5rem
|
|
|
|
.navbar
|
|
padding $navbar-vertical-padding $navbar-horizontal-padding
|
|
line-height $navbarHeight - 1.4rem
|
|
a, span, img
|
|
display inline-block
|
|
.logo
|
|
height $navbarHeight - 1.4rem
|
|
min-width $navbarHeight - 1.4rem
|
|
margin-right 0.8rem
|
|
vertical-align top
|
|
.site-name
|
|
font-size 1.3rem
|
|
font-weight 600
|
|
color $textColor
|
|
position relative
|
|
.links
|
|
padding-left 1.5rem
|
|
box-sizing border-box
|
|
background-color white
|
|
white-space nowrap
|
|
font-size 0.9rem
|
|
position absolute
|
|
right $navbar-horizontal-padding
|
|
top $navbar-vertical-padding
|
|
display flex
|
|
.search-box
|
|
flex: 0 0 auto
|
|
vertical-align top
|
|
|
|
@media (max-width: $MQMobile)
|
|
.navbar
|
|
padding-left 4rem
|
|
.can-hide
|
|
display none
|
|
.links
|
|
padding-left 1.5rem
|
|
</style>
|