feat: toc 間隔調整, 直接子元素增加豎線辨識 closed #723

fix: 修復 toc 在小設備上顯示出屏幕外的 bug fix: 修復在打賞按鈕周圍也會觸發打賞彈窗的 bug fix: Waline 最近評論的時間只顯示 "剛剛" 的問題 (以docker的方式執行) #730 fix: 修復點擊右下角顯示按鈕時,按鈕沒有出現的 bug remove: 移除 button 的 hover 效果
2026-04-10 21:17:07 +08:00 · 2021-12-22 22:39:27 +08:00
parent 36d85c4c23
commit 850c825fcf
17 changed files with 98 additions and 88 deletions
--- a/_config.yml
+++ b/_config.yml
@@ -163,6 +163,10 @@ index_post_content:
  method: 3
  length: 500 # if you set method to 2 or 3, the length need to config

+# anchor
+# when you scroll in post, the URL will update according to header id.
+anchor: false
+
 # Post
 # --------------------------------------

@@ -215,10 +219,6 @@ photofigcaption: false
 # false: disable pagination
 post_pagination: 1

-# anchor
-# when you scroll in post, the URL will update according to header id.
-anchor: false
-
 # Displays outdated notice for a post (文章過期提醒)
 noticeOutdate:
  enable: false
@@ -560,8 +560,8 @@ display_mode: light
 beautify:
  enable: false
  field: post # site/post
-  title-prefix-icon: '\f0c1'
-  title-prefix-icon-color: '#F47466'
+  title-prefix-icon: # '\f0c1'
+  title-prefix-icon-color: # '#F47466'

 # Global font settings
 # Don't modify the following settings unless you know how they work (非必要不要修改)
--- a/layout/includes/post/reward.pug
+++ b/layout/includes/post/reward.pug
@@ -1,5 +1,5 @@
 .post-reward
-  .reward-button.button--animated
+  .reward-button
    i.fas.fa-qrcode
    = ' ' + _p('donate')
  .reward-main
--- a/layout/includes/widget/card_author.pug
+++ b/layout/includes/widget/card_author.pug
@@ -23,7 +23,7 @@ if theme.aside.card_author.enable
          .length-num= site.categories.length

    if theme.aside.card_author.button.enable
-      a#card-info-btn.button--animated(href=theme.aside.card_author.button.link)
+      a#card-info-btn(href=theme.aside.card_author.button.link)
        i(class=theme.aside.card_author.button.icon)
        span=theme.aside.card_author.button.text
  
--- a/scripts/tag/button.js
+++ b/scripts/tag/button.js
@@ -21,7 +21,7 @@ function btn (args) {
  icon = icon.trim()
  option = option.trim()

-  return `<a class="btn-beautify button--animated ${option}" href="${urlFor(url)}" 
+  return `<a class="btn-beautify ${option}" href="${urlFor(url)}" 
  title="${text}">${icon.length ? `<i class="${icon}"></i>` : ''}${text.length ? `<span>${text}</span>` : ''}</a>`
 }

--- a/scripts/tag/hide.js
+++ b/scripts/tag/hide.js
@@ -28,7 +28,7 @@ function hideInline (args) {
  if (color) group += `color: ${color}`
  group += '"'

-  return `<span class="hide-inline"><button type="button" class="hide-button button--animated" ${group}>${display}
+  return `<span class="hide-inline"><button type="button" class="hide-button" ${group}>${display}
  </button><span class="hide-content">${content}</span></span>`
 }

@@ -43,7 +43,7 @@ function hideBlock (args, content) {
  if (color) group += `color: ${color}`
  group += '"'

-  return `<div class="hide-block"><button type="button" class="hide-button button--animated" ${group}>${display}
+  return `<div class="hide-block"><button type="button" class="hide-button" ${group}>${display}
    </button><div class="hide-content">${hexo.render.renderSync({ text: content, engine: 'markdown' })}</div></div>`
 }

--- a/source/css/_global/index.styl
+++ b/source/css/_global/index.styl
@@ -21,6 +21,7 @@
  --btn-bg: $button-bg
  --text-bg-hover: rgba($text-bg-hover, .7)
  --light-grey: $light-grey
+  --dark-grey: $dark-grey
  --white: $white
  --text-highlight-color: $text-highlight-color
  --blockquote-color: $blockquote-color
@@ -33,6 +34,7 @@
  --timeline-border-color: $timeline-border-color
  --pseudo-hover: $pseudo-hover
  --headline-presudo: #a0a0a0
+  --scrollbar-color: $scrollbar-color

 body
  position: relative
@@ -52,7 +54,7 @@ body
  height: 8px

 *::-webkit-scrollbar-thumb
-  background: var(--btn-bg)
+  background: var(--scrollbar-color)

 *::-webkit-scrollbar-track
  background-color: transparent
@@ -176,29 +178,6 @@ if $site-name-font
 .pull-right
  float: right

-.button--animated
-  position: relative
-  z-index: 1
-  transition: color 1s
-
-  &:before
-    position: absolute
-    top: 0
-    right: 0
-    bottom: 0
-    left: 0
-    z-index: -1
-    background: var(--btn-hover-color)
-    content: ''
-    transition: transform .5s ease-out
-    transform: scaleX(0)
-    transform-origin: 0 50%
-
-  &:hover
-    &:before
-      transition-timing-function: cubic-bezier(.45, 1.64, .47, .66)
-      transform: scaleX(1)
-
 img
  &[src=''],
  &:not([src])
--- a/source/css/_layout/aside.styl
+++ b/source/css/_layout/aside.styl
@@ -1,5 +1,5 @@
 #aside-content
-  width: 25%
+  width: 26%

  +minWidth900()
    if hexo-config('aside.position') == 'right'
@@ -79,6 +79,9 @@
      text-align: center
      line-height: 2.4

+      &:hover
+        background-color: var(--btn-hover-color)
+
      span
        padding-left: 10px

@@ -243,6 +246,7 @@
      right: -100%
      bottom: 30px
      z-index: 100
+      max-width: $toc-mobile-maxWidth
      max-height: calc(100% - 60px)
      width: $toc-mobile-width
      opacity: 0
@@ -257,14 +261,22 @@
      font-size: 140%

    .toc-content
-      clear: both
      overflow-y: scroll
      overflow-y: overlay
+      margin: 0 -24px
      max-height: calc(100vh - 120px)

      +maxWidth900()
        max-height: calc(100vh - 140px)

+      & > .toc
+        margin: 0 20px
+
+        & > .toc-item > .toc-child
+          margin-left: 10px
+          padding-left: 10px
+          border-left: 1px solid var(--dark-grey)
+
      &:not(.is-expand)
        .toc-child
          display: none
@@ -286,18 +298,19 @@

      ol
        margin: 0
-        padding-left: 15px
+        padding-left: 18px

      .toc-link
        display: block
-        padding-right: 8px
-        padding-left: 6px
-        border-left: 3px solid transparent
+        margin: 4px 0
+        padding: 1px 6px
        color: var(--toc-link-color)
        transition: all .2s ease-in-out

+        &:hover
+          color: $theme-color
+
        &.active
-          border-left-color: darken($theme-toc-color, 20%)
          background: $theme-toc-color
          color: $toc-active-color

--- a/source/css/_layout/head.styl
+++ b/source/css/_layout/head.styl
@@ -304,6 +304,7 @@
        background-color: var(--sidebar-bg)
        box-shadow: 0 5px 20px -4px rgba($dark-black, .5)
        animation: sub_menus .3s .1s ease both
+        border-radius: 5px

        &:before
          position: absolute
@@ -319,9 +320,13 @@
          &:hover
            background: var(--text-bg-hover)

+          &:first-child
+            border-radius: 5px 5px 0 0
+          &:last-child
+            border-radius: 0 0 5px 5px
          a
            display: inline-block
-            padding: 6px 14px
+            padding: 8px 16px
            width: 100%
            color: var(--font-color) !important
            text-shadow: none !important
--- a/source/css/_layout/reward.styl
+++ b/source/css/_layout/reward.styl
@@ -3,6 +3,10 @@
  margin-top: 80px
  width: 100%
  text-align: center
+  pointer-events: none
+
+  & > *
+    pointer-events: auto

  .reward-button
    display: inline-block
@@ -10,9 +14,11 @@
    background: var(--btn-bg)
    color: var(--btn-color)
    cursor: pointer
-    transition: all .4s

  &:hover
+    .reward-button
+      background: var(--btn-hover-color)
+
    & > .reward-main
      display: block

--- a/source/css/_layout/rightside.styl
+++ b/source/css/_layout/rightside.styl
@@ -7,7 +7,19 @@
  transition: all .5s

  #rightside-config-hide
-    display: none
+    height: 0
+    opacity: 0
+    transition: transform .4s
+    transform: translate(45px, 0)
+
+    &.show
+      height: auto
+      opacity: 1
+      transform: translate(0, 0)
+
+    &.status
+      height: auto
+      opacity: 1

  & > div
    & > button,
@@ -35,19 +47,3 @@
  +maxWidth900()
    #hide-aside-btn
      display: none
-
-@keyframes rightside-item-in
-  0%
-    transform: translate(48px, 0)
-
-  100%
-    transform: translate(0, 0)
-
-@keyframes rightside-item-out
-  0%
-    display: block
-    transform: translate(0, 0)
-
-  100%
-    display: none
-    transform: translate(48px, 0)
--- a/source/css/_mode/darkmode.styl
+++ b/source/css/_mode/darkmode.styl
@@ -21,6 +21,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
    --btn-bg: lighten(#121212, 5)
    --text-bg-hover: lighten(#121212, 15)
    --light-grey: alpha(#FFFFFF, .7)
+    --dark-grey: alpha(#FFFFFF, .2)
    --white: alpha(#FFFFFF, .9)
    --text-highlight-color: alpha(#FFFFFF, .9)
    --blockquote-color: alpha(#FFFFFF, .7)
@@ -36,6 +37,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
    --hlscrollbar-bg: lighten(#121212, 5)
    --hlexpand-bg: linear-gradient(180deg, rgba(lighten(#121212, 2), .6), rgba(lighten(#121212, 2), .9))
    --timeline-bg: lighten(#121212, 5)
+    --scrollbar-color: lighten(#121212, 5)

    #web_bg:before,
    #footer:before,
--- a/source/css/_mode/readmode.styl
+++ b/source/css/_mode/readmode.styl
@@ -187,9 +187,6 @@ if hexo-config('readmode')
        background: var(--readmode-light-color) !important
        color: var(--font-color) !important

-      .button--animated:before
-        background: var(--readmode-light-color) !important
-
      .note
        border: 2px solid var(--gray)
        border-left-color: var(--gray) !important
--- a/source/css/_page/common.styl
+++ b/source/css/_page/common.styl
@@ -29,7 +29,7 @@
      padding: 36px 14px

  & > div:first-child
-    width: 75%
+    width: 74%
    transition: all .3s

    +maxWidth900()
--- a/source/css/_tags/button.styl
+++ b/source/css/_tags/button.styl
@@ -11,6 +11,9 @@
    color: $btn-color
    line-height: 2

+    &:hover
+      background-color: var(--btn-hover-color)
+
    i + span
      margin-left: 6px

@@ -39,15 +42,17 @@
      &.{$type}
        background-color: lookup('$tagsP-' + $type + '-color')

+        &:hover
+          background-color: var(--btn-hover-color)
+
    &.outline
      border: 1px solid transparent
      border-color: $btn-default-color
      background-color: transparent
      color: $btn-default-color
-      transition: all .3s

-      &.button--animated:before
-        background: $btn-default-color
+      &:hover
+        background-color: $btn-default-color

      &:hover
        color: white !important
@@ -57,5 +62,5 @@
          border-color: lookup('$tagsP-' + $type + '-color')
          color: lookup('$tagsP-' + $type + '-color')

-          &.button--animated:before
-            background: lookup('$tagsP-' + $type + '-color')
+          &:hover
+            background-color: lookup('$tagsP-' + $type + '-color')
--- a/source/css/_tags/hide.styl
+++ b/source/css/_tags/hide.styl
@@ -7,6 +7,9 @@
    background: $tag-hide-bg
    color: var(--white)

+    &:hover
+      background-color: var(--btn-hover-color)
+
    &.open
      display: none

--- a/source/css/var.styl
+++ b/source/css/var.styl
@@ -24,8 +24,8 @@ $hr-icon = $hrEnable && hexo-config('hr_icon.icon') ? hexo-config('hr_icon.icon'
 $hr-icon-top = $hrEnable && hexo-config('hr_icon.icon-top') ? convert(hexo-config('hr_icon.icon-top')) : -10px
 // page beatutify
 $beautifyEnable = hexo-config('beautify.enable')
-$title-prefix-icon = $beautifyEnable ? hexo-config('beautify.title-prefix-icon') : '\f0c1'
-$title-prefix-icon-color = $beautifyEnable ? convert(hexo-config('beautify.title-prefix-icon-color')) : $light-red
+$title-prefix-icon = $beautifyEnable && hexo-config('beautify.title-prefix-icon') ? hexo-config('beautify.title-prefix-icon') : '\f0c1'
+$title-prefix-icon-color = $beautifyEnable && hexo-config('beautify.title-prefix-icon-color') ? convert(hexo-config('beautify.title-prefix-icon-color')) : $light-red
 // Global Variables
 $font-size = hexo-config('font.global-font-size') ? convert(hexo-config('font.global-font-size')) : 14px
 $code-font-size = hexo-config('font.code-font-size') ? convert(hexo-config('font.code-font-size')) : var(--global-font-size)
@@ -39,6 +39,7 @@ $light-blue = $theme-color
 $dark-black = #000000
 $light-grey = #EEEEEE
 $grey = #858585
+$dark-grey = #cacaca
 $white = #FFFFFF
 $whitesmoke = #f5f5f5
 $font-black = #4C4948
@@ -61,13 +62,16 @@ $sidebar-background = #f6f8fa
 $sidebar-width = 300px
 // aside
 $toc-link-color = #666261
-$toc-mobile-width = 300px
+$toc-mobile-width = calc(100% - 80px)
+$toc-mobile-maxWidth = 380px
 $toc-active-color = #fff
 // Button
 $button-color = #fff
 $button-hover-color = $themeColorEnable && hexo-config('theme_color.button_hover') ? convert(hexo-config('theme_color.button_hover')) : $light-orange
 $button-bg = $theme-color
 $pseudo-hover = $button-hover-color
+// scrollbar
+$scrollbar-color= $themeColorEnable && hexo-config('theme_color.scrollbar_color') ? convert(hexo-config('theme_color.scrollbar_color')) : $theme-color
 // table
 $table-thead-bg = #99a9bf
 // reward
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -296,7 +296,7 @@ document.addEventListener('DOMContentLoaded', function () {
          }
          $header.classList.add('nav-fixed')
          if (window.getComputedStyle($rightside).getPropertyValue('opacity') === '0') {
-            $rightside.style.cssText = 'opacity: 0.7; transform: translateX(-58px)'
+            $rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)'
          }
        } else {
          if (currentTop === 0) {
@@ -306,7 +306,7 @@ document.addEventListener('DOMContentLoaded', function () {
        }

        if (document.body.scrollHeight <= innerHeight) {
-          $rightside.style.cssText = 'opacity: 0.7; transform: translateX(-58px)'
+          $rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)'
        }
      }, 200)()
    }
@@ -478,15 +478,16 @@ document.addEventListener('DOMContentLoaded', function () {
      window.DISQUS && document.getElementById('disqus_thread').children.length && setTimeout(() => window.disqusReset(), 200)
      typeof runMermaid === 'function' && window.runMermaid()
    },
-    showOrHideBtn: () => { // rightside 點擊設置 按鈕 展開
-      const target = document.getElementById('rightside-config-hide')
-      if (window.rightSideIn) {
-        window.rightSideIn = false
-        btf.animateOut(target, 'rightside-item-out 0.5s')
-      } else {
-        window.rightSideIn = true
-        btf.animateIn(target, 'rightside-item-in 0.5s')
+    showOrHideBtn: (e) => { // rightside 點擊設置 按鈕 展開
+      const rightsideHideClassList = document.getElementById('rightside-config-hide').classList
+      rightsideHideClassList.toggle('show')
+      if (e.classList.contains('show')) {
+        rightsideHideClassList.add('status')
+        setTimeout(() => {
+          rightsideHideClassList.remove('status')
+        }, 300)
      }
+      e.classList.toggle('show')
    },
    scrollToTop: () => { // Back to top
      btf.scrollToDest(0, 500)
@@ -506,13 +507,13 @@ document.addEventListener('DOMContentLoaded', function () {
  }

  document.getElementById('rightside').addEventListener('click', function (e) {
-    const $target = e.target.id || e.target.parentNode.id
-    switch ($target) {
+    const $target = e.target.id ? e.target : e.target.parentNode
+    switch ($target.id) {
      case 'go-up':
        rightSideFn.scrollToTop()
        break
      case 'rightside_config':
-        rightSideFn.showOrHideBtn()
+        rightSideFn.showOrHideBtn($target)
        break
      case 'mobile-toc-button':
        rightSideFn.runMobileToc()
@@ -534,7 +535,6 @@ document.addEventListener('DOMContentLoaded', function () {
  /**
   * menu
   * 側邊欄sub-menu 展開/收縮
-   * 解決menus在觸摸屏下，滑動屏幕menus_item_child不消失的問題（手機hover的bug)
   */
  const clickFnOfSubMenu = () => {
    document.querySelectorAll('#sidebar-menus .site-page.group').forEach(function (item) {
@@ -594,7 +594,7 @@ document.addEventListener('DOMContentLoaded', function () {
  /**
   * table overflow
   */
-  const addTableWrap = function () {
+  const addTableWrap = () => {
    const $table = document.querySelectorAll('#article-container :not(.highlight) > table, #article-container > table')
    if ($table.length) {
      $table.forEach(item => {