LandingPage 和 ResourceQuota

2019-10-20 13:57:43 +08:00
parent 325c785b05
commit 4524251093
100 changed files with 13197 additions and 160 deletions
--- a/.vuepress/components/AdSenseTitle.vue
+++ b/.vuepress/components/AdSenseTitle.vue
@ -1,14 +1,32 @@
 <template>
  <div :style="$isDev ? 'background-color: #grey;' : ''" v-if="!$frontmatter.lessAds">
-    <p style="background-color: #f3f5f7;padding: 10px 5px 5px 10px;">
-      <Qq></Qq> 
+    <div class="ads">
+      <!-- <Qq></Qq> 
      群号: 808894550 
      <span style="color: red; font-weight: 500;">在线答疑</span>，
      初学者可选择在线课程，语言更通俗：
      <span @click="$sendGaEvent('极客时间', '极客时间', '极客时间：' + $page.path)">
        <a target="_blank" href="https://time.geekbang.org/column/intro/100015201?code=MH1Wu456g0ZsrKtQI7QidivKV2hVvzerAUxDz5pOuQs%3D">深入剖析Kubernetes</a>
-      </span>
-    </p>
+      </span> -->
+      <div>
+
+      <a @click="clickAds" :href="random.url" target="_blank" rel="nofollow" style="text-decoration: none;">
+        <span class="name">
+          {{ random.name }}
+        </span>
+        <span class="description">
+          {{ random.description }}
+        </span>
+        <span class="description-strong">
+          {{ random.strong }}
+        </span>
+        <span class="action">
+          {{ random.action }}
+        </span>
+      </a>
+      <span class="ads-text">广告</span>
+      </div>
+    </div>
    <slot></slot>
    <!-- <div class="adsense-page-top">
      <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
@ -27,11 +45,55 @@

 <script>
 export default {
-
+  data () {
+    return {
+      ads: [
+        {
+          name: 'Sealyun',
+          description: '一键离线安装 Kubernetes',
+          strong: '免费试用',
+          action: '去看看',
+          url: 'http://store.lameleg.com?referrer=shaohq',
+          weight: 50
+        },
+        {
+          name: '宝塔面板',
+          description: '一键全能 Linux 部署及管理，',
+          strong: '送你3188元礼包',
+          action: '点我领取',
+          url: 'https://www.bt.cn/?invite_code=MV9vdnlveno=',
+          weight: 50
+        }
+      ]
+    }
+  },
+  computed: {
+    random () {
+      this.ads
+      let totalWeight = 0
+      for (let item of this.ads) {
+        totalWeight += item.weight
+      }
+      let tmp = 0
+      let r = Math.random()
+      for (let item of this.ads) {
+        if (r > tmp / totalWeight && r <= (tmp + item.weight) / totalWeight) {
+          return item
+        }
+        tmp = tmp + item.weight
+      }
+      return this.ads[0]
+    },
+  },
+  methods: {
+    clickAds () {
+      this.$sendGaEvent(this.random.name, this.random.name + '--' + this.$page.path, this.random.name + '--' + this.$page.path)
+    }
+  }
 }
 </script>

-<style scoped>
+<style lang="stylus" scoped>
 .adsense-page-top {
  /* background-color: green; */
  padding-right: 2px;
@ -39,4 +101,42 @@ export default {
  max-height: 120px !important;
  overflow: hidden;
 }
+.ads {
+  background-color: #f8f8f8;
+  padding: 10px 10px 10px 10px;
+  cursor: pointer;
+}
+.ads a {
+  text-decoration: none;
+}
+.ads span.name {
+  color: $accentColor;
+  font-size: 1em;
+}
+.ads span.description {
+  margin-left: 0.8em;
+  font-size: 0.9em;
+  color: #666;
+  font-weight: normal;
+}
+.ads span.description-strong {
+  font-size: 0.9em;
+  color: red;
+  font-weight: normal;
+}
+.ads span.action {
+  font-size: 0.75em;
+  color: #888;
+  border: 1px solid #888;
+  border-radius: 3px;
+  padding: 2px 6px;
+  margin-left: 1em;
+}
+.ads-text {
+  color: #999;
+  float: right;
+  font-size: 12px;
+  border: 1px solid #d7dae2;
+  padding: 2px 10px;
+}
 </style>
--- a/.vuepress/components/FriendlyUrl.vue
+++ b/.vuepress/components/FriendlyUrl.vue
@ -32,7 +32,7 @@ export default {
  data () {
    return {
      urls: [
-        {name: 'sealos官网', url: 'https://sealyun.com/', icon: 'https://hugo-picture.oss-cn-beijing.aliyuncs.com/blog/2019-08-27-044824.jpg'},
+        {name: 'sealos官网', url: 'http://store.lameleg.com?referrer=shaohq', icon: 'https://hugo-picture.oss-cn-beijing.aliyuncs.com/blog/2019-08-27-044824.jpg'},
        {name: '云原生实验室', url: 'https://www.yangcs.net/', icon: 'https://hugo-picture.oss-cn-beijing.aliyuncs.com/favicon-32x32.png'},
      ]
    }
--- a/.vuepress/components/LearningLayout.vue
+++ b/.vuepress/components/LearningLayout.vue
@ -1,96 +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-top" class="theme-default-content content__default page-top">
-      <div class="tip custom-block" style="padding: 10px 20px; 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>
-      </div>
-    </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>
-.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>
--- a/.vuepress/components/StarGazer.vue
+++ b/.vuepress/components/StarGazer.vue
@ -7,14 +7,13 @@
      :before-close="handleClose"
      :append-to-body	="true">
      <div style="text-align: center; font-size: 18px; weight: 500;">
-        我想看到
-        <span style="color: red;">更多更好的 Kubernetes 免费内容</span>，
+        鼓励作者完成 Kubernetes 教程
+        <span style="color: red; font-weight: 500;">剩下的 {{$themeConfig.incompleteRatio}}% </span>，
        所以我要
        <a href="https://github.com/eip-work/kuboard-press" target="_blank" @click="linkToStar">
          给一个 Github Star
          <OutboundLink/>
        </a>
-        以鼓励作者。
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="text" @click="reset" style="margin-right: 10px; color: grey;">残忍拒绝</el-button>