添加跳到评论区按钮

2020-03-22 15:51:56 +08:00 · 2020-03-22 15:51:56 +08:00 · b054c4ebe1
parent 42d739b0aa
commit b054c4ebe1
15 changed files with 147 additions and 49 deletions
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@ -100,7 +100,7 @@ module.exports = {
    }],
    
    'vuepress-plugin-baidu-autopush', // 百度自动推送
-    '@vuepress/back-to-top', // 返回顶部
+    // '@vuepress/back-to-top', // 返回顶部

    ['one-click-copy', { // 代码块复制按钮
      copySelector: ['div[class*="language-"] pre', 'div[class*="aside-code"] aside'], // String or Array
--- a/docs/.vuepress/plugins/enhanced-search/EnhancedSearchBox.vue
+++ b/docs/.vuepress/plugins/enhanced-search/EnhancedSearchBox.vue
@ -237,7 +237,7 @@ export default {
    padding 0 0.5rem 0 2rem
    outline none
    transition all .2s ease
-    background #fff url(search.svg) 0.6rem 0.5rem no-repeat
+    background url(search.svg) 0.6rem 0.5rem no-repeat
    background-size 1rem
    &:focus
      cursor auto
--- a/docs/.vuepress/styles/index.styl
+++ b/docs/.vuepress/styles/index.styl
@ -3,7 +3,7 @@

 // 样式重置
 body
-  background: none
+  // background: #F5F5D5
 a,input,button
  outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-focus-ring-color: rgba(0, 0, 0, 0);

@ -12,6 +12,7 @@ a,input,button
  
 .navbar
  box-shadow 0 2px 5px rgba(0,0,0,.06)
+  // background: #F5F5D5 // 覆盖index.styl #30

 // 滚动条样式
@media (min-width: $MQMobile)
@ -105,25 +106,6 @@ iframe


 // 目录显示隐藏
-@media (max-width: $MQMobile)
-  .theme-container
-    &.sidebar-open
-      .sidebar-mask // 蒙版在小屏中才能显示
-        display: block
-
-@media (min-width: ($MQMobile + 1px))
-  .theme-container // 覆盖index.style #179
-    &.sidebar-open
-      .sidebar-mask // 蒙版在大屏中不能显示
-        display: none
-
-  .theme-container.no-sidebar
-    .sidebar-button
-      display none
-
-
-
-// 大于720px时 切换目录栏的样式
 .sidebar
  transform translateX(-100%)
  transition transform .2s ease
@ -131,9 +113,17 @@ iframe
  transition all .2s ease
  padding-left 0

-@media (min-width: ($MQMobile + 1px))
+@media (max-width: $MQMobile)
  .theme-container
    &.sidebar-open
+      .sidebar-mask // 蒙版在小屏中才能显示
+        display: block
+
+@media (min-width: ($MQMobile + 1px)) // 大于720px时
+  .theme-container 
+    &.sidebar-open
+      .sidebar-mask // 蒙版在大屏中不能显示,覆盖index.style #179
+        display: none
      .sidebar
        transform translateX(0)
      .sidebar-button
@ -148,4 +138,7 @@ iframe
      &.sidebar-open:not(.on-sidebar)
        .sidebar-button
          $mobileSidebarWidth = $sidebarWidth * 0.82
-          left $mobileSidebarWidth
+          left $mobileSidebarWidth
+  .theme-container.no-sidebar
+    .sidebar-button
+      display none
--- a/docs/.vuepress/theme/components/Buttons.vue
+++ b/docs/.vuepress/theme/components/Buttons.vue
@ -0,0 +1,117 @@
+<template>
+  <div class="buttons">
+    <transition name="fade">
+      <div
+        title="返回顶部"
+        class="button go-to-top iconfont icon-fanhuidingbu"
+        v-show="showToTop"
+        @click="scrollToTop"
+      />
+    </transition>
+    <!-- <div
+      title="护眼模式"
+      class="button go-to-comment iconfont icon-huyan"
+    /> -->
+    <div
+      title="去评论"
+      class="button go-to-comment iconfont icon-pinglun"
+      v-show="showCommentBut"
+      @click="scrollToComment"
+    />
+  </div>
+</template>
+
+<script>
+import debounce from 'lodash.debounce'
+
+
+export default {
+  data() {
+    return {
+      threshold: 300,
+      scrollTop: null,
+      showCommentBut: false,
+      commentTop: null,
+      COMMENT_SELECTOR: '#vuepress-plugin-comment' // 评论区元素的选择器
+    }
+  },
+  mounted () {
+    this.scrollTop = this.getScrollTop()
+    window.addEventListener('scroll', debounce(() => {
+      this.scrollTop = this.getScrollTop()
+    }, 100))
+
+    this.handleShowCommentBut()
+    window.addEventListener('load', () => {
+      this.getCommentTop()
+    })
+  },
+  computed: {
+    showToTop () {
+      return this.scrollTop > this.threshold
+    }
+  },
+  methods: {
+    getScrollTop () {
+      return window.pageYOffset
+        || document.documentElement.scrollTop
+        || document.body.scrollTop || 0
+    },
+
+    scrollToTop () {
+      window.scrollTo({ top: 0, behavior: 'smooth' })
+      this.scrollTop = 0
+    },
+
+    getCommentTop () {
+      setTimeout(() => {
+        const commentEl = document.querySelector(this.COMMENT_SELECTOR)
+        if (commentEl) {
+          this.commentTop = commentEl.offsetTop
+        } else {
+          this.showCommentBut = false
+        }
+      },500)
+    },
+
+    handleShowCommentBut() {
+      this.showCommentBut = this.$frontmatter.comment !== false && this.$frontmatter.home !== true
+    },
+
+    scrollToComment() {
+      window.scrollTo({ top: this.commentTop, behavior: 'smooth' })
+    }
+    
+  },
+  watch: {
+    $route() {
+      this.handleShowCommentBut()
+      this.getCommentTop()
+    }
+  }
+}
+</script>
+
+<style lang='stylus' scoped>
+  .buttons
+    position fixed
+    right 2rem
+    bottom 3rem
+    z-index 1
+    .button
+      width 40px
+      height 40px
+      line-height 40px
+      border-radius 50%
+      box-shadow 0 2px 6px rgba(0,0,0,.15)
+      margin-top .9rem
+      text-align center
+      cursor pointer
+      &:hover
+        color $accentColor
+
+  .fade-enter-active, .fade-leave-active
+    transition opacity .2s
+  .fade-enter, .fade-leave-to
+    opacity 0
+</style>
--- a/docs/.vuepress/theme/components/Footer.vue
+++ b/docs/.vuepress/theme/components/Footer.vue
@ -41,24 +41,17 @@ $mobileSidebarWidth = $sidebarWidth * 0.82
    padding 0 10px
    font-size 19px
 .footer
-  padding 2.5rem
+  padding 2.5rem 2.5rem 4rem 
  text-align center
  color lighten($textColor, 25%)
-  margin 0 0 2rem 0
  box-sizing border-box
  font-size .85rem
  transition all .2s ease
-  // width auto
-  // margin-left 0
-
-.sidebar-open .footer
-  width auto
-  margin-left $sidebarWidth
-  // @media (max-width: $MQNarrow)
-  //   margin-left $mobileSidebarWidth
-  // @media (max-width: $MQMobile)
-  //   width auto
-  //   margin-left 0
+  
+@media (min-width: ($MQMobile + 1px))
+  .sidebar-open .footer
+    width auto
+    margin-left $sidebarWidth

 .no-sidebar .footer
  width auto
--- a/docs/.vuepress/theme/components/Navbar.vue
+++ b/docs/.vuepress/theme/components/Navbar.vue
@ -107,7 +107,7 @@ $navbar-horizontal-padding = 1.5rem
  .links
    padding-left 1.5rem
    box-sizing border-box
-    background-color white
+    // background-color white
    white-space nowrap
    font-size 0.9rem
    position absolute
--- a/docs/.vuepress/theme/components/SidebarButton.vue
+++ b/docs/.vuepress/theme/components/SidebarButton.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="sidebar-button" @click="$emit('toggle-sidebar')">
+  <div class="sidebar-button" @click="$emit('toggle-sidebar')" title="目录">
    <svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512">
      <path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class=""></path>
    </svg>
--- a/docs/.vuepress/theme/components/Timeline.vue
+++ b/docs/.vuepress/theme/components/Timeline.vue
@ -158,7 +158,7 @@ export default {
      position: absolute;
      top: 14px;
      left: 0;
-      z-index: -1;
+      // z-index: -1;
      margin-left: -2px;
      width: 4px;
      height: 100%;
--- a/docs/.vuepress/theme/layouts/Layout.vue
+++ b/docs/.vuepress/theme/layouts/Layout.vue
@ -44,6 +44,8 @@
        #bottom
      />
    </Page>
+
+    <Buttons />
  </div>
 </template>

@ -52,12 +54,13 @@ 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 Buttons from '@theme/components/Buttons.vue'
 import { resolveSidebarItems } from '../util'

 const MOBILE_DESKTOP_BREAKPOINT = 719 // refer to config.styl

 export default {
-  components: { Home, Page, Sidebar, Navbar },
+  components: { Home, Page, Sidebar, Navbar, Buttons },

  data () {
    return {
@ -130,7 +133,6 @@ export default {
    },
    toggleSidebar (to) {
      this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
-      console.log(this.isSidebarOpen)
      this.$emit('toggle-sidebar', this.isSidebarOpen)
    },

--- a/docs/02.页面/20.CSS/02.flex布局案例-基础.md
+++ b/docs/02.页面/20.CSS/02.flex布局案例-基础.md
@ -5,8 +5,6 @@ permalink: /pages/ea6db1530c42ad51
 ---
 # flex布局案例-基础

-## demo
-
 > 可用<kbd>F12</kbd>开发者工具查看元素及样式，可打开codepen在线编辑代码。

 ::: demo [vanilla]
--- a/docs/02.页面/20.CSS/03.flex布局案例-骰子.md
+++ b/docs/02.页面/20.CSS/03.flex布局案例-骰子.md
@ -5,7 +5,6 @@ permalink: /pages/eff61bc8b4f4695d
 ---
 # flex布局案例-骰子

-## demo
 > 可用<kbd>F12</kbd>开发者工具查看元素及样式，可打开codepen在线编辑代码。

 ::: demo [vanilla]
--- a/docs/02.页面/20.CSS/04.flex布局案例-圣杯布局.md
+++ b/docs/02.页面/20.CSS/04.flex布局案例-圣杯布局.md
@ -4,7 +4,6 @@ date: 2019-12-25 14:27:01
 permalink: /pages/df9e7c7214fa5046
 ---
 # flex布局案例-圣杯布局
-## demo
 > 可用<kbd>F12</kbd>开发者工具查看元素及样式，可打开codepen在线编辑代码。

 ::: demo [vanilla]
--- a/docs/02.页面/20.CSS/05.flex布局案例-网格布局.md
+++ b/docs/02.页面/20.CSS/05.flex布局案例-网格布局.md
@ -4,7 +4,6 @@ date: 2019-12-25 14:27:01
 permalink: /pages/85b5a3fe218a34b7
 ---
 # flex布局案例-网格布局
-## demo
 > 可用<kbd>F12</kbd>开发者工具查看元素及样式，可打开codepen在线编辑代码。

 ::: demo [vanilla]
--- a/docs/02.页面/20.CSS/06.flex布局案例-输入框布局.md
+++ b/docs/02.页面/20.CSS/06.flex布局案例-输入框布局.md
@ -5,7 +5,6 @@ permalink: /pages/05cc577fb51c7998
 ---
 # flex布局案例-输入框布局

-## demo
 > 可用<kbd>F12</kbd>开发者工具查看元素及样式，可打开codepen在线编辑代码。

 ::: demo [vanilla]
--- a/docs/02.页面/20.CSS/08.CSS3之animation动画.md
+++ b/docs/02.页面/20.CSS/08.CSS3之animation动画.md
@ -5,7 +5,6 @@ permalink: /pages/c2c0432138f6e042
 ---
 # CSS3之animation动画

-## demo
 > 可用<kbd>F12</kbd>开发者工具查看元素及样式，可打开codepen在线编辑代码。

 ::: demo [vanilla]