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

sharing

Browse Source
This commit is contained in:
huanqing.shao
2019-10-31 23:39:59 +08:00
parent 74e4c05d51
commit 2787c89a44
20 changed files with 134 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.vuepress/components/AdSenseBanner.vue
View File

@ -1,5 +1,5 @@
<template>
<div v-if="$themeConfig.showAds" class="adsense-banner" :style="$isDev ? 'background-color: grey;' : ''">
<div v-if="$themeConfig.showAds && $isNotSharing" class="adsense-banner" :style="$isDev ? 'background-color: grey;' : ''">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 正文-横幅 -->
<ins class="adsbygoogle"

2
.vuepress/components/AdSenseLeftTop.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="adsense-left-top" v-if="$themeConfig.showMoreAds" :style="$isDev ? 'background-color: grey;' : ''">
<div class="adsense-left-top" v-if="$themeConfig.showMoreAds && $isNotSharing" :style="$isDev ? 'background-color: grey;' : ''">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- AdsenseLeftTop -->
<ins class="adsbygoogle"

2
.vuepress/components/AdSensePageBottom.vue
View File

@ -1,5 +1,5 @@
<template>
<div v-if="$themeConfig.showAds" class="adsense-page-bottom" :style="$isDev ? 'background-color: grey;' : ''">
<div v-if="$themeConfig.showAds && $isNotSharing" class="adsense-page-bottom" :style="$isDev ? 'background-color: grey;' : ''">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- AdSensePageBottom -->
<ins class="adsbygoogle"

2
.vuepress/components/AdSensePageBottomInline.vue
View File

@ -1,5 +1,5 @@
<template>
<div v-if="$themeConfig.showAds" class="adsense-page-bottom-inline" :style="$isDev ? 'background-color: grey;' : ''">
<div v-if="$themeConfig.showAds && $isNotSharing" class="adsense-page-bottom-inline" :style="$isDev ? 'background-color: grey;' : ''">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- PageBottomInline -->
<ins class="adsbygoogle"

2
.vuepress/components/AdSensePageTop.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="adsense-page-top" v-if="!$frontmatter.lessAds && $themeConfig.showMoreAds" :style="$isDev ? 'background-color: grey;' : ''">
<div class="adsense-page-top" v-if="!$frontmatter.lessAds && $themeConfig.showMoreAds && $isNotSharing" :style="$isDev ? 'background-color: grey;' : ''">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- AdSensePageTop-Display -->
<ins class="adsbygoogle"

2
.vuepress/components/AdSenseParagraph.vue
View File

@ -1,5 +1,5 @@
<template>
<div v-if="$themeConfig.showAds" class="adsense-paragraph" :style="$isDev ? 'background-color: grey;' : ''">
<div v-if="$themeConfig.showAds && $isNotSharing" class="adsense-paragraph" :style="$isDev ? 'background-color: grey;' : ''">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"

2
.vuepress/components/AdSenseRightSide.vue
View File

@ -1,5 +1,5 @@
<template>
<div v-if="$themeConfig.showAds" class="adsense-right" :style="$isDev ? 'background-color: grey;' : ''">
<div v-if="$themeConfig.showAds && $isNotSharing" class="adsense-right" :style="$isDev ? 'background-color: grey;' : ''">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- AdSenseRightSide -->
<ins class="adsbygoogle"

2
.vuepress/components/AdSenseSquare.vue
View File

@ -1,5 +1,5 @@
<template>
<div v-if="$themeConfig.showAds" :style="$isDev ? 'background-color: grey;' : ''">
<div v-if="$themeConfig.showAds && $isNotSharing" :style="$isDev ? 'background-color: grey;' : ''">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 正方形-正文 -->
<ins class="adsbygoogle"

14
.vuepress/components/AdSenseTitle.vue
View File

@ -1,6 +1,6 @@
<template>
<div :style="$isDev ? 'background-color: #grey;' : ''">
<div class="ads" v-if="!$frontmatter.lessAds && $themeConfig.showAds && isNotSharing">
<div class="ads" v-if="!$frontmatter.lessAds && $themeConfig.showAds && $isNotSharing">
<div>
<a @click="clickAds" :href="random.url" target="_blank" rel="nofollow" style="text-decoration: none;">
<span class="name">
@ -44,18 +44,12 @@ export default {
}
},
mounted () {
if (typeof window !== 'undefined') {
if (location.search !== undefined && location.search.indexOf('sharing') >= 0) {
// 如果带参数 sharing，则设置 isSharing = true
this.$set(this, 'isNotSharing', false)
} else {
this.$set(this, 'isNotSharing', true)
}
}
},
computed: {
random () {
this.ads
if (!this.isNotSharing) {
return this.ads[0]
}
let totalWeight = 0
for (let item of this.ads) {
totalWeight += item.weight

2
.vuepress/components/AdSenseTitlePureText.vue
View File

@ -1,5 +1,5 @@
<template>
<div v-if="$themeConfig.showAds" class="adsense-under-title" :style="$isDev ? 'background-color: grey;' : ''">
<div v-if="$themeConfig.showAds && $isNotSharing" class="adsense-under-title" :style="$isDev ? 'background-color: grey;' : ''">
<!-- <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> -->
<!-- PageTopUnderTitle -->
<!-- <ins class="adsbygoogle"

2
.vuepress/components/AdSenseVertical.vue
View File

@ -1,5 +1,5 @@
<template>
<div v-if="$themeConfig.showAds" :style="$isDev ? 'background-color: grey;' : ''">
<div v-if="$themeConfig.showAds && $isNotSharing" :style="$isDev ? 'background-color: grey;' : ''">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 正文-垂直 -->
<ins class="adsbygoogle"

2
.vuepress/components/FriendlyUrl.vue
View File

@ -1,5 +1,5 @@
<template>
<div>
<div v-if="$isNotSharing">
<div class="copyright">
Copyright © 2019-present 邵欢庆
<span @click="$sendGaEvent('友情链接', '友情链接: 仁聚汇通', '友情链接:' + $page.path)">

73
.vuepress/components/InstallBanner.vue
View File

@ -16,7 +16,9 @@
</div>
</div>
<div class="row">
<div class="col-md-4" >
<transition-group name="bounceRight" tag="div">
<div class="col-md-4" key="f1" v-show="f1">
<!-- InfoBox Center <Start> -->
<div class="cs-infobox-left mt-4 feature">
<div class="feature-title">
@ -24,16 +26,27 @@
<div class="text-primary-title">广泛验证</div>
</div>
<div class="feature-description">
<li>每天有超过 300 人参考此文档完成 Kubernetes 集群的安装</li>
<li>每天有超过
<span style="font-weight: 500; color: red;">
<div style="display: inline-block; width: 2rem;">
<animated-number
style=""
:value="value"
:formatValue="formatToPrice"
:duration="4000"
/>
</div>
</span>
人参考此文档完成 Kubernetes 集群的安装</li>
<li>不断有网友对安装文档提出改进意见</li>
</div>
</div>
<!-- InfoBox Center </End> -->
</div>
<div class="col-md-4 bg-gray">
<div class="col-md-4 bg-gray" key="f2" v-show="f2">
<!-- InfoBox Center <Start> -->
<div class="cs-infobox-left mt-4 feature" data-aos="fade-up" data-aos-anchor-placement="top-bottom" data-aos-duration="1600">
<div class="cs-infobox-left mt-4 feature">
<div class="feature-title">
<img src="/landing/images/icn4.svg" alt="" class="img-fluid">
<div class="text-primary-title">持续更新</div>
@ -41,7 +54,18 @@
<div class="feature-description">
<li>始终有最新的 Kubernetes 稳定版安装文档</li>
<li>当前版本 Kubernetes {{version}}</li>
<li>已完成了 <span style="font-weight: 500; color: red;">{{updateCount}} 次更新</span>，每次更新都帮您排除一个或更多可能踩的坑。
<li>已完成了
<span style="font-weight: 500; color: red;">
<div style="display: inline-block; width: 1.5rem;">
<animated-number
style=""
:value="updateCount"
:formatValue="formatToPrice"
:duration="6000"
/>
</div>
次更新
</span>，每次更新都帮您排除一个或更多可能踩的坑。
<a href="https://github.com/eip-work/kuboard-press/commits/master/install/install-k8s.md" target="_blank">
查看更新历史
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg>
@ -51,9 +75,9 @@
</div>
<!-- InfoBox Center </End> -->
</div>
<div class="col-md-4">
<div class="col-md-4" key="f3" v-show="f3">
<!-- InfoBox Left <Start> -->
<div class="cs-infobox-left mt-4 feature" data-aos="fade-up" data-aos-anchor-placement="top-bottom" data-aos-duration="1000">
<div class="cs-infobox-left mt-4 feature">
<div class="feature-title">
<img src="/landing/images/icn5.svg" alt="" class="img-fluid">
<div class="text-primary-title">适应面广</div>
@ -65,9 +89,9 @@
</div>
<!-- InfoBox Left </End> -->
</div>
<div class="col-md-4 bg-gray">
<div class="col-md-4 bg-gray" key="f4" v-show="f4">
<!-- InfoBox Center <Start> -->
<div class="cs-infobox-left mt-4 feature" data-aos="fade-up" data-aos-anchor-placement="top-bottom" data-aos-duration="1800">
<div class="cs-infobox-left mt-4 feature" data-aos="fade-up">
<div class="feature-title">
<img src="/landing/images/icn1.svg" alt="" class="img-fluid">
<div class="text-primary-title">在线答疑</div>
@ -83,6 +107,7 @@
</div>
<!-- InfoBox Center </End> -->
</div>
</transition-group>
</div>
</div>
</div>
@ -90,6 +115,9 @@
</template>
<script>
import AnimatedNumber from "animated-number-vue";
require('vue2-animate/dist/vue2-animate.min.css')
export default {
props: {
version: { type: String, required: true },
@ -97,11 +125,36 @@ export default {
},
data () {
return {
show: false
show: false,
value: 300,
f1: false,
f2: false,
f3: false,
f4: false
}
},
components: {
AnimatedNumber
},
mounted () {
this.show = true
setTimeout(_ => {
this.f1 = true
}, 0)
setTimeout(_ => {
this.f2 = true
}, 1000)
setTimeout(_ => {
this.f3 = true
}, 2000)
setTimeout(_ => {
this.f4 = true
}, 3000)
},
methods: {
formatToPrice(value) {
return `${value.toFixed(0)}`;
}
}
}
</script>

6
.vuepress/enhanceApp.js
View File

@ -50,5 +50,11 @@ export default ({
if (window.location.hostname === 'localhost') {
Vue.prototype.$isDev = true
}
if (location.search !== undefined && location.search.indexOf('sharing') >= 0) {
// 如果带参数 sharing，则设置 isNotSharing = false
Vue.prototype.$isNotSharing = false
} else {
Vue.prototype.$isNotSharing = true
}
}
}

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

@ -3,7 +3,7 @@
<div class="page-nav" style="max-width: 1000px; margin-top: 56px;">
<AdSensePageTop></AdSensePageTop>
</div>
<div v-if="isNotSharing" class="page-nav" style="max-width: 1000px; margin: auto;">
<div v-if="$isNotSharing" 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; line-height: 1.6rem;">
<li>
@ -29,7 +29,7 @@
<slot name="top" />
<Content class="theme-default-content" style="padding-top: 0; margin-top: -3rem; padding-bottom: 1rem;"/>
<div class="page-nav" style="max-width: 1000px; padding-top:0; margin-top: 1rem;" v-if="$frontmatter.isSharing">
<div class="page-nav" style="max-width: 1000px; padding-top:0; margin-top: 1rem;" v-if="$isNotSharing">
<p style="text-align: center;">
<a href="/">
<img src="/images/logo-main.png" style="margin: auto;">
@ -45,8 +45,8 @@
<slot name="bottom" />
<PageVssue class="page-nav" style="max-width: 1000px;"/>
<FriendlyUrl class="page-nav" style="max-width: 1000px;"/>
<StarGazer/>
<AdSenseRightSide/>
<StarGazer v-if="$isNotSharing"/>
<AdSenseRightSide v-if="$isNotSharing"/>
</main>
</template>
@ -64,15 +64,9 @@ export default {
}
},
mounted () {
if (typeof window !== 'undefined') {
if (location.search !== undefined && location.search.indexOf('sharing') >= 0) {
// 如果带参数 sharing，则设置 $frontmatter.isSharing = true
this.$set(this, 'isNotSharing', false)
if (!this.$isNotSharing) {
document.title = this.$frontmatter.sharingTitle || this.$page.title
this.$frontmatter.title = this.$frontmatter.sharingTitle
} else {
this.$set(this, 'isNotSharing', true)
}
}
}
}

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

@ -3,19 +3,19 @@
<!-- <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>
<a :href="`/overview/${urlSurfix}`" 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>
<a :href="`/install/install-dashboard.html${urlSurfix}`" 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>
<a :href="`/learning/${urlSurfix}`" 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>
<a :href="`/guide/${urlSurfix}`" class="nav-link">使用</a>
</div>
<div class="side-nav-item" :style="activeLinkStyle('/support/')">
<a href="/support/" class="nav-link">支持</a>
<a :href="`/support/${urlSurfix}`" class="nav-link">支持</a>
</div>
</div>
<slot name="top"/>
@ -65,6 +65,11 @@ export default {
demo_img: demo
}
},
computed: {
urlSurfix () {
return this.$isNotSharing ? '' : '?sharing=true'
}
},
methods: {
activeLinkStyle(href) {
if (this.$page.path.indexOf(href) === 0) {

13
docker/ClientComputedMixin.js
View File

@ -80,7 +80,18 @@ module.exports = siteData => {
if (page.frontmatter.titlePrefix !== undefined) {
selfTitle = page.frontmatter.titlePrefix + '_' + selfTitle
}
if (page.path.indexOf('/learning/') === 0 && !page.frontmatter.isSharing) {
let isNotSharing = true
if (typeof window !== 'undefined') {
if (location.search !== undefined && location.search.indexOf('sharing') >= 0) {
// 如果带参数 sharing，则设置 isNotSharing = false
isNotSharing = false
} else {
isNotSharing = true
}
}
if (page.path.indexOf('/learning/') === 0 && isNotSharing) {
return selfTitle + '_Kubernetes教程_K8S教程_K8S培训'
}
if (page.path.indexOf('/install/') === 0) {

2
install/install-k8s.md
View File

@ -37,7 +37,7 @@ meta:
## 文档特点
<InstallBanner version="v1.16.2" updateCount="64"/>
<InstallBanner version="v1.16.2" updateCount="65" style="min-height: 750px;"/>
<!-- </div>
<div slot="overview" style="min-height: 800px;"> -->

28
package-lock.json generated
View File

@ -1556,10 +1556,19 @@
"resolved": "https://registry.npm.taobao.org/alphanum-sort/download/alphanum-sort-1.0.2.tgz",
"integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM="
},
"animate.css": {
"version": "3.7.2",
"resolved": "https://registry.npm.taobao.org/animate.css/download/animate.css-3.7.2.tgz",
"integrity": "sha1-5z4NUOkssc/vFZfZs4qUgQIOCOo="
"animated-number-vue": {
"version": "1.0.0",
"resolved": "https://registry.npm.taobao.org/animated-number-vue/download/animated-number-vue-1.0.0.tgz",
"integrity": "sha1-RHznj8EMfyx33wykVKG8GAUuv8g=",
"requires": {
"animejs": "^2.2.0",
"vue": "^2.5.13"
}
},
"animejs": {
"version": "2.2.0",
"resolved": "https://registry.npm.taobao.org/animejs/download/animejs-2.2.0.tgz",
"integrity": "sha1-Ne79/FNbgZScnLBvCz5gwC5v3IA="
},
"ansi-colors": {
"version": "3.2.4",
@ -12146,13 +12155,10 @@
"resolved": "https://registry.npm.taobao.org/vue-template-es2015-compiler/download/vue-template-es2015-compiler-1.9.1.tgz",
"integrity": "sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU="
},
"vueg": {
"version": "1.4.5",
"resolved": "https://registry.npm.taobao.org/vueg/download/vueg-1.4.5.tgz",
"integrity": "sha1-UtVOEezeHmljaKJHpKoJ2Dbr+oQ=",
"requires": {
"animate.css": "^3.7.0"
}
"vue2-animate": {
"version": "2.1.2",
"resolved": "https://registry.npm.taobao.org/vue2-animate/download/vue2-animate-2.1.2.tgz",
"integrity": "sha1-i34JRyKPHrGcKxYF3hJRQdM1jSI="
},
"vuepress": {
"version": "1.2.0",

3
package.json
View File

@ -23,11 +23,12 @@
},
"dependencies": {
"@vuepress/plugin-pwa": "^1.2.0",
"animated-number-vue": "^1.0.0",
"element-ui": "^2.12.0",
"esm": "^3.2.25",
"npm": "^6.11.3",
"reduce-css-calc": "^2.1.6",
"vueg": "^1.4.5",
"vue2-animate": "^2.1.2",
"vuepress": "^1.2.0",
"vuepress-plugin-named-chunks": "^1.0.2"
}