From 08efbe41bdc718b690d62d745523d050277c2b0a Mon Sep 17 00:00:00 2001 From: Zavins Date: Sat, 16 Sep 2023 23:31:49 -0700 Subject: [PATCH 01/36] fix: prevent page flicking after click 'back2top' button - The error occurred due to float point variable 'top' never equals to 0. - Use requestAnimationFrame for better performance. ref: https://github.com/XPoet/hexo-theme-keep/issues/238 --- source/js/back2top.js | 41 ++++++++++++++++++++++++----------------- 1 file changed, 24 insertions(+), 17 deletions(-) diff --git a/source/js/back2top.js b/source/js/back2top.js index e6689383..fb28f7a7 100644 --- a/source/js/back2top.js +++ b/source/js/back2top.js @@ -7,31 +7,38 @@ KEEP.initBack2Top = () => { back2BottomBtn: document.querySelector('.tool-scroll-to-bottom'), back2top() { - const scrollTopTimer = setInterval(function () { - let top = document.body.scrollTop || document.documentElement.scrollTop - let speed = top / 2 - if (document.body.scrollTop !== 0) { - document.body.scrollTop -= speed - } else { - document.documentElement.scrollTop -= speed + if (!window.requestAnimationFrame) { + window.requestAnimationFrame = function (c) { + return setTimeout(c, 17) // (1000/60) } - if (top === 0) { - clearInterval(scrollTopTimer) + } + let scrollTop = document.body.scrollTop || document.documentElement.scrollTop + scroll = function () { + scrollTop = Math.floor(scrollTop - scrollTop / 8) + if (scrollTop > 0) { + window.scrollTo(0, scrollTop) + requestAnimationFrame(scroll) } - }, 50) + } + scroll() }, back2Bottom() { + if (!window.requestAnimationFrame) { + window.requestAnimationFrame = function (c) { + return setTimeout(c, 17) // (1000/60) + } + } let scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight let scrollTop = document.body.scrollTop || document.documentElement.scrollTop - const scrollBottomTimer = setInterval(function () { - if (!scrollTop) scrollTop = 10 - scrollTop = Math.floor(scrollTop + scrollTop / 2) - window.scrollTo(0, scrollTop) - if (scrollTop >= scrollHeight) { - clearInterval(scrollBottomTimer) + const scroll = function () { + scrollTop = Math.max(Math.floor(scrollTop + scrollTop / 8), 8) + if (scrollTop < scrollHeight) { + window.scrollTo(0, scrollTop) + requestAnimationFrame(scroll) } - }, 50) + } + scroll() }, initBack2Top() { From c323da528f3149547dfbe0e9d5b79b5e3e456286 Mon Sep 17 00:00:00 2001 From: Zavins Date: Sat, 16 Sep 2023 23:38:11 -0700 Subject: [PATCH 02/36] fix: allow mobile website to adjust font size --- source/js/utils.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/source/js/utils.js b/source/js/utils.js index 7522e74b..69afb7c5 100644 --- a/source/js/utils.js +++ b/source/js/utils.js @@ -133,7 +133,11 @@ KEEP.initUtils = () => { } const setFontSize = (fontSizeLevel) => { - this.rootHtmlDom.style.fontSize = `${fs * (1 + fontSizeLevel * 0.05)}px` + this.rootHtmlDom.style.setProperty( + 'font-size', + `${fs * (1 + fontSizeLevel * 0.05)}px`, + 'important' + ) KEEP.styleStatus.fontSizeLevel = fontSizeLevel KEEP.setStyleStatus() } From 981bcee2f8e79a3650e4118bcadbee4ac6861ea5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=8C=87=E9=97=B4=E7=9A=84=E8=AF=97=E6=84=8F?= Date: Tue, 12 Sep 2023 21:49:04 +0800 Subject: [PATCH 03/36] chore(master): release 3.7.7 --- CHANGELOG.md | 23 +++++++++++++++++++++++ package.json | 2 +- 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9e06c7d8..23c29f29 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,28 @@ # Changelog +## [3.7.7](https://github.com/XPoet/hexo-theme-keep/compare/v3.7.6...v3.7.7) (2023-09-12) + + +### 🐞 Bug Fixes + +* **copyright-info:** raises the z-index of the content container ([683c581](https://github.com/XPoet/hexo-theme-keep/commit/683c58154041449bdd108da174dfe4eb8ed21cd8)) + + +### 💄 Improvement UI + +* **archives:** display articles using a timeline style ([dac86a1](https://github.com/XPoet/hexo-theme-keep/commit/dac86a1f5a8cde2b1cf8c561a506b4bfe5b4d004)) +* optimize category content page style ([bb2e0ad](https://github.com/XPoet/hexo-theme-keep/commit/bb2e0adab6008531902962be2dc57a80d9a3cd02)) +* optimize mobile style ([98fcae3](https://github.com/XPoet/hexo-theme-keep/commit/98fcae3ce899ee2dddc592d9faea0aac3d8367a1)) +* optimize tag content page style ([6a4ee2e](https://github.com/XPoet/hexo-theme-keep/commit/6a4ee2e94e25b59b2ec58bacd84b77475bd68533)) +* optimize the post sticky style for mobile ([03400da](https://github.com/XPoet/hexo-theme-keep/commit/03400da57528a6fbd315fde47fcd6dfad70a0377)) +* **post:** optimize TOC style ([fee8375](https://github.com/XPoet/hexo-theme-keep/commit/fee8375f835f76aa44348bee2ddf655d50035cbd)) + + +### 🚦 Chore + +* adjust the directory structure and naming of CSS files ([ac9c67c](https://github.com/XPoet/hexo-theme-keep/commit/ac9c67cdb87b6a7fed80fa2611951b125153e53b)) +* **post:** optimize comments anchor setting ([8a4a8ce](https://github.com/XPoet/hexo-theme-keep/commit/8a4a8ce13a3e60c65372138ffab2701c48c723f4)) + ## [3.7.6](https://github.com/XPoet/hexo-theme-keep/compare/v3.7.5...v3.7.6) (2023-09-08) diff --git a/package.json b/package.json index 53fe0103..fe90f6dc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hexo-theme-keep", - "version": "3.7.6", + "version": "3.7.7", "private": false, "description": "A simple and elegant theme for Hexo.", "scripts": { From 04282951e08c924772b0ca27b651a9361ec57879 Mon Sep 17 00:00:00 2001 From: XPoet Date: Wed, 13 Sep 2023 14:16:19 +0800 Subject: [PATCH 04/36] ui: optimize blockquote tag style --- source/css/common/code-block/highlight.styl | 4 ++- source/css/common/markdown.styl | 40 +++++++++++++++++---- 2 files changed, 36 insertions(+), 8 deletions(-) diff --git a/source/css/common/code-block/highlight.styl b/source/css/common/code-block/highlight.styl index d9895653..a721c743 100644 --- a/source/css/common/code-block/highlight.styl +++ b/source/css/common/code-block/highlight.styl @@ -69,7 +69,8 @@ pre { figcaption { - margin-bottom 1rem + box-sizing border-box + padding 0.5rem color var(--highlight-foreground) font-size 1rem line-height 1rem @@ -77,6 +78,7 @@ pre { a { float right color var(--highlight-foreground) + font-size 0.9rem &:hover { border-bottom-color var(--highlight-foreground) diff --git a/source/css/common/markdown.styl b/source/css/common/markdown.styl index 378bec12..8bd44d65 100644 --- a/source/css/common/markdown.styl +++ b/source/css/common/markdown.styl @@ -2,22 +2,48 @@ font-size 1rem blockquote { - - p - ul - ol { - padding 0.4rem 0.4rem 0.4rem 0.8rem - } - + position relative + display flex + flex-direction column + justify-content flex-start box-sizing border-box margin 1.4rem 0 color var(--text-color-3) background var(--background-color-2) border-left 0.4rem solid var(--text-color-4) + border-top-left-radius 0.2rem + border-bottom-left-radius 0.2rem + + + p + ul + ol + footer { + position relative + box-sizing border-box + padding 0.4rem 0.4rem 0.4rem 0.8rem !important + } + + footer { + margin-bottom 0.6rem + font-style italic + } + + cite { + position relative + box-sizing border-box + margin-left 1rem + color var(--text-color-4) + + &::before { + content '— ' + } + } } p { + margin 0.6rem 0 color var(--text-color-3) line-height 2 } From ab6c379ceeb1eba8b0852f745484347219bb38ce Mon Sep 17 00:00:00 2001 From: XPoet Date: Wed, 13 Sep 2023 16:13:37 +0800 Subject: [PATCH 05/36] feat: add custom note tag in post --- scripts/tags/index.js | 7 +++ scripts/tags/note.js | 20 +++++++++ source/css/common/keep-style.styl | 28 +++++++++++- source/css/common/stylus-variables.styl | 48 ++++++++++++++++---- source/css/common/tags/keep-note.styl | 59 +++++++++++++++++++++++++ source/css/layout/article-content.styl | 10 ++--- source/css/style.styl | 1 + 7 files changed, 159 insertions(+), 14 deletions(-) create mode 100644 scripts/tags/index.js create mode 100644 scripts/tags/note.js create mode 100644 source/css/common/tags/keep-note.styl diff --git a/scripts/tags/index.js b/scripts/tags/index.js new file mode 100644 index 00000000..7210e61b --- /dev/null +++ b/scripts/tags/index.js @@ -0,0 +1,7 @@ +/* global hexo */ + +'use strict' + +const noteTag = require('./note')(hexo) +hexo.extend.tag.register('note', noteTag, true) +hexo.extend.tag.register('keep-note', noteTag, true) diff --git a/scripts/tags/note.js b/scripts/tags/note.js new file mode 100644 index 00000000..14707c7e --- /dev/null +++ b/scripts/tags/note.js @@ -0,0 +1,20 @@ +'use strict' + +module.exports = (ctx) => + function (args, content) { + const keywords = ['default', 'primary', 'info', 'success', 'warning', 'danger'] + let typeClassName = 'default' + + if (args[0] && keywords.includes(args[0])) { + typeClassName = args[0] + } + + let noteTitleContent = '' + if (args[1]) { + noteTitleContent = `
${args[1]}
` + } + + content = ctx.render.renderSync({ text: content, engine: 'markdown' }) + + return `
${noteTitleContent}${content}
` + } diff --git a/source/css/common/keep-style.styl b/source/css/common/keep-style.styl index 5ba8ba1d..d300674c 100644 --- a/source/css/common/keep-style.styl +++ b/source/css/common/keep-style.styl @@ -123,12 +123,38 @@ root-color(mode) { // pjax progress bar color --pjax-progress-bar-color mode == 'light' ? $pjax-progress-bar-color : $dark-pjax-progress-bar-color + // h tag bottom border color + --post-h-bottom-border-color mode == 'light' ? $post-h-bottom-border-color : $dark-post-h-bottom-border-color + // article aging tips primary color --article-aging-tips-color mode == 'light' ? $article-aging-tips-color : $dark-article-aging-tips-color --article-aging-tips-background-color mode == 'light' ? $article-aging-tips-background-color : $dark-article-aging-tips-background-color --article-aging-tips-border-color mode == 'light' ? $article-aging-tips-border-color : $dark-article-aging-tips-border-color - --post-h-bottom-border-color mode == 'light' ? $post-h-bottom-border-color : $dark-post-h-bottom-border-color + // note default color + --note-default-color mode == 'light' ? $note-default-color : $dark-note-default-color + --note-default-background-color mode == 'light' ? $note-default-background-color : $dark-note-default-background-color + --note-default-border-color mode == 'light' ? $note-default-border-color : $dark-note-default-border-color + + // note primary color + --note-primary-color mode == 'light' ? $note-primary-color : $dark-note-primary-color + --note-primary-background-color mode == 'light' ? $note-primary-background-color : $dark-note-primary-background-color + --note-primary-border-color mode == 'light' ? $note-primary-border-color : $dark-note-primary-border-color + + // note warning color + --note-warning-color mode == 'light' ? $note-warning-color : $dark-note-warning-color + --note-warning-background-color mode == 'light' ? $note-warning-background-color : $dark-note-warning-background-color + --note-warning-border-color mode == 'light' ? $note-warning-border-color : $dark-note-warning-border-color + + // note success color + --note-success-color mode == 'light' ? $note-success-color : $dark-note-success-color + --note-success-background-color mode == 'light' ? $note-success-background-color : $dark-note-success-background-color + --note-success-border-color mode == 'light' ? $note-success-border-color : $dark-note-success-border-color + + // note danger color + --note-danger-color mode == 'light' ? $note-danger-color : $dark-note-danger-color + --note-danger-background-color mode == 'light' ? $note-danger-background-color : $dark-note-danger-background-color + --note-danger-border-color mode == 'light' ? $note-danger-border-color : $dark-note-danger-border-color } diff --git a/source/css/common/stylus-variables.styl b/source/css/common/stylus-variables.styl index 5da84174..b662e78b 100644 --- a/source/css/common/stylus-variables.styl +++ b/source/css/common/stylus-variables.styl @@ -103,12 +103,28 @@ $header-transparent-background-2 = alpha($background-color-1, 0.4) $pjax-progress-bar-color = linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3) -$article-aging-tips-color = #b78d0f -$article-aging-tips-background-color = alpha($article-aging-tips-color, 0.1) -$article-aging-tips-border-color = alpha($article-aging-tips-color, 0.6) - $post-h-bottom-border-color = alpha($text-color-3, 0.15) +$note-default-color = rgba(117, 117, 122, 0.8) +$note-default-background-color = alpha($note-default-color, 0.1) +$note-default-border-color = alpha($note-default-color, 0.6) + +$note-primary-color = #0458ab +$note-primary-background-color = alpha($note-primary-color, 0.1) +$note-primary-border-color = alpha($note-primary-color, 0.6) + +$note-success-color = #10b981 +$note-success-background-color = alpha($note-success-color, 0.1) +$note-success-border-color = alpha($note-success-color, 0.6) + +$note-warning-color = #b78d0f +$note-warning-background-color = alpha($note-warning-color, 0.1) +$note-warning-border-color = alpha($note-warning-color, 0.6) + +$note-danger-color = #f43f5e +$note-danger-background-color = alpha($note-danger-color, 0.1) +$note-danger-border-color = alpha($note-danger-color, 0.6) + // ============================================================================================== // theme dark mode color @@ -150,8 +166,24 @@ $dark-header-transparent-background-2 = alpha($dark-background-color-1, 0.4) $dark-pjax-progress-bar-color = linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee) -$dark-article-aging-tips-color = #ecc34d -$dark-article-aging-tips-background-color = alpha($dark-article-aging-tips-color, 0.1) -$dark-article-aging-tips-border-color = alpha($dark-article-aging-tips-color, 0.6) - $dark-post-h-bottom-border-color = alpha($dark-text-color-3, 0.15) + +$dark-note-default-color = #9999a2 +$dark-note-default-background-color = alpha($dark-note-default-color, 0.1) +$dark-note-default-border-color = alpha($dark-note-default-color, 0.5) + +$dark-note-primary-color = #268bef +$dark-note-primary-background-color = alpha($dark-note-primary-color, 0.1) +$dark-note-primary-border-color = alpha($dark-note-primary-color, 0.6) + +$dark-note-success-color = #10b981 +$dark-note-success-background-color = alpha($dark-note-success-color, 0.1) +$dark-note-success-border-color = alpha($dark-note-success-color, 0.6) + +$dark-note-warning-color = #ecc34d +$dark-note-warning-background-color = alpha($dark-note-warning-color, 0.1) +$dark-note-warning-border-color = alpha($dark-note-warning-color, 0.6) + +$dark-note-danger-color = #f43f5e +$dark-note-danger-background-color = alpha($dark-note-danger-color, 0.1) +$dark-note-danger-border-color = alpha($dark-note-danger-color, 0.6) diff --git a/source/css/common/tags/keep-note.styl b/source/css/common/tags/keep-note.styl new file mode 100644 index 00000000..6bbd3aaa --- /dev/null +++ b/source/css/common/tags/keep-note.styl @@ -0,0 +1,59 @@ +.keep-note { + position relative + box-sizing border-box + width 100% + margin-bottom 2rem + padding 0.8rem 1rem + font-size 0.9rem + border-style solid + border-width 0.1rem + border-radius 0.4rem + + &.default { + color var(--note-default-color) + background-color var(--note-default-background-color) + border-color var(--note-default-border-color) + } + + + &.primary { + color var(--note-primary-color) + background-color var(--note-primary-background-color) + border-color var(--note-primary-border-color) + } + + + &.success { + color var(--note-success-color) + background-color var(--note-success-background-color) + border-color var(--note-success-border-color) + } + + + &.warning { + color var(--note-warning-color) + background-color var(--note-warning-background-color) + border-color var(--note-warning-border-color) + } + + + &.danger { + color var(--note-danger-color) + background-color var(--note-danger-background-color) + border-color var(--note-danger-border-color) + } + + + .keep-note-title { + box-sizing border-box + padding 0.6rem 0 0 0 + color inherit + font-weight 600 + font-size 1rem + } + + + p { + color inherit + } +} diff --git a/source/css/layout/article-content.styl b/source/css/layout/article-content.styl index 709cc4d4..42df31c0 100644 --- a/source/css/layout/article-content.styl +++ b/source/css/layout/article-content.styl @@ -238,19 +238,19 @@ $spacer-padding = 2rem box-sizing border-box margin-bottom 1.8rem padding 1rem - color var(--article-aging-tips-color) + color var(--note-warning-color) line-height 1.6 - background var(--article-aging-tips-background-color) - border 0.1rem solid var(--article-aging-tips-border-color) + background var(--note-warning-background-color) + border 0.1rem solid var(--note-warning-border-color) border-radius 0.4rem i { margin-right 0.4rem - color var(--article-aging-tips-color) + color var(--note-warning-color) } .days { - color var(--article-aging-tips-color) + color var(--note-warning-color) } } diff --git a/source/css/style.styl b/source/css/style.styl index ed1378de..b09f541f 100644 --- a/source/css/style.styl +++ b/source/css/style.styl @@ -3,6 +3,7 @@ @import "common/code-block/highlight.styl" @import "common/code-block/code-block.styl" @import "common/code-block/code-theme.styl" +@import "common/tags/keep-note.styl" @import "layout/page.styl" @import "layout/_partial/local-search.styl" @import "layout/_partial/toc.styl" From 5745c7162cf670f85395820e6bdac9736f615fe5 Mon Sep 17 00:00:00 2001 From: XPoet Date: Thu, 14 Sep 2023 09:46:29 +0800 Subject: [PATCH 06/36] feat: add the ability to share post --- _config.yml | 3 + languages/en.yml | 6 ++ languages/zh-CN.yml | 6 ++ languages/zh-TW.yml | 6 ++ layout/_partial/post/post-share.ejs | 24 +++++++ layout/_partial/scripts.ejs | 3 + layout/article-content.ejs | 4 ++ source/css/common/basic.styl | 17 ++++- source/css/common/stylus-variables.styl | 2 + .../css/layout/_partial/post/post-share.styl | 62 +++++++++++++++++++ source/css/style.styl | 1 + source/js/post-helper.js | 6 +- source/js/post/share.js | 36 +++++++++++ source/js/utils.js | 48 +++++++++++++- 14 files changed, 217 insertions(+), 7 deletions(-) create mode 100644 layout/_partial/post/post-share.ejs create mode 100644 source/css/layout/_partial/post/post-share.styl create mode 100644 source/js/post/share.js diff --git a/_config.yml b/_config.yml index 433bf820..c0655712 100644 --- a/_config.yml +++ b/_config.yml @@ -138,6 +138,9 @@ post: # Post copyright info copyright_info: false # Option values: true | false + # Post share + share: false # Option values: true | false + # --------------------------------------------------------------------------------------- # Code block # Docs: https://keep-docs.xpoet.cn/tutorial/configuration-guide/code_block.html diff --git a/languages/en.yml b/languages/en.yml index 72e8b1bc..086d330f 100644 --- a/languages/en.yml +++ b/languages/en.yml @@ -85,3 +85,9 @@ footer: tencent_cloud: Tencent Cloud upyun: UPYUN total_words: Total words +post: + share: + qq: "Share to QQ" + wechat: "Share to WeChat" + weibo: "Share to WeiBo" + wechat_scan: "Scan by WeChat" diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml index 12fc98cc..9468e889 100644 --- a/languages/zh-CN.yml +++ b/languages/zh-CN.yml @@ -85,3 +85,9 @@ footer: tencent_cloud: 腾讯云 upyun: 又拍云 total_words: 总字数 +post: + share: + qq: "分享到 QQ" + wechat: "分享到微信" + weibo: "分享到微博" + wechat_scan: "微信扫一扫" diff --git a/languages/zh-TW.yml b/languages/zh-TW.yml index 962fb5cb..da7dab69 100644 --- a/languages/zh-TW.yml +++ b/languages/zh-TW.yml @@ -85,3 +85,9 @@ footer: tencent_cloud: 騰訊雲 upyun: 又拍雲 total_words: 總字數 +post: + share: + qq: "分享到 QQ" + wechat: "分享到微信" + weibo: "分享到微博" + wechat_scan: "微信掃壹掃" diff --git a/layout/_partial/post/post-share.ejs b/layout/_partial/post/post-share.ejs new file mode 100644 index 00000000..ed7c710b --- /dev/null +++ b/layout/_partial/post/post-share.ejs @@ -0,0 +1,24 @@ +
+ +
diff --git a/layout/_partial/scripts.ejs b/layout/_partial/scripts.ejs index c93320be..b2074a50 100644 --- a/layout/_partial/scripts.ejs +++ b/layout/_partial/scripts.ejs @@ -39,6 +39,9 @@ const { <% if (t_toc?.enable === true) { %> <%- __js('js/toc.js') %> <% } %> + <% if (theme?.post?.share === true) { %> + <%- __js('js/post/share.js') %> + <% } %> <% } %> <% if (isCategoriesPage(page.path) === true) { %> <%- __js('js/category-page.js') %> diff --git a/layout/article-content.ejs b/layout/article-content.ejs index 70315a0c..17013304 100644 --- a/layout/article-content.ejs +++ b/layout/article-content.ejs @@ -67,6 +67,10 @@ <% } %> + <% if (theme?.post?.share === true && page?.share !== false) { %> + <%- partial('_partial/post/post-share') %> + <% } %> + <% if (page.tags.length) { %> diff --git a/source/js/back2top.js b/source/js/back2top.js index 6fd4692f..9edffbed 100644 --- a/source/js/back2top.js +++ b/source/js/back2top.js @@ -23,15 +23,17 @@ KEEP.initBack2Top = () => { }, initBack2Top() { - this.back2TopBtn.addEventListener('click', () => { - this.back2top() - }) + this.back2TopBtn && + this.back2TopBtn.addEventListener('click', () => { + this.back2top() + }) }, initBack2Bottom() { - this.back2BottomBtn.addEventListener('click', () => { - this.back2Bottom() - }) + this.back2BottomBtn && + this.back2BottomBtn.addEventListener('click', () => { + this.back2Bottom() + }) } } From 8235b96b24028f621de73b40074c14eab66714c7 Mon Sep 17 00:00:00 2001 From: XPoet Date: Mon, 25 Sep 2023 11:28:55 +0800 Subject: [PATCH 29/36] fix: fixed the copy code button was not visible in Mac style --- source/css/common/code-block/code-block.styl | 5 ++++- source/css/common/code-block/code-theme.styl | 4 +++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/source/css/common/code-block/code-block.styl b/source/css/common/code-block/code-block.styl index 135eed0d..30049b5e 100644 --- a/source/css/common/code-block/code-block.styl +++ b/source/css/common/code-block/code-block.styl @@ -17,7 +17,7 @@ .code-tools-box { justify-content flex-end padding 0.4rem 0.6rem 0.7rem 0.4rem - background #21252b + background var(--mac-toolbar-background-color) &::before { position absolute @@ -61,6 +61,7 @@ position absolute top 3rem right 0.5rem + box-sizing border-box padding 0 0.1rem opacity 0 transition-t("opacity", "0", "0.2", "ease-in-out") @@ -74,6 +75,8 @@ .code-tools-box { + position relative + z-index $z-index-1 display flex align-items center justify-content space-between diff --git a/source/css/common/code-block/code-theme.styl b/source/css/common/code-block/code-theme.styl index 3dde6d21..e0ee8630 100644 --- a/source/css/common/code-block/code-theme.styl +++ b/source/css/common/code-block/code-theme.styl @@ -1,10 +1,11 @@ @import "../stylus-variables.styl" -// A single line block of code $code-foreground = lighten($text-color-3, 2%) $code-background = darken($background-color-1, 5%) $dark-code-foreground = lighten($dark-text-color-3, 2%) $dark-code-background = darken($dark-background-color-1, 10%) +$mac-toolbar-background-color = #21252b +$dark-mac-toolbar-background-color = #1f2021 if (hexo-config('code_block') && hexo-config('code_block.highlight_theme') == 'obsidian') { @@ -96,6 +97,7 @@ code-theme(mode) { --highlight-purple mode == 'light' ? $highlight-purple : $dark-highlight-purple --highlight-gutter-color mode == 'light' ? $highlight-gutter-color : $dark-highlight-gutter-color --highlight-gutter-bg-color mode == 'light' ? $highlight-gutter-bg-color : $dark-highlight-gutter-bg-color + --mac-toolbar-background-color mode == 'light' ? $mac-toolbar-background-color : $dark-mac-toolbar-background-color } From da77c5c22afee2ae824da11ff20876291be97daa Mon Sep 17 00:00:00 2001 From: XPoet Date: Mon, 25 Sep 2023 14:21:55 +0800 Subject: [PATCH 30/36] perf: optimize back2Top display logic --- layout/_partial/side-tools.ejs | 4 +- source/css/layout/_partial/side-tools.styl | 52 +++++++++++++--------- source/js/utils.js | 15 ++++++- 3 files changed, 45 insertions(+), 26 deletions(-) diff --git a/layout/_partial/side-tools.ejs b/layout/_partial/side-tools.ejs index 2fbe434b..61cfda00 100644 --- a/layout/_partial/side-tools.ejs +++ b/layout/_partial/side-tools.ejs @@ -46,8 +46,8 @@ -
  • - +
  • +
    • diff --git a/source/css/layout/_partial/side-tools.styl b/source/css/layout/_partial/side-tools.styl index 892d6552..b983e284 100644 --- a/source/css/layout/_partial/side-tools.styl +++ b/source/css/layout/_partial/side-tools.styl @@ -75,43 +75,51 @@ $tools-item-border-radius = 0.2rem .exposed-tools-list { - if (hexo-config('style') && hexo-config('style.scroll') && hexo-config('style.scroll.percent') == true) { - .tool-scroll-to-top { - display none - &.show { - display flex - } + .tool-scroll-to-top { + display none + + &.show { + display flex + } - &.show-arrow-up { - .percent { - display none - } - .arrow-up { - display flex - } + &.show-arrow { + .percent { + display none } - &:hover { - .percent { - display none - } + .arrow { + display flex + } + } - .arrow-up { - display flex - } + + &.show-percent { + .percent { + display flex } - .arrow-up { + .arrow { display none } + } + + &:hover { .percent { + display none + } + + .arrow { display flex - font-size 1rem } } + + + .percent { + font-size 1rem + } } } } diff --git a/source/js/utils.js b/source/js/utils.js index 092f6688..1df129db 100644 --- a/source/js/utils.js +++ b/source/js/utils.js @@ -41,13 +41,23 @@ KEEP.initUtils = () => { const percent = Math.round((scrollTop / (scrollHeight - clientHeight)) * 100) || 0 + // back to top + if (scrollTop > 10) { + this.back2TopBtn.classList.add('show') + } else { + this.back2TopBtn.classList.remove('show') + } + + // scroll progress bar if (this.isHasScrollProgressBar && this.scrollProgressBarDom) { const progressPercent = ((scrollTop / (scrollHeight - clientHeight)) * 100).toFixed(3) this.scrollProgressBarDom.style.visibility = percent === 0 ? 'hidden' : 'visible' this.scrollProgressBarDom.style.width = `${progressPercent}%` } + // scroll percent if (this.isHasScrollPercent && this.back2TopBtn) { + this.back2TopBtn.classList.add('show-percent') const percentDom = this.back2TopBtn.querySelector('.percent') if (percent === 0 || percent === undefined) { this.back2TopBtn.classList.remove('show') @@ -55,9 +65,9 @@ KEEP.initUtils = () => { this.back2TopBtn.classList.add('show') percentDom.innerHTML = percent.toFixed(0) if (percent > 99) { - this.back2TopBtn.classList.add('show-arrow-up') + this.back2TopBtn.classList.add('show-arrow') } else { - this.back2TopBtn.classList.remove('show-arrow-up') + this.back2TopBtn.classList.remove('show-arrow') } } } @@ -79,6 +89,7 @@ KEEP.initUtils = () => { } } } + this.prevScrollValue = scrollTop }, From 72157d9e6f16c4284dee60b88849846295411459 Mon Sep 17 00:00:00 2001 From: XPoet Date: Mon, 25 Sep 2023 14:49:04 +0800 Subject: [PATCH 31/36] fix: optimize article meta info icon --- layout/_partial/article-meta-info.ejs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/layout/_partial/article-meta-info.ejs b/layout/_partial/article-meta-info.ejs index 4c3ea34a..6b81c1d6 100644 --- a/layout/_partial/article-meta-info.ejs +++ b/layout/_partial/article-meta-info.ejs @@ -25,7 +25,7 @@ const home_tag_limit_number = theme?.home_article?.tag?.limit || 3 <% } %> - <% if ((post.categories.length && theme?.home_article?.category?.enable === true) || page_type === 'post') { %> + <% if (post.categories.length && (theme?.home_article?.category?.enable === true || page_type === 'post')) { %>