fixing
This commit is contained in:
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div :style="$isDev ? 'background-color: #grey;' : ''">
|
||||
<div class="ads" v-if="!$frontmatter.lessAds && $themeConfig.showAds && !isSharing">
|
||||
<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">
|
||||
@ -40,13 +40,16 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
ads: require('./ad-list'),
|
||||
isSharing: false
|
||||
isNotSharing: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (typeof window !== 'undefined') {
|
||||
if (location.search !== undefined && location.search.indexOf('sharing') >= 0) {
|
||||
this.isSharing = true
|
||||
// 如果带参数 sharing,则设置 isSharing = true
|
||||
this.$set(this, 'isNotSharing', false)
|
||||
} else {
|
||||
this.$set(this, 'isNotSharing', true)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
132
.vuepress/components/InstallBanner.vue
Normal file
132
.vuepress/components/InstallBanner.vue
Normal file
@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<link rel="stylesheet" href="/landing/css/googlefont.css">
|
||||
<link rel="stylesheet" href="/landing/css/font-awesome.min.css">
|
||||
|
||||
<link rel="stylesheet" href="/landing/css/style.css">
|
||||
<link rel="stylesheet" href="/landing/css/components.css">
|
||||
<div class="py-80" id="features" style="padding-top: 1rem;">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="text-center" style="margin-bottom: 1rem;">
|
||||
<div class="text-primary-title">网上那么多 Kubernetes 安装文档,为什么这篇文档更有参考价值?</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4" >
|
||||
<!-- InfoBox Center <Start> -->
|
||||
<div class="cs-infobox-left mt-4 feature">
|
||||
<div class="feature-title">
|
||||
<img src="/landing/images/icn3.svg" alt="" class="img-fluid">
|
||||
<div class="text-primary-title">广泛验证</div>
|
||||
</div>
|
||||
<div class="feature-description">
|
||||
<li>每天有超过 300 人参考此文档完成 Kubernetes 集群的安装</li>
|
||||
<li>不断有网友对安装文档提出改进意见</li>
|
||||
</div>
|
||||
</div>
|
||||
<!-- InfoBox Center </End> -->
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 bg-gray">
|
||||
<!-- 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="feature-title">
|
||||
<img src="/landing/images/icn4.svg" alt="" class="img-fluid">
|
||||
<div class="text-primary-title">持续更新</div>
|
||||
</div>
|
||||
<div class="feature-description">
|
||||
<li>始终有最新的 Kubernetes 稳定版安装文档</li>
|
||||
<li>当前版本 Kubernetes {{version}}</li>
|
||||
<li>已完成了 <span style="font-weight: 500; color: red;">{{updateCount}} 次更新</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>
|
||||
</a>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
<!-- InfoBox Center </End> -->
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<!-- 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="feature-title">
|
||||
<img src="/landing/images/icn5.svg" alt="" class="img-fluid">
|
||||
<div class="text-primary-title">适应面广</div>
|
||||
</div>
|
||||
<div class="feature-description">
|
||||
<li>大部分的 K8S 安装文档都是个人爱好者的一份笔记而已,他当时的特定条件并不一定适用于你</li>
|
||||
<li>此文档经众多网友验证,在公有云、私有云、自建虚拟机等多种条件下均适用</li>
|
||||
</div>
|
||||
</div>
|
||||
<!-- InfoBox Left </End> -->
|
||||
</div>
|
||||
<div class="col-md-4 bg-gray">
|
||||
<!-- 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="feature-title">
|
||||
<img src="/landing/images/icn1.svg" alt="" class="img-fluid">
|
||||
<div class="text-primary-title">在线答疑</div>
|
||||
</div>
|
||||
<div class="feature-description">
|
||||
<Qq></Qq> 808894550
|
||||
|
||||
<p>
|
||||
<img src="/images/kuboard_qq.png" alt="Kubernetes安装:QQ群在线答疑" style="width: 120px;"/>
|
||||
<br/>如需远程协助,请扫描本文页尾的微信二维码
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- InfoBox Center </End> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
version: { type: String, required: true },
|
||||
updateCount: { type: String, required: true }
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.show = true
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.text-primary-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
margin-top: 0.7rem;
|
||||
}
|
||||
.feature {
|
||||
text-align: left;
|
||||
padding: 1rem;
|
||||
margin-bottom: 0;
|
||||
border-top: solid 1px #f7f7f7;
|
||||
}
|
||||
.feature-title {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.feature-description {
|
||||
display: inline-block;
|
||||
max-width: calc(100% - 64px - 2rem);
|
||||
padding: 0 0 0 1rem;
|
||||
vertical-align: top;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
@ -7,18 +7,19 @@
|
||||
|
||||
<div>
|
||||
|
||||
<p style="color: red">必须选中下面的六个勾选框才能继续</p>
|
||||
<p style="color: red">必须选中下面的 {{envCount}} 个勾选框才能继续</p>
|
||||
<p>选中后显示 安装 docker/kubelet 的文档</p>
|
||||
|
||||
<div style="display: inline-block; width: 480px; max-width: calc(100vw - 100px); overflow: hidden; line-height: 40px; background-color: rgba(255,229,100,0.3); padding: 20px 0 0 20px; margin-bottom: 20px; border: 1px solid #d7dae2;">
|
||||
<div style="display: inline-block; width: 520px; max-width: calc(100vw - 100px); overflow: hidden; line-height: 40px; background-color: rgba(255,229,100,0.3); padding: 20px 0 0 20px; margin-bottom: 20px; border: 1px solid #d7dae2;">
|
||||
<el-form :model="form" ref="envForm" :rules="rules" style="text-align: left;">
|
||||
<el-form-item prop="checked" class="env-form-item">
|
||||
<el-checkbox-group v-model="form.checked">
|
||||
<li style="height: 40px;"> <el-checkbox style="width: 300px; max-width: calc(100vw - 100px); text-align: left;" label="centos">我的任意节点 centos 版本在兼容列表中</el-checkbox> </li>
|
||||
<li style="height: 40px;"> <el-checkbox style="width: 300px; max-width: calc(100vw - 100px); text-align: left;" label="cpu">我的任意节点 CPU 内核数量大于等于 2</el-checkbox> </li>
|
||||
<li style="height: 40px;"> <el-checkbox style="width: 300px; max-width: calc(100vw - 100px); text-align: left;" label="hostname">我的任意节点 hostname 不是 localhost,且不包含下划线和小数点</el-checkbox> </li>
|
||||
<li style="height: 40px;"> <el-checkbox style="width: 300px; max-width: calc(100vw - 100px); text-align: left;" label="hostname">我的任意节点 hostname 不是 localhost,且不包含下划线、小数点、大写字母</el-checkbox> </li>
|
||||
<li style="height: 40px;"> <el-checkbox style="width: 300px; max-width: calc(100vw - 100px); text-align: left;" label="ipaddress">我的任意节点都有固定的内网 IP 地址</el-checkbox> </li>
|
||||
<li style="height: 40px;"> <el-checkbox style="width: 300px; max-width: calc(100vw - 100px); text-align: left;" label="networkcard">我的任意节点只有一块网卡(可以在完成K8S安装后再添加网卡)</el-checkbox> </li>
|
||||
<li style="height: 40px;"> <el-checkbox style="width: 300px; max-width: calc(100vw - 100px); text-align: left;" label="nat">如果我直接使用vmware等创建虚拟机,我使用NAT网络,而不是桥接网络</el-checkbox> </li>
|
||||
<li style="height: 40px;"> <el-checkbox style="width: 300px; max-width: calc(100vw - 100px); text-align: left;" label="docker">我的任意节点不会直接使用 docker run 或 docker-compose 运行容器</el-checkbox> </li>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
@ -44,7 +45,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const ENV_COUNT = 6
|
||||
const ENV_COUNT = 7
|
||||
|
||||
export default {
|
||||
props: {
|
||||
@ -62,6 +63,7 @@ export default {
|
||||
form: {
|
||||
checked: []
|
||||
},
|
||||
envCount: ENV_COUNT,
|
||||
rules: {
|
||||
checked: [{validator: validateEnv, trigger: 'change'}]
|
||||
}
|
||||
@ -85,7 +87,7 @@ export default {
|
||||
},
|
||||
envOk () {
|
||||
if (this.envOk) {
|
||||
this.$message.success('如果您符合刚才六个条件,请继续安装')
|
||||
this.$message.success(`如果您符合刚才 ${ENV_COUNT} 个条件,请继续安装`)
|
||||
this.$sendGaEvent('install-' + this.type, 'envOk-' + this.type, '已确认环境符合条件-' + this.type)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user