andre/kuboard-press
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

vupress1.2兼容

Browse Source
This commit is contained in:
huanqing.shao
2019-10-19 12:13:48 +08:00
parent 5e427559a0
commit 27b2ff8b4e
11 changed files with 294 additions and 397 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
.vuepress/components/FriendlyUrl.vue
View File

@ -1,12 +1,20 @@
<template>
<div style="margin-top: 10px;">
友情链接：
<span v-for="item in urls" style="margin-right: 10px;"
@click="$sendGaEvent('友情链接', '友情链接: ' + item.name, '友情链接:' + item.name + ' --- ' + $page.path)">
<a target="_blank" :href="item.url + '?utm_source=kuboard.cn'">
{{item.name}}
</a>
</span>
<div>
<div style="margin-top: 10px; text-align: center;">
Copyright © 2019-present 邵欢庆
<span @click="$sendGaEvent('友情链接', '友情链接: 仁聚汇通', '友情链接:' + $page.path)">
<a href="http://www.eigpay.com" target="_blank">仁聚汇通</a>
</span> | 京ICP备19008693号-2
</div>
<div style="margin-top: 10px; text-align: center; margin-bottom: 50px;">
友情链接：
<span v-for="item in urls" style="margin-right: 10px;"
@click="$sendGaEvent('友情链接', '友情链接: ' + item.name, '友情链接:' + item.name + ' --- ' + $page.path)">
<a target="_blank" :href="item.url + '?utm_source=kuboard.cn'">
{{item.name}}
</a>
</span>
</div>
</div>
</template>

2
.vuepress/components/HomePage.vue
View File

@ -93,9 +93,9 @@
<Content></Content>
<div class="footer">
Copyright © 2019-present 邵欢庆 <span @click="$sendGaEvent('友情链接', '友情链接: 仁聚汇通', '友情链接:' + $page.path)"><a href="http://www.eigpay.com" target="_blank">仁聚汇通</a></span> | 京ICP备19008693号-2
<FriendlyUrl></FriendlyUrl>
</div>
<StarGazer/>
<AdSenseRightSide/>
</main>
</template>

0
.vuepress/theme/layouts/LearningLayout.vue → .vuepress/components/LearningLayout.vue
View File

0
.vuepress/theme/components/PageVssue.vue → .vuepress/components/PageVssue.vue
View File

145
.vuepress/components/SupportPage.vue Normal file
View File

@ -0,0 +1,145 @@
<template>
<div
class="theme-container"
:class="pageClasses"
@touchstart="onTouchStart"
@touchend="onTouchEnd"
>
<Navbar
v-if="shouldShowNavbar"
@toggle-sidebar="toggleSidebar"
/>
<div
class="sidebar-mask"
@click="toggleSidebar(false)"
></div>
<Sidebar
:items="sidebarItems"
@toggle-sidebar="toggleSidebar"
>
<slot
name="sidebar-top"
#top
/>
<slot
name="sidebar-bottom"
#bottom
/>
</Sidebar>
<main class="page" style="padding-top: 2rem;">
<Content class="theme-default-content" style="padding-top: 0; margin-top: 0; padding-bottom: 1rem;"/>
<PageVssue style="max-width: 1000px; margin: auto;"></PageVssue>
</main>
</div>
</template>
<script>
import Home from '@theme/components/Home.vue'
import Navbar from '@theme/components/Navbar.vue'
import Page from '@theme/components/Page.vue'
import Sidebar from '@theme/components/Sidebar.vue'
import { resolveSidebarItems } from '../theme/util'
export default {
components: { Home, Page, Sidebar, Navbar },
data () {
return {
isSidebarOpen: false
}
},
computed: {
shouldShowNavbar () {
const { themeConfig } = this.$site
const { frontmatter } = this.$page
if (
frontmatter.navbar === false
|| themeConfig.navbar === false) {
return false
}
return (
this.$title
|| themeConfig.logo
|| themeConfig.repo
|| themeConfig.nav
|| this.$themeLocaleConfig.nav
)
},
shouldShowSidebar () {
const { frontmatter } = this.$page
return (
!frontmatter.home
&& frontmatter.sidebar !== false
&& this.sidebarItems.length
)
},
sidebarItems () {
return resolveSidebarItems(
this.$page,
this.$page.regularPath,
this.$site,
this.$localePath
)
},
pageClasses () {
const userPageClass = this.$page.frontmatter.pageClass
return [
{
'no-navbar': !this.shouldShowNavbar,
'sidebar-open': this.isSidebarOpen,
'no-sidebar': !this.shouldShowSidebar
},
userPageClass
]
}
},
mounted () {
this.$router.afterEach(() => {
this.isSidebarOpen = false
})
},
methods: {
toggleSidebar (to) {
this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
this.$emit('toggle-sidebar', this.isSidebarOpen)
},
// side swipe
onTouchStart (e) {
this.touchStart = {
x: e.changedTouches[0].clientX,
y: e.changedTouches[0].clientY
}
},
onTouchEnd (e) {
const dx = e.changedTouches[0].clientX - this.touchStart.x
const dy = e.changedTouches[0].clientY - this.touchStart.y
if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 40) {
if (dx > 0 && this.touchStart.x <= 80) {
this.toggleSidebar(true)
} else {
this.toggleSidebar(false)
}
}
}
}
}
</script>
<style lang="stylus">
@require '../theme/styles/wrapper.styl'
.page
padding-bottom 2rem
display block
</style>

42
.vuepress/theme/components/JoinCommunity.vue Normal file
View File

@ -0,0 +1,42 @@
<template>
<div class="page-nav" style="max-width: 1000px; padding: 1rem;">
<el-divider>在线答疑</el-divider>
<grid :rwd="{compact: 'stack'}">
<grid-item size="1/3" :rwd="{tablet: '1/1', compact: '1/1'}" >
<el-card style="height: 100%; margin-top: 1rem;" shadow="none" :body-style="{padding: '0rem 1.5rem'}">
<h4>QQ群（免费）</h4>
<div>
<Qq/> 808894550
</div>
<p style="margin-bottom: 0; margin-top: 10px;">
<img style="margin: auto; padding: 7px; width: 135px;" src="/images/kuboard_qq.png" alt="Kubernetes教程：QQ群在线答疑"/>
</p>
</el-card>
</grid-item>
<grid-item size="2/3" :rwd="{tablet: '1/1', compact: '1/1'}">
<el-card style="height: 100%; color: #2c3e50; line-height: 1.7; margin-top: 1rem;" shadow="none" :body-style="{padding: '0rem 1.5rem'}">
<h4>微信群（即时）</h4>
<div>
<div style="margin-top: 10px;">
<span>扫第一个二维码完成打赏，扫第二个加微信进群聊（请发送打赏截图）</span>
<p style="margin-top: 10px; margin-bottom: 0; text-align-last: justify;">
<img src="/images/dz.png" style="width: 150px;"></img>
<img src="/images/dz2.jpeg" style="width: 150px;"></img>
</p>
</div>
</div>
</el-card>
</grid-item>
</grid>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>

317
.vuepress/theme/components/Page.vue
View File

@ -3,272 +3,41 @@
<div class="page-nav" style="max-width: 1000px; margin-top: 56px;">
<AdSensePageTop></AdSensePageTop>
</div>
<!-- <AdsenseParagraph></AdsenseParagraph> -->
<slot name="top"/>
<Content class="theme-default-content" style="padding-top: 0; margin-top: 0; padding-bottom: 1rem;"/>
<div>
</div>
<!-- <div style="margin: auto; width: 182px;">
<p>
<Qq/> 在线答疑
</p>
<p>
<img src="/images/kuboard_qq.png" alt="Kubernetes教程：QQ群在线答疑"/>
</p>
</div> -->
<div class="page-nav" style="max-width: 1000px; padding: 1rem;">
<el-divider>在线答疑</el-divider>
<grid :rwd="{compact: 'stack'}">
<grid-item size="1/3" :rwd="{tablet: '1/1', compact: '1/1'}" >
<el-card style="height: 100%; margin-top: 1rem;" shadow="none" :body-style="{padding: '0rem 1.5rem'}">
<h4>QQ群（免费）</h4>
<div>
<Qq/> 808894550
<div class="page-nav" style="max-width: 1000px; margin: auto;">
<div class="tip custom-block" style=" padding: 1rem; margin-top: 0;">
<div style="display: inline-block; vertical-align: top;">
<li><span style="color: red; font-weight: 500;">免费</span> Kubernetes 教程，绝不降低品质</li>
<li><a href="https://github.com/eip-work/kuboard-press" target="_blank" @click="$sendGaEvent('GithubStar', '页头求GitHubStar', 'GitHubStar: ' + $page.path)">给一个 Github Start</a> 是对作者最好的鼓励</li>
<!-- <li><Qq></Qq> <span style="color: red; font-weight: 500;">在线答疑</span>，也可以扫描本文末尾的二维码加群</li> -->
</div>
<p style="margin-bottom: 0; margin-top: 10px;">
<img style="margin: auto; padding: 7px; width: 135px;" src="/images/kuboard_qq.png" alt="Kubernetes教程：QQ群在线答疑"/>
</p>
</el-card>
</grid-item>
<grid-item size="2/3" :rwd="{tablet: '1/1', compact: '1/1'}">
<el-card style="height: 100%; color: #2c3e50; line-height: 1.7; margin-top: 1rem;" shadow="none" :body-style="{padding: '0rem 1.5rem'}">
<h4>微信群（即时）</h4>
<div>
<div style="margin-top: 10px;">
<span>扫第一个二维码完成打赏，扫第二个加微信进群聊（请发送打赏截图）</span>
<p style="margin-top: 10px; margin-bottom: 0; text-align-last: justify;">
<img src="/images/dz.png" style="width: 150px;"></img>
<img src="/images/dz2.jpeg" style="width: 150px;"></img>
</p>
</div>
</div>
</el-card>
</grid-item>
</grid>
</div>
</div>
</div>
<slot name="top" />
<Content class="theme-default-content" style="padding-top: 0; margin-top: -3rem; padding-bottom: 1rem;"/>
<JoinCommunity></JoinCommunity>
<PageEdit style="max-width: 1000px;"/>
<PageNav v-bind="{ sidebarItems }" style="max-width: 1000px;"/>
<div class="page-nav" style="max-width: 1000px; padding-top:0; margin-top: 1rem;" v-if="!$frontmatter.lessAds">
<AdSensePageBottomInline/>
</div>
<!-- <div style="text-align: center; margin-bottom: 10px;" v-if="$page.path.indexOf('/learning/') === 0">
<a href="https://github.com/eip-work/kuboard-press" target="_blank">如果您觉得 Kubernetes教程 有帮到您，点击此处，给个 Github Star，谢谢！</a>
</div>
<div style="text-align: center; margin-bottom: 10px;" v-else>
<a href="https://github.com/eip-work/kuboard-press" target="_blank">如果您觉得这篇文档有帮到您，点击此处，给个 Github Star，谢谢！</a>
</div> -->
<!-- <Valine></Valine> -->
<footer class="page-edit" style="max-width: 1000px;">
<div
class="edit-link"
v-if="editLink"
>
<a
:href="editLink"
target="_blank"
rel="noopener noreferrer"
>{{ editLinkText }}</a>
<OutboundLink/>
</div>
<div
class="last-updated"
v-if="lastUpdated"
>
<span class="prefix">{{ lastUpdatedText }}: </span>
<span class="time">{{ lastUpdated }}</span>
</div>
</footer>
<div class="page-nav" style="max-width: 1000px;" v-if="prev || next">
<p class="inner">
<span
v-if="prev"
class="prev"
>
←
<router-link
v-if="prev"
class="prev"
:to="prev.path"
>
{{ prev.title || prev.path }}
</router-link>
</span>
<span
v-if="next"
class="next"
>
<router-link
v-if="next"
:to="next.path"
>
{{ next.title || next.path }}
</router-link>
→
</span>
</p>
</div>
<div>
</div>
<PageVssue class="theme-default-content" style="max-width: 1000px; margin-top: -1.6rem; padding-top: 0;"></PageVssue>
<slot name="bottom"/>
<slot name="bottom" />
<PageVssue class="page-nav" style="max-width: 1000px;"/>
<FriendlyUrl class="page-nav" style="max-width: 1000px;"/>
<StarGazer/>
<AdSenseRightSide/>
</main>
</template>
<script>
import { resolvePage, outboundRE, endingSlashRE } from '../util'
import PageVssue from './PageVssue'
import PageEdit from '@theme/components/PageEdit.vue'
import PageNav from '@theme/components/PageNav.vue'
import JoinCommunity from './JoinCommunity'
export default {
props: ['sidebarItems'],
components: { PageVssue },
computed: {
lastUpdated () {
return this.$page.lastUpdated
},
lastUpdatedText () {
if (typeof this.$themeLocaleConfig.lastUpdated === 'string') {
return this.$themeLocaleConfig.lastUpdated
}
if (typeof this.$site.themeConfig.lastUpdated === 'string') {
return this.$site.themeConfig.lastUpdated
}
return 'Last Updated'
},
prev () {
const prev = this.$page.frontmatter.prev
if (prev === false) {
return
} else if (prev) {
return resolvePage(this.$site.pages, prev, this.$route.path)
} else {
return resolvePrev(this.$page, this.sidebarItems)
}
},
next () {
const next = this.$page.frontmatter.next
if (next === false) {
return
} else if (next) {
return resolvePage(this.$site.pages, next, this.$route.path)
} else {
return resolveNext(this.$page, this.sidebarItems)
}
},
editLink () {
if (this.$page.frontmatter.editLink === false) {
return
}
const {
repo,
editLinks,
docsDir = '',
docsBranch = 'master',
docsRepo = repo
} = this.$site.themeConfig
if (docsRepo && editLinks && this.$page.relativePath) {
return this.createEditLink(repo, docsRepo, docsDir, docsBranch, this.$page.relativePath)
}
},
editLinkText () {
return (
this.$themeLocaleConfig.editLinkText
|| this.$site.themeConfig.editLinkText
|| `Edit this page`
)
}
},
mounted () {
window.openOutboundLink = function (event) {
// console.log('openOutboundLink', event.text, new URL(event.href))
let e = {
hitType: 'event',
eventCategory: 'OL:' + new URL(event.href).host,
eventAction: 'OL:' + event.href,
eventLabel: 'OL:' + event.text
}
if (window.ga) {
window.ga('send', e);
// console.log('openOutboundLink Event', e)
} else {
console.log('开发环境，不发送 ga event', e)
}
}
},
methods: {
createEditLink (repo, docsRepo, docsDir, docsBranch, path) {
const bitbucket = /bitbucket.org/
if (bitbucket.test(repo)) {
const base = outboundRE.test(docsRepo)
? docsRepo
: repo
return (
base.replace(endingSlashRE, '')
+ `/src`
+ `/${docsBranch}/`
+ (docsDir ? docsDir.replace(endingSlashRE, '') + '/' : '')
+ path
+ `?mode=edit&spa=0&at=${docsBranch}&fileviewer=file-view-default`
)
}
const base = outboundRE.test(docsRepo)
? docsRepo
: `https://github.com/${docsRepo}`
return (
base.replace(endingSlashRE, '')
+ `/edit`
+ `/${docsBranch}/`
+ (docsDir ? docsDir.replace(endingSlashRE, '') + '/' : '')
+ path
)
}
}
components: { PageEdit, PageNav, JoinCommunity },
props: ['sidebarItems']
}
function resolvePrev (page, items) {
return find(page, items, -1)
}
function resolveNext (page, items) {
return find(page, items, 1)
}
function find (page, items, offset) {
const res = []
flatten(items, res)
for (let i = 0; i < res.length; i++) {
const cur = res[i]
if (cur.type === 'page' && cur.path === decodeURIComponent(page.path)) {
return res[i + offset]
}
}
}
function flatten (items, res) {
for (let i = 0, l = items.length; i < l; i++) {
if (items[i].type === 'group') {
flatten(items[i].children || [], res)
} else {
res.push(items[i])
}
}
}
</script>
<style lang="stylus">
@ -278,46 +47,4 @@ function flatten (items, res) {
padding-bottom 2rem
display block
.page-edit
@extend $wrapper
padding-top 1rem
padding-bottom 1rem
overflow auto
.edit-link
display inline-block
a
color lighten($textColor, 25%)
margin-right 0.25rem
.last-updated
float right
font-size 0.9em
.prefix
font-weight 500
color lighten($textColor, 25%)
.time
font-weight 400
color #aaa
.page-nav
@extend $wrapper
padding-top 1rem
padding-bottom 0
.inner
min-height 2rem
margin-top 0
border-top 1px solid $borderColor
padding-top 1rem
overflow auto // clear float
.next
float right
@media (max-width: $MQMobile)
.page-edit
.edit-link
margin-bottom .5rem
.last-updated
font-size .8em
float none
text-align left
</style>

57
.vuepress/theme/components/Sidebar.vue
View File

@ -1,6 +1,23 @@
<template>
<aside class="sidebar">
<AdSenseLeftTop />
<!-- <NavLinks/> -->
<div style="text-align: center; margin-top: 10px;">
<div class="side-nav-item" :style="activeLinkStyle('/overview/') + 'margin-left: 0;'">
<a href="/overview/" class="nav-link">简介</a>
</div>
<div class="side-nav-item" :style="activeLinkStyle('/install/')">
<a href="/install/install-dashboard.html" class="nav-link router-link-exact-active router-link-active">安装</a>
</div>
<div class="side-nav-item" :style="activeLinkStyle('/learning/')">
<a href="/learning/" class="nav-link router-link-exact-active router-link-active">学习</a>
</div>
<div class="side-nav-item" :style="activeLinkStyle('/guide/')">
<a href="/guide/" class="nav-link">使用</a>
</div>
<div class="side-nav-item" :style="activeLinkStyle('/support/')">
<a href="/support/" class="nav-link">支持</a>
</div>
</div>
<slot name="top"/>
<SidebarLinks :depth="0" :items="items"/>
<slot name="bottom"/>
@ -34,20 +51,29 @@
<script>
import SidebarLinks from '@theme/components/SidebarLinks.vue'
// import demo from './image-20190723104717575.png'
import NavLinks from '@theme/components/NavLinks.vue'
import demo from './1564841972085.gif'
export default {
name: 'Sidebar',
components: { SidebarLinks, NavLinks },
props: ['items'],
components: { SidebarLinks },
data () {
return {
demo_img: demo
}
},
methods: {
activeLinkStyle(href) {
if (this.$page.path.indexOf(href) === 0) {
return 'border-bottom: 2px solid #0b85ff;'
} else {
return ''
}
}
}
}
</script>
@ -87,4 +113,27 @@ export default {
top calc(1rem - 2px)
& > .sidebar-links
padding 1rem 0
.page-top {
margin-top: 0 !important;
margin-bottom: -80px !important;
}
.bottom-description {
text-align: center;
font-size: 0.8rem;
color: #909399;
margin-top: 2rem;
}
.side-nav-item {
margin-bottom: -2px;
margin-left: 10px;
display: inline-block;
line-height: 1.4rem;
white-space: nowrap;
font-size: 1rem;
cursor: pointer;
}
.side-nav-item a {
color: #2c3e50;
}
</style>

83
.vuepress/theme/layouts/Layout.vue
View File

@ -1,83 +0,0 @@
<template>
<ParentLayout>
<div slot="sidebar-top">
<div style="text-align: center; margin-top: 10px;">
<!-- <div>
<span style="font-size: 13px;">扫第一个二维码完成打赏，扫第二个进微信群聊</span>
<p style="margin-top: 10px;">
<img src="/dz.png" style="width: 120px; margin-right: 20px;"></img>
<img src="/dz2.jpeg" style="width: 120px;"></img>
</p>
</div> -->
<div class="side-nav-item" :style="activeLinkStyle('/overview/') + 'margin-left: 0;'">
<a href="/overview/" class="nav-link">简介</a>
</div>
<div class="side-nav-item" :style="activeLinkStyle('/install/')">
<a href="/install/install-dashboard.html" class="nav-link router-link-exact-active router-link-active">安装</a>
</div>
<div class="side-nav-item" :style="activeLinkStyle('/learning/')">
<a href="/learning/" class="nav-link router-link-exact-active router-link-active">学习</a>
</div>
<div class="side-nav-item" :style="activeLinkStyle('/guide/')">
<a href="/guide/" class="nav-link">使用</a>
</div>
<div class="side-nav-item" :style="activeLinkStyle('/support/')">
<a href="/support/" class="nav-link">支持</a>
</div>
<!-- <div class="side-nav-item" :style="activeLinkStyle('/noactive/')">
<a href="https://blog.kuboard.cn/compaign/" target="_blank" class="nav-link">博客</a>
</div> -->
</div>
<StarGazer/>
</div>
<div slot="page-bottom" class="bottom-description">
Copyright © 2019-present 邵欢庆
<span @click="$sendGaEvent('友情链接', '友情链接: 仁聚汇通', '友情链接:' + $page.path)">
<a href="http://www.eigpay.com" target="_blank">仁聚汇通</a>
</span> | 京ICP备19008693号-2
<FriendlyUrl></FriendlyUrl>
</div>
</ParentLayout>
</template>
<script>
import ParentLayout from '@parent-theme/layouts/Layout.vue'
export default {
mounted () {
},
components: {
ParentLayout
},
methods: {
activeLinkStyle(href) {
if (this.$page.path.indexOf(href) === 0) {
return 'border-bottom: 2px solid #0b85ff;'
} else {
return ''
}
}
}
}
</script>
<style scoped>
.bottom-description {
text-align: center;
font-size: 0.8rem;
color: #909399;
margin-top: 2rem;
}
.side-nav-item {
margin-bottom: -2px;
margin-left: 10px;
display: inline-block;
line-height: 1.4rem;
white-space: nowrap;
font-size: 1rem;
cursor: pointer;
}
.side-nav-item a {
color: #2c3e50;
}
</style>

9
install/install-dashboard.md
View File

@ -217,7 +217,7 @@ kubectl port-forward service/kuboard 8080:80 -n kube-system
<div slot="next"> -->
::: warning
<!-- ::: warning
* 如果不能访问 Kuboard，请参考 [常见问题](faq/timeout.html)
* 如果仍然不能解决，请到 QQ 群提问
@ -225,13 +225,16 @@ kubectl port-forward service/kuboard 8080:80 -n kube-system
<Qq></Qq> 也可以扫二维码加 QQ 群聊
![Kubernetes安装：QQ群在线答疑](/images/kuboard_qq.png)
:::
::: -->
**下一步**
- 使用 Kuboard 工作负载编辑器 [创建 busybox](/guide/example/busybox.html) （10分钟）
:tada: :tada: :tada:
- 使用 Kuboard 工作负载编辑器 [创建第一个应用](/guide/example/busybox.html) （10分钟）
- 尝试 Kuboard 设计的其他 example [使用 Kuboard](/guide/index.html)
- 学习 [Kubernetes免费教程](/learning/)
<!-- </div>

12
support/index.md
View File

@ -1,6 +1,7 @@
---
lessAds: true
vssueId: 71
layout: SupportPage
description: Kubernetes教程_本文描述了如何获得Kuboard授权
---
@ -20,7 +21,7 @@ export default {
}
</script>
## Kuboard 授权声明
## 授权声明
<grid :rwd="{compact: 'stack'}">
<grid-item size="2/3" :rwd="{tablet: '1/1', compact: '1/1'}">
@ -47,7 +48,7 @@ export default {
<!-- <KuboardLiscense></KuboardLiscense> -->
## Kuboard 采纳情况
## 采纳情况
<div style="padding: 1rem 0;">
<grid :rwd="{compact: 'stack'}">
@ -66,7 +67,7 @@ export default {
</grid>
</div>
## Kuboard 商业支持
## 商业支持
<div style="padding: 1rem 0;">
<grid :rwd="{compact: 'stack'}">
@ -89,6 +90,11 @@ export default {
</grid>
</div>
## 已注册用户
* 只要您在此处留下公司名字，您就已经 **取得将 Kuboard 用于生产环境的授权**
<!-- ### 微服务落地咨询
Kuboard 团队提供微服务实施落地的全过程咨询和实施，服务范围：