From e9d53c3e8b0cca839b9d3677a54c5226cefe2ef7 Mon Sep 17 00:00:00 2001 From: "1152958806@qq.com" <1152958806@qq.com> Date: Tue, 18 Jul 2023 23:58:20 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E5=9D=97=E4=BC=98=E5=8C=96?= =?UTF-8?q?=EF=BC=8C=20=E7=9B=AE=E5=89=8D=E8=BF=98=E6=9C=89=EF=BC=8C?= =?UTF-8?q?=E9=BB=98=E8=AE=A4=E6=B2=A1=E6=9C=89=E8=AF=AD=E8=A8=80=E4=B8=8D?= =?UTF-8?q?=E6=B8=B2=E6=9F=93=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- settings.yaml | 18 ++++ templates/assets/js/halo.js | 53 +++++++++- templates/assets/libs/prism/code.css | 139 +++++++++++++++++++++++++++ templates/assets/zhheo/zhheoblog.css | 34 +++---- templates/macro/prism-code.html | 25 +++++ templates/modules/head.html | 19 +--- 6 files changed, 251 insertions(+), 37 deletions(-) create mode 100644 templates/macro/prism-code.html diff --git a/settings.yaml b/settings.yaml index b5b5c931..16fb8091 100644 --- a/settings.yaml +++ b/settings.yaml @@ -1795,6 +1795,24 @@ spec: value: true - label: 禁用 value: false + - $formkit: radio + name: enable_height_limit + id: enable_height_limit + key: enable_height_limit + if: $get(enable).value + label: 启用代码高度限制 + help: 启用代码高度限制功能 + value: false + options: + - label: 启用 + value: true + - label: 禁用 + value: false + - $formkit: number + name: height_limit + if: $get(enable_height_limit).value + value: 300 + label: 代码高度限制 - $formkit: select name: theme_light if: $get(enable).value diff --git a/templates/assets/js/halo.js b/templates/assets/js/halo.js index 1b848736..19662014 100644 --- a/templates/assets/js/halo.js +++ b/templates/assets/js/halo.js @@ -45,6 +45,7 @@ let halo = { const isEnableCopy = GLOBAL_CONFIG.prism.enable_copy; const isEnableExpander = GLOBAL_CONFIG.prism.enable_expander; const prismLimit = GLOBAL_CONFIG.prism.prism_limit; + const isEnableHeightLimit = GLOBAL_CONFIG.prism.enable_height_limit; // https://stackoverflow.com/a/30810322/7595472 @@ -181,20 +182,62 @@ let halo = { } + + const prismToolsFn = function (e) { + const $target = e.target.classList; + if ($target.contains("code-expander")) prismShrinkFn(this); + }; + //折叠 if(isEnableExpander){ var expander = document.createElement("i"); expander.className = 'fa-sharp fa-solid fa-caret-down code-expander cursor-pointer' customItem.appendChild(expander) + expander.addEventListener('click', prismToolsFn) - const expanderCode = function () { - r.firstElementChild.classList.toggle('c-toggle') - toolbar.classList.toggle('c-expander') + + + } + + + const expandCode = function () { + this.classList.toggle("expand-done"); + this.style.display = "none"; + r.classList.toggle("expand-done"); + }; + + if (isEnableHeightLimit && r.offsetHeight > prismLimit) { + + r.classList.add("close") + const ele = document.createElement("div"); + ele.className = "code-expand-btn"; + ele.innerHTML = ''; + ele.addEventListener("click", expandCode); + r.offsetParent.appendChild(ele); + } + + + + + const prismShrinkFn = ele => { + const $nextEle = r.offsetParent.lastElementChild.classList + toolbar.classList.toggle('c-expander') + r.classList.toggle("expand-done-expander"); + if (toolbar.classList.contains('c-expander')) { + r.firstElementChild.style.display = "none"; + if($nextEle.contains('code-expand-btn')){ + r.offsetParent.lastElementChild.style.display = "none"; + } + } else { + r.firstElementChild.style.display = "block"; + if($nextEle.contains('code-expand-btn') && !r.classList.contains('expand-done')){ + r.offsetParent.lastElementChild.style.display = "block"; + } } - expander.addEventListener('click', expanderCode) - } + }; + toolbar.appendChild(customItem) diff --git a/templates/assets/libs/prism/code.css b/templates/assets/libs/prism/code.css index 1fdef5ae..316cc866 100644 --- a/templates/assets/libs/prism/code.css +++ b/templates/assets/libs/prism/code.css @@ -145,4 +145,143 @@ #article-container .code-toolbar pre[class*=language-] code[class*=language-].c-toggle{ display: none; } + +/* 代码展开图标 */ +#article-container .code-expand-btn { + transition: 0.3s; + backdrop-filter: saturate(180%) blur(500px); + -webkit-backdrop-filter: blur(20px); + transform: translateZ(0); + position: absolute; + bottom: 0px; + z-index: 10; + width: 100%; + text-align: center; + font-size: var(--global-font-size); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + height: 32px; +} + +#article-container .code-expand-btn:hover i { + color: var(--heo-white); +} + +#article-container .code-expand-btn i { + color: var(--hlnumber-color); + font-size: 14px; + line-height: 1; +} + + +#article-container .code-expand-btn.expand-done { + -webkit-transform: rotate(180deg); + -moz-transform: rotate(180deg); + -o-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} + +#article-container pre{ + border:0px; +} + +#article-container .code-expand-btn:hover { + background: var(--heo-main); +} + +#article-container .code-expand-btn:hover i { + color: var(--heo-white); +} + +#article-container .code-toolbar pre.close.expand-done{ + height: 100%; +} +#article-container .code-toolbar pre.close.expand-done-expander{ + height: 100%; +} + + +@-moz-keyframes code-expand-key { + 0% { + opacity: .6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60) + } + + 50% { + opacity: .1; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; + filter: alpha(opacity=10) + } + + 100% { + opacity: .6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60) + } +} + +@-webkit-keyframes code-expand-key { + 0% { + opacity: .6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60) + } + + 50% { + opacity: .1; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; + filter: alpha(opacity=10) + } + + 100% { + opacity: .6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60) + } +} + +@-o-keyframes code-expand-key { + 0% { + opacity: .6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60) + } + + 50% { + opacity: .1; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; + filter: alpha(opacity=10) + } + + 100% { + opacity: .6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60) + } +} + +@keyframes code-expand-key { + 0% { + opacity: .6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60) + } + + 50% { + opacity: .1; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; + filter: alpha(opacity=10) + } + + 100% { + opacity: .6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60) + } +} + /*代码块*/ \ No newline at end of file diff --git a/templates/assets/zhheo/zhheoblog.css b/templates/assets/zhheo/zhheoblog.css index 05041853..ce8ecc9a 100644 --- a/templates/assets/zhheo/zhheoblog.css +++ b/templates/assets/zhheo/zhheoblog.css @@ -12075,26 +12075,26 @@ blockquote p { /*}*/ /* 代码展开图标 */ -#article-container .code-expand-btn i { - color: var(--heo-fontcolor); - font-size: 1rem; -} +/*#article-container .code-expand-btn i {*/ +/* color: var(--heo-fontcolor);*/ +/* font-size: 1rem;*/ +/*}*/ -#article-container .code-expand-btn { - background-color: var(--heo-mask); - background: var(--heo-secondbg); - transition: 0.3s; - backdrop-filter: saturate(180%) blur(20px); - -webkit-backdrop-filter: blur(20px); -} +/*#article-container .code-expand-btn {*/ +/* background-color: var(--heo-mask);*/ +/* background: var(--heo-secondbg);*/ +/* transition: 0.3s;*/ +/* backdrop-filter: saturate(180%) blur(20px);*/ +/* -webkit-backdrop-filter: blur(20px);*/ +/*}*/ -#article-container .code-expand-btn:hover { - background: var(--heo-main); -} +/*#article-container .code-expand-btn:hover {*/ +/* background: var(--heo-main);*/ +/*}*/ -#article-container .code-expand-btn:hover i { - color: var(--heo-white); -} +/*#article-container .code-expand-btn:hover i {*/ +/* color: var(--heo-white);*/ +/*}*/ /* 结尾寄语 */ #readmore-talk { diff --git a/templates/macro/prism-code.html b/templates/macro/prism-code.html new file mode 100644 index 00000000..7dab6200 --- /dev/null +++ b/templates/macro/prism-code.html @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/templates/modules/head.html b/templates/modules/head.html index c9c35257..36f2ef24 100644 --- a/templates/modules/head.html +++ b/templates/modules/head.html @@ -42,20 +42,8 @@ - - - - - - - - - - + +