vupress1.2兼容

2019-10-19 12:13:48 +08:00
parent 5e427559a0
commit 27b2ff8b4e
11 changed files with 294 additions and 397 deletions
--- a/.vuepress/components/FriendlyUrl.vue
+++ b/.vuepress/components/FriendlyUrl.vue
@@ -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>

--- a/.vuepress/components/HomePage.vue
+++ b/.vuepress/components/HomePage.vue
@@ -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>
--- a/.vuepress/components/LearningLayout.vue
+++ b/.vuepress/components/LearningLayout.vue
@@ -0,0 +1,96 @@
+<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/PageVssue.vue
+++ b/.vuepress/components/PageVssue.vue
@@ -0,0 +1,80 @@
+<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>
--- a/.vuepress/components/SupportPage.vue
+++ b/.vuepress/components/SupportPage.vue
@@ -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>