+
From b51c93c8b6ded2a095b5b90b776b1a8c21fea8c8 Mon Sep 17 00:00:00 2001 From: "1152958806@qq.com" <1152958806@qq.com> Date: Tue, 18 Jul 2023 00:05:09 +0800 Subject: [PATCH 2/5] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E5=9D=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- templates/assets/libs/prism/code.css | 148 +++++++++++++++++++++++++++ templates/assets/zhheo/custom.css | 147 -------------------------- templates/modules/head.html | 2 + 3 files changed, 150 insertions(+), 147 deletions(-) create mode 100644 templates/assets/libs/prism/code.css diff --git a/templates/assets/libs/prism/code.css b/templates/assets/libs/prism/code.css new file mode 100644 index 00000000..1fdef5ae --- /dev/null +++ b/templates/assets/libs/prism/code.css @@ -0,0 +1,148 @@ +/*代码块*/ +[data-theme=light] { + --rl-code-bar-shadow: 0 5px 10px 0 rgba(144, 164, 174, 0.4); +} + +[data-theme=dark] { + --rl-code-bar-shadow: 0 0 6px 2px #272727; +} + + +#article-container .code-toolbar { + margin: 18px 0; + overflow: hidden; + -webkit-box-shadow: var(--rl-code-bar-shadow); + box-shadow: var(--rl-code-bar-shadow); + border-radius: 7px +} + +#article-container .code-toolbar:before { + content: ""; + position: absolute; + top: 11px; + left: 12px; + z-index: 1; + width: 12px; + height: 12px; + border-radius: 50%; + background-color: #fc625d; + -webkit-box-shadow: 20px 0 #fdbc40,40px 0 #35cd4b; + box-shadow: 20px 0 #fdbc40,40px 0 #35cd4b +} + +#article-container .code-toolbar .toolbar { + position: absolute; + pointer-events: none; + opacity: 1; + left: 0; + right: 0; + top: 0; + z-index: unset; + height: 35px; + line-height: 32px; + text-align: center +} + +#article-container .code-toolbar .toolbar-item:first-child { + display: none +} + +#article-container .code-toolbar .toolbar-item:first-child span { + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: 700; + font-size: 0.9em; + +} + +#article-container .code-toolbar .toolbar .custom-item { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + font-size: 1rem; + right: 12px; + color: #999; + pointer-events: all +} + +#article-container .code-toolbar .toolbar .custom-item>i { + margin-left: 10px; + -webkit-transition: -webkit-transform .2s; + transition: transform .2s; + transition: transform .2s,-webkit-transform .2s +} + +#article-container .code-toolbar .toolbar .custom-item>i:hover { + -webkit-filter: brightness(1.2); + filter: brightness(1.2) +} + + +#article-container .code-toolbar .toolbar.c-expander i.code-expander { + -webkit-transform: rotate(90deg); + transform: rotate(90deg) +} + + +#article-container .code-toolbar .toolbar.c-title .toolbar-item:first-child { + display: block +} + +#article-container .code-toolbar .toolbar.c-hr { + border-bottom: 1px solid #b2a8a84d +} + +#article-container .code-toolbar pre[class*=language-] { + position: relative; + margin: 0; + padding: 35px 0 0; + overflow: hidden; + white-space: pre; + text-shadow: none; + border-radius: 5px +} + +#article-container .code-toolbar pre[class*=language-] .line-numbers-rows { + border-right: none; + left: 0; + top: 0; + bottom: 0; + padding-top: 12px; + width: 2.7em; +} + +#article-container .code-toolbar pre[class*=language-] code[class*=language-] { + display: block; + margin-bottom: 0; + overflow-x: auto; + padding: 5px 18px 10px; + border-radius: 0 0 8px 8px; + text-shadow: none +} + +#article-container .code-toolbar pre[class*=language-] code[class*=language-]::-webkit-scrollbar { + width: 5px; + height: 5px +} + +#article-container .code-toolbar pre[class*=language-] code[class*=language-] .style .token.string,#article-container .code-toolbar pre[class*=language-] code[class*=language-] .token.entity,#article-container .code-toolbar pre[class*=language-] code[class*=language-] .token.operator,#article-container .code-toolbar pre[class*=language-] code[class*=language-] .token.string,#article-container .code-toolbar pre[class*=language-] code[class*=language-] .token.url { + background-color: transparent +} + +#article-container .code-toolbar pre[class*=language-].line-numbers code[class*=language-] { + padding: 10px 20px 10px 48px; +} + +.absolute { + position: absolute; +} +.top-0 { + top: 0; +} + +#article-container .code-toolbar pre[class*=language-] code[class*=language-].c-toggle{ + display: none; +} +/*代码块*/ \ No newline at end of file diff --git a/templates/assets/zhheo/custom.css b/templates/assets/zhheo/custom.css index 2b6ba8b2..4605dcdf 100644 --- a/templates/assets/zhheo/custom.css +++ b/templates/assets/zhheo/custom.css @@ -54,151 +54,4 @@ ul li { -/*代码块*/ -[data-theme=light] { - --rl-code-bar-shadow: 0 5px 10px 0 rgba(144, 164, 174, 0.4); -} -[data-theme=dark] { - --rl-code-bar-shadow: 0 0 6px 2px #272727; -} - - -#article-container .code-toolbar { - margin: 18px 0; - overflow: hidden; - -webkit-box-shadow: var(--rl-code-bar-shadow); - box-shadow: var(--rl-code-bar-shadow); - border-radius: 7px -} - -#article-container .code-toolbar:before { - content: ""; - position: absolute; - top: 11px; - left: 12px; - z-index: 1; - width: 12px; - height: 12px; - border-radius: 50%; - background-color: #fc625d; - -webkit-box-shadow: 20px 0 #fdbc40,40px 0 #35cd4b; - box-shadow: 20px 0 #fdbc40,40px 0 #35cd4b -} - -#article-container .code-toolbar .toolbar { - position: absolute; - pointer-events: none; - opacity: 1; - left: 0; - right: 0; - top: 0; - z-index: unset; - height: 35px; - line-height: 32px; - text-align: center -} - -#article-container .code-toolbar .toolbar-item:first-child { - display: none -} - -#article-container .code-toolbar .toolbar-item:first-child span { - background-color: transparent; - -webkit-box-shadow: none; - box-shadow: none; - font-weight: 700; - font-size: 0.9em; - -} - -#article-container .code-toolbar .toolbar .custom-item { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - font-size: 1rem; - right: 12px; - color: #999; - pointer-events: all -} - -#article-container .code-toolbar .toolbar .custom-item>i { - margin-left: 10px; - -webkit-transition: -webkit-transform .2s; - transition: transform .2s; - transition: transform .2s,-webkit-transform .2s -} - -#article-container .code-toolbar .toolbar .custom-item>i:hover { - -webkit-filter: brightness(1.2); - filter: brightness(1.2) -} - - -#article-container .code-toolbar .toolbar.c-expander i.code-expander { - -webkit-transform: rotate(90deg); - transform: rotate(90deg) -} - - -#article-container .code-toolbar .toolbar.c-title .toolbar-item:first-child { - display: block -} - -#article-container .code-toolbar .toolbar.c-hr { - border-bottom: 1px solid #b2a8a84d -} - -#article-container .code-toolbar pre[class*=language-] { - position: relative; - margin: 0; - padding: 35px 0 0; - overflow: hidden; - white-space: pre; - text-shadow: none; - border-radius: 5px -} - -#article-container .code-toolbar pre[class*=language-] .line-numbers-rows { - border-right: none; - left: 0; - top: 0; - bottom: 0; - padding-top: 12px; - width: 2.7em; -} - -#article-container .code-toolbar pre[class*=language-] code[class*=language-] { - display: block; - margin-bottom: 0; - overflow-x: auto; - padding: 5px 18px 10px; - border-radius: 0 0 8px 8px; - text-shadow: none -} - -#article-container .code-toolbar pre[class*=language-] code[class*=language-]::-webkit-scrollbar { - width: 5px; - height: 5px -} - -#article-container .code-toolbar pre[class*=language-] code[class*=language-] .style .token.string,#article-container .code-toolbar pre[class*=language-] code[class*=language-] .token.entity,#article-container .code-toolbar pre[class*=language-] code[class*=language-] .token.operator,#article-container .code-toolbar pre[class*=language-] code[class*=language-] .token.string,#article-container .code-toolbar pre[class*=language-] code[class*=language-] .token.url { - background-color: transparent -} - -#article-container .code-toolbar pre[class*=language-].line-numbers code[class*=language-] { - padding: 10px 20px 10px 48px; -} - -.absolute { - position: absolute; -} -.top-0 { - top: 0; -} - -#article-container .code-toolbar pre[class*=language-] code[class*=language-].c-toggle{ - display: none; -} -/*代码块*/ diff --git a/templates/modules/head.html b/templates/modules/head.html index cf64b30d..c9c35257 100644 --- a/templates/modules/head.html +++ b/templates/modules/head.html @@ -47,6 +47,8 @@ + Date: Tue, 18 Jul 2023 23:58:20 +0800 Subject: [PATCH 3/5] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E5=9D=97=E4=BC=98?= =?UTF-8?q?=E5=8C=96=EF=BC=8C=20=E7=9B=AE=E5=89=8D=E8=BF=98=E6=9C=89?= =?UTF-8?q?=EF=BC=8C=E9=BB=98=E8=AE=A4=E6=B2=A1=E6=9C=89=E8=AF=AD=E8=A8=80?= =?UTF-8?q?=E4=B8=8D=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 @@ - - - - - - - - - - + +