From 850c825fcfcee5cbb35f0fa79203784ba198a522 Mon Sep 17 00:00:00 2001 From: Jerry Date: Wed, 22 Dec 2021 22:39:27 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20toc=20=E9=96=93=E9=9A=94=E8=AA=BF?= =?UTF-8?q?=E6=95=B4,=20=E7=9B=B4=E6=8E=A5=E5=AD=90=E5=85=83=E7=B4=A0?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=B1=8E=E7=B7=9A=E8=BE=A8=E8=AD=98=20closed?= =?UTF-8?q?=20#723=20fix:=20=E4=BF=AE=E5=BE=A9=20toc=20=E5=9C=A8=E5=B0=8F?= =?UTF-8?q?=E8=A8=AD=E5=82=99=E4=B8=8A=E9=A1=AF=E7=A4=BA=E5=87=BA=E5=B1=8F?= =?UTF-8?q?=E5=B9=95=E5=A4=96=E7=9A=84=20bug=20fix:=20=E4=BF=AE=E5=BE=A9?= =?UTF-8?q?=E5=9C=A8=E6=89=93=E8=B3=9E=E6=8C=89=E9=88=95=E5=91=A8=E5=9C=8D?= =?UTF-8?q?=E4=B9=9F=E6=9C=83=E8=A7=B8=E7=99=BC=E6=89=93=E8=B3=9E=E5=BD=88?= =?UTF-8?q?=E7=AA=97=E7=9A=84=20bug=20fix:=20Waline=20=E6=9C=80=E8=BF=91?= =?UTF-8?q?=E8=A9=95=E8=AB=96=E7=9A=84=E6=99=82=E9=96=93=E5=8F=AA=E9=A1=AF?= =?UTF-8?q?=E7=A4=BA=20"=E5=89=9B=E5=89=9B"=20=E7=9A=84=E5=95=8F=E9=A1=8C?= =?UTF-8?q?=20(=E4=BB=A5docker=E7=9A=84=E6=96=B9=E5=BC=8F=E5=9F=B7?= =?UTF-8?q?=E8=A1=8C)=20#730=20fix:=20=E4=BF=AE=E5=BE=A9=E9=BB=9E=E6=93=8A?= =?UTF-8?q?=E5=8F=B3=E4=B8=8B=E8=A7=92=E9=A1=AF=E7=A4=BA=E6=8C=89=E9=88=95?= =?UTF-8?q?=E6=99=82,=E6=8C=89=E9=88=95=E6=B2=92=E6=9C=89=E5=87=BA?= =?UTF-8?q?=E7=8F=BE=E7=9A=84=20bug=20remove:=20=E7=A7=BB=E9=99=A4=20butto?= =?UTF-8?q?n=20=E7=9A=84=20hover=20=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _config.yml | 12 +++++------ layout/includes/post/reward.pug | 2 +- layout/includes/widget/card_author.pug | 2 +- scripts/tag/button.js | 2 +- scripts/tag/hide.js | 4 ++-- source/css/_global/index.styl | 27 +++-------------------- source/css/_layout/aside.styl | 27 +++++++++++++++++------ source/css/_layout/head.styl | 7 +++++- source/css/_layout/reward.styl | 8 ++++++- source/css/_layout/rightside.styl | 30 +++++++++++--------------- source/css/_mode/darkmode.styl | 2 ++ source/css/_mode/readmode.styl | 3 --- source/css/_page/common.styl | 2 +- source/css/_tags/button.styl | 15 ++++++++----- source/css/_tags/hide.styl | 3 +++ source/css/var.styl | 10 ++++++--- source/js/main.js | 30 +++++++++++++------------- 17 files changed, 98 insertions(+), 88 deletions(-) diff --git a/_config.yml b/_config.yml index 33580e081..59550c7d8 100644 --- 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 (非必要不要修改) diff --git a/layout/includes/post/reward.pug b/layout/includes/post/reward.pug index 41bb3c999..71daa9857 100644 --- 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 diff --git a/layout/includes/widget/card_author.pug b/layout/includes/widget/card_author.pug index dd8cc7b1c..0fa860af0 100644 --- 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 diff --git a/scripts/tag/button.js b/scripts/tag/button.js index 791a8e335..33a0e53b4 100644 --- a/scripts/tag/button.js +++ b/scripts/tag/button.js @@ -21,7 +21,7 @@ function btn (args) { icon = icon.trim() option = option.trim() - return `${icon.length ? `` : ''}${text.length ? `${text}` : ''}` } diff --git a/scripts/tag/hide.js b/scripts/tag/hide.js index ae463c7c0..996ad2b0a 100644 --- a/scripts/tag/hide.js +++ b/scripts/tag/hide.js @@ -28,7 +28,7 @@ function hideInline (args) { if (color) group += `color: ${color}` group += '"' - return `${content}` } @@ -43,7 +43,7 @@ function hideBlock (args, content) { if (color) group += `color: ${color}` group += '"' - return `
${hexo.render.renderSync({ text: content, engine: 'markdown' })}
` } diff --git a/source/css/_global/index.styl b/source/css/_global/index.styl index 0d3c415bb..bb41b90d6 100644 --- 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]) diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl index 06962740f..65c142124 100644 --- 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 diff --git a/source/css/_layout/head.styl b/source/css/_layout/head.styl index 0d49b7a33..87aa2119a 100644 --- 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 diff --git a/source/css/_layout/reward.styl b/source/css/_layout/reward.styl index b69f71f31..e57096767 100644 --- 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 diff --git a/source/css/_layout/rightside.styl b/source/css/_layout/rightside.styl index bb3406b20..6daea5666 100644 --- 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) diff --git a/source/css/_mode/darkmode.styl b/source/css/_mode/darkmode.styl index 64a638eba..c462fa28c 100644 --- 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, diff --git a/source/css/_mode/readmode.styl b/source/css/_mode/readmode.styl index 80dc762a9..00d055eed 100644 --- 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 diff --git a/source/css/_page/common.styl b/source/css/_page/common.styl index 40bb8e9a9..3356d1731 100644 --- 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() diff --git a/source/css/_tags/button.styl b/source/css/_tags/button.styl index 2547ccf72..dc365f61e 100644 --- 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') diff --git a/source/css/_tags/hide.styl b/source/css/_tags/hide.styl index d9785b408..e59670027 100644 --- 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 diff --git a/source/css/var.styl b/source/css/var.styl index fc2934d3e..bc1655dc7 100644 --- 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 diff --git a/source/js/main.js b/source/js/main.js index e292a12bc..116c20154 100644 --- 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 => {