From b0951197a9a15bca4b5fce94bd44e29b1041c219 Mon Sep 17 00:00:00 2001 From: Jerry Date: Sat, 10 Jan 2026 13:19:23 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=84=AA=E5=8C=96=E4=BB=A3=E7=A2=BC?= =?UTF-8?q?=E9=AB=98=E4=BA=AE=E7=B3=BB=E7=B5=B1=E4=B8=A6=E4=BF=AE=E5=BE=A9?= =?UTF-8?q?=E6=A8=A3=E5=BC=8F=E5=95=8F=E9=A1=8C=20(v5.5.4-b1)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 簡化 config.pug 中的高亮設置檢測邏輯 - 重構滾動條樣式，提取為可重用的 $scrollbar-style - 優化 JavaScript 代碼高亮邏輯，增加對默認高亮的支持 - 修復打賞彈窗的邊框圓角應用位置 - 改善代碼高亮工具的檢測和處理流程 --- layout/includes/head/config.pug | 24 ++++++++++------------- package.json | 2 +- source/css/_highlight/highlight.styl | 13 ++++++++++++ source/css/_highlight/highlight/diff.styl | 7 +------ source/css/_highlight/prismjs/index.styl | 7 +------ source/css/_layout/reward.styl | 2 +- source/js/main.js | 20 ++++++++++++------- 7 files changed, 40 insertions(+), 35 deletions(-) diff --git a/layout/includes/head/config.pug b/layout/includes/head/config.pug index 99e1305..05f11a8 100644 --- a/layout/includes/head/config.pug +++ b/layout/includes/head/config.pug @@ -72,20 +72,16 @@ }) } - let highlight = 'undefined' - let syntaxHighlighter = config.syntax_highlighter - let highlightEnable = syntaxHighlighter ? ['highlight.js', 'prismjs'].includes(syntaxHighlighter) : (config.highlight.enable || config.prismjs.enable) - if (highlightEnable) { - const { copy, language, height_limit, fullpage, macStyle } = theme.code_blocks - highlight = JSON.stringify({ - plugin: syntaxHighlighter ? syntaxHighlighter : config.highlight.enable ? 'highlight.js' : 'prismjs', - highlightCopy: copy, - highlightLang: language, - highlightHeightLimit: height_limit, - highlightFullpage: fullpage, - highlightMacStyle: macStyle - }) - } + let highlightProvider = config.syntax_highlighter || (config.highlight.enable ? 'highlight.js' : config.prismjs.enable ? 'prismjs' : null) + const { copy, language, height_limit, fullpage, macStyle, shrink } = theme.code_blocks + let highlight = JSON.stringify({ + plugin: highlightProvider, + highlightCopy: copy, + highlightLang: language, + highlightHeightLimit: height_limit, + highlightFullpage: fullpage, + highlightMacStyle: macStyle + }) script. const GLOBAL_CONFIG = { diff --git a/package.json b/package.json index 702094f..4928757 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hexo-theme-butterfly", - "version": "5.5.3", + "version": "5.5.4-b1", "description": "A Simple and Card UI Design theme for Hexo", "main": "package.json", "scripts": { diff --git a/source/css/_highlight/highlight.styl b/source/css/_highlight/highlight.styl index 735dc07..bc12363 100644 --- a/source/css/_highlight/highlight.styl +++ b/source/css/_highlight/highlight.styl @@ -24,6 +24,14 @@ wordWrap = $highlight_enable && !$highlight_line_number && hexo-config('code_blo --hlscrollbar-bg: lighten(#121212, 5) --hlexpand-bg: linear-gradient(180deg, rgba(lighten(#121212, 2), .6), rgba(lighten(#121212, 2), .9)) +$scrollbar-style + // scrollbar - firefox + @-moz-document url-prefix() + scrollbar-color: var(--hlscrollbar-bg) transparent + + &::-webkit-scrollbar-thumb + background: var(--hlscrollbar-bg) + if $highlight_enable @require 'highlight/index' @@ -88,6 +96,11 @@ $code-block &:hover border-bottom-color: var(--hl-color) + &.default + pre + padding: 10px 20px + @extend $scrollbar-style + &.copy-true user-select: all -webkit-user-select: all diff --git a/source/css/_highlight/highlight/diff.styl b/source/css/_highlight/highlight/diff.styl index 728bc55..43f9652 100644 --- a/source/css/_highlight/highlight/diff.styl +++ b/source/css/_highlight/highlight/diff.styl @@ -1,11 +1,6 @@ figure.highlight table - // scrollbar - firefox - @-moz-document url-prefix() - scrollbar-color: var(--hlscrollbar-bg) transparent - - &::-webkit-scrollbar-thumb - background: var(--hlscrollbar-bg) + @extend $scrollbar-style pre .deletion color: $highlight-deletion diff --git a/source/css/_highlight/prismjs/index.styl b/source/css/_highlight/prismjs/index.styl index 30637d7..e4ed7c4 100644 --- a/source/css/_highlight/prismjs/index.styl +++ b/source/css/_highlight/prismjs/index.styl @@ -6,12 +6,7 @@ if $highlight_theme != false .container pre[class*='language-'] - // scrollbar - firefox - @-moz-document url-prefix() - scrollbar-color: var(--hlscrollbar-bg) transparent - - &::-webkit-scrollbar-thumb - background: var(--hlscrollbar-bg) + @extend $scrollbar-style &:not(.line-numbers) padding: 10px 20px diff --git a/source/css/_layout/reward.styl b/source/css/_layout/reward.styl index b6cce62..ebefab9 100644 --- a/source/css/_layout/reward.styl +++ b/source/css/_layout/reward.styl @@ -37,13 +37,13 @@ display: none padding: 0 0 15px width: 100% - addBorderRadius() .reward-all display: inline-block margin: 0 padding: 20px 10px background: var(--reward-pop) + addBorderRadius() &:before position: absolute diff --git a/source/js/main.js b/source/js/main.js index caabcec..0aab1d5 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -61,11 +61,14 @@ document.addEventListener('DOMContentLoaded', () => { const { highlightCopy, highlightLang, highlightHeightLimit, highlightFullpage, highlightMacStyle, plugin } = highLight const isHighlightShrink = GLOBAL_CONFIG_SITE.isHighlightShrink const isShowTool = highlightCopy || highlightLang || isHighlightShrink !== undefined || highlightFullpage || highlightMacStyle - const $figureHighlight = plugin === 'highlight.js' ? document.querySelectorAll('figure.highlight') : document.querySelectorAll('pre[class*="language-"]') + const isNotHighlightJs = plugin !== 'highlight.js' + const isPrismjs = plugin === 'prismjs' + const $figureHighlight = isNotHighlightJs + ? Array.from(document.querySelectorAll('code[class*="language-"]')).map(code => code.parentElement) + : document.querySelectorAll('figure.highlight') if (!((isShowTool || highlightHeightLimit) && $figureHighlight.length)) return - const isPrismjs = plugin === 'prismjs' const highlightShrinkClass = isHighlightShrink === true ? 'closed' : '' const highlightShrinkEle = isHighlightShrink !== undefined ? '' : '' const highlightCopyEle = highlightCopy ? '' : '' @@ -133,7 +136,7 @@ document.addEventListener('DOMContentLoaded', () => { const highlightCopyFn = (ele, clickEle) => { const $buttonParent = ele.parentNode $buttonParent.classList.add('copy-true') - const preCodeSelector = isPrismjs ? 'pre code' : 'table .code pre' + const preCodeSelector = isNotHighlightJs ? 'pre code' : 'table .code pre' const codeElement = $buttonParent.querySelector(preCodeSelector) if (!codeElement) return copy(codeElement.innerText, clickEle) @@ -213,20 +216,23 @@ document.addEventListener('DOMContentLoaded', () => { fragment.appendChild(ele) } - isPrismjs ? item.parentNode.insertBefore(fragment, item) : item.insertBefore(fragment, item.firstChild) + isNotHighlightJs ? item.parentNode.insertBefore(fragment, item) : item.insertBefore(fragment, item.firstChild) } $figureHighlight.forEach(item => { let langName = '' - if (isPrismjs) btf.wrap(item, 'figure', { class: 'highlight' }) + if (isNotHighlightJs) { + const newClassName = isPrismjs ? 'prismjs' : 'default' + btf.wrap(item, 'figure', { class: `highlight ${newClassName}` }) + } if (!highlightLang) { createEle('', item) return } - if (isPrismjs) { - langName = item.getAttribute('data-language') || 'Code' + if (isNotHighlightJs) { + langName = isPrismjs ? item.getAttribute('data-language') || 'Code' : item.querySelector('code').getAttribute('class').replace('language-', '') } else { langName = item.getAttribute('class').split(' ')[1] if (langName === 'plain' || langName === undefined) langName = 'Code'