vupress1.2兼容
This commit is contained in:
huanqing.shao
42
.vuepress/theme/components/JoinCommunity.vue
Normal file
42
.vuepress/theme/components/JoinCommunity.vue
Normal 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>
|
||||
@@ -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>
|
||||
|
||||
@@ -1,80 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-for="(item, key) in vssues" :key="key">
|
||||
<Vssue v-if="item && item > 0" v-show="key === $route.path" :issueId="item" :options="options"/>
|
||||
<div v-if="item === undefined && isLocalHost" v-show="key === $route.path" :key="key">
|
||||
<el-button type="danger" @click="vssues[key] = ''">请创建 VssueId</el-button>
|
||||
</div>
|
||||
<div v-if="item === ''">
|
||||
<el-button type="warning" @click="refreshId = $refs.vssue[0].vssue.issue.id">请填写 vusseId <span v-if="refreshId"> - {{refreshId}}</span></el-button>
|
||||
<Vssue ref="vssue" :title="$page.path" :options="options"/>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
(function(){
|
||||
var bp = document.createElement('script');
|
||||
var curProtocol = window.location.protocol.split(':')[0];
|
||||
if (curProtocol === 'https') {
|
||||
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
|
||||
}
|
||||
else {
|
||||
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
|
||||
}
|
||||
var s = document.getElementsByTagName('script')[0];
|
||||
s.parentNode.insertBefore(bp, s);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
vssues: {},
|
||||
refreshId: undefined
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isLocalHost() {
|
||||
if (window) {
|
||||
if (window.location.host === 'localhost:8080') {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
},
|
||||
options () {
|
||||
let _this = this
|
||||
let result = {
|
||||
platform: 'github',
|
||||
locale: 'zh-CN',
|
||||
autoCreateIssue: true,
|
||||
admins: ['shaohq'],
|
||||
// all other options of Vssue are allowed
|
||||
owner: 'eip-work',
|
||||
repo: 'kuboard-press',
|
||||
clientId: this.isLocalHost ? 'f96af83d4bff4e2b9e3e' : '8141f5c205ad2f6d90d5',
|
||||
clientSecret: this.isLocalHost ? 'cf5686d68d4aab6d3bfa256da9a714049b239c1f' : 'b3e238508a2e8da9f2b355662b4cb3e62ecaa1d4',
|
||||
issueContent: (options, url) => { return 'https://kuboard.cn' + _this.$route.path },
|
||||
perPage: 50
|
||||
}
|
||||
return result
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
this.$set(this.vssues, this.$route.path, this.$frontmatter.vssueId)
|
||||
},
|
||||
watch: {
|
||||
'$route.path': function () {
|
||||
this.$set(this.vssues, this.$route.path, this.$frontmatter.vssueId)
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.vssue-header-powered-by {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user