From e65ec7f71145efbd434ede8dc5f4fc59c580537d Mon Sep 17 00:00:00 2001 From: XPoet Date: Wed, 28 Sep 2022 23:53:03 +0800 Subject: [PATCH] refactor: refactor code block and add collapse (#85, #171) --- _config.yml | 5 +- layout/_partial/scripts.ejs | 25 ++- scripts/helpers/export-config.js | 15 +- .../common/code-block/code-block-tools.styl | 135 ++++++++++++ .../{codeblock => code-block}/code-theme.styl | 38 ++-- source/css/common/code-block/highlight.styl | 204 ++++++++++++++++++ source/css/common/codeblock/copy-code.styl | 66 ------ source/css/common/codeblock/highlight.styl | 204 ------------------ source/css/common/variables.styl | 2 +- .../layout/_partial/article-meta-info.styl | 2 +- source/css/style.styl | 6 +- source/js/code-block-tools.js | 85 ++++++++ source/js/code-copy.js | 46 ---- source/js/main.js | 11 +- 14 files changed, 484 insertions(+), 360 deletions(-) create mode 100644 source/css/common/code-block/code-block-tools.styl rename source/css/common/{codeblock => code-block}/code-theme.styl (84%) create mode 100644 source/css/common/code-block/highlight.styl delete mode 100644 source/css/common/codeblock/copy-code.styl delete mode 100644 source/css/common/codeblock/highlight.styl create mode 100644 source/js/code-block-tools.js delete mode 100644 source/js/code-copy.js diff --git a/_config.yml b/_config.yml index d683e3b..ea94eab 100644 --- a/_config.yml +++ b/_config.yml @@ -141,9 +141,10 @@ post: custom_label_list: ["Trainee", "Engineer", "Architect"] # --------------------------------------------------------------------------------------- -# Code copy +# Code block tools +# Support code copy and code block collapse # --------------------------------------------------------------------------------------- -code_copy: +code_block_tools: enable: false # Option values: true | false style: default # Option values: default | mac diff --git a/layout/_partial/scripts.ejs b/layout/_partial/scripts.ejs index 1c71a8f..c07da5e 100644 --- a/layout/_partial/scripts.ejs +++ b/layout/_partial/scripts.ejs @@ -6,20 +6,31 @@ 'js/dark-light-toggle.js' ]) %> -<% if (theme.local_search.enable) { %> +<% +const { + local_search: t_local_search, + code_copy: t_code_copy, + code_block_tools: t_code_block_tools, + lazyload: t_lazyload, + toc: t_toc, + pjax: t_pjax +} = theme +%> + +<% if (t_local_search?.enable === true) { %> <%- __js('js/local-search.js') %> <% } %> -<% if (theme.code_copy.enable) { %> - <%- __js('js/code-copy.js') %> +<% if (t_code_block_tools.enable === true || t_code_copy.enable === true) { %> + <%- __js('js/code-block-tools.js') %> <% } %> -<% if (theme.lazyload.enable) { %> +<% if (t_lazyload?.enable === true) { %> <%- __js('js/lazyload.js') %> <% } %> -
- <% if (theme.toc.enable && is_post()) { %> +
+ <% if (t_toc?.enable === true && is_post()) { %> <%- __js([ 'js/left-side-toggle.js', 'js/libs/anime.min.js', @@ -28,6 +39,6 @@ <% } %>
-<% if (theme.pjax.enable === true) { %> +<% if (t_pjax?.enable === true) { %> <%- partial('pjax/pjax') %> <% } %> diff --git a/scripts/helpers/export-config.js b/scripts/helpers/export-config.js index a728df5..b901f23 100644 --- a/scripts/helpers/export-config.js +++ b/scripts/helpers/export-config.js @@ -37,13 +37,14 @@ hexo.extend.helper.register('export_config', function () { } let theme_config = { - toc: theme.toc, - style: theme.style, - local_search: theme.local_search, - code_copy: theme.code_copy, - side_tools: theme.side_tools, - pjax: theme.pjax, - lazyload: theme.lazyload, + toc: theme.toc || {}, + style: theme.style || {}, + local_search: theme.local_search || {}, + code_copy: theme.code_copy || {}, + code_block_tools: theme.code_block_tools || {}, + side_tools: theme.side_tools || {}, + pjax: theme.pjax || {}, + lazyload: theme.lazyload || {}, version: theme.version } diff --git a/source/css/common/code-block/code-block-tools.styl b/source/css/common/code-block/code-block-tools.styl new file mode 100644 index 0000000..5730553 --- /dev/null +++ b/source/css/common/code-block/code-block-tools.styl @@ -0,0 +1,135 @@ +disable-user-select() { + -moz-user-select none + -ms-user-select none + -webkit-user-select none + user-select none +} + +.highlight-container { + position relative + box-sizing border-box + margin 1.4rem 0 + overflow hidden + + .code-tools-box { + box-sizing border-box + width 100% + background var(--fourth-text-color) + border-top-left-radius 0.3rem + border-top-right-radius 0.3rem + display flex + justify-content space-between + align-items center + padding 0.3rem 0.6rem 0.3rem 0.4rem + + &.folded { + border-bottom-left-radius 0.3rem + border-bottom-right-radius 0.3rem + } + + .code-lang { + margin-left 0.2rem + font-size 0.9rem + font-weight 600 + font-family "Source Code Pro", consolas, Menlo + color var(--default-text-color) + justify-content flex-start + } + + .tool { + disable-user-select() + cursor pointer + + i { + color var(--second-text-color) + font-size 0.8rem + } + } + + + .fold { + font-weight bold + padding 0.1rem 0.4rem 0.1rem 0.2rem + } + + } + + + figure.highlight { + margin 0 + + &.folded { + height 0 + } + } + + + if (hexo-config('code_block_tools.style') == 'mac' || hexo-config('code_copy.style') == 'mac') { + margin 1.4rem 0 1.8rem 0 + box-shadow 0 0.8rem 2rem 0 rgba(0, 0, 0, .4) + + &:hover { + .code-tools-box .copy { + opacity 1 + } + } + + .code-tools-box { + justify-content flex-end + background #21252b + padding 0.4rem 0.6rem 0.7rem 0.4rem + + &::before { + position absolute + content '' + width 0.8rem + height 0.8rem + left 0.8rem + background #fc625d + border-radius 50% + box-shadow 1.4rem 0 #fdbc40, 2.8rem 0 #35cd4b + } + + &.folded { + border-bottom-left-radius 0 + border-bottom-right-radius 0 + + .copy { + display none + } + } + + .code-lang { + order 1 + color #bbb + } + + .fold { + order 2 + padding 0.1rem 0.1rem 0.1rem 0.6rem + i { + color #ccc + } + } + + + .copy { + position absolute + bottom 0 + right 0 + padding 0.4rem 0.5rem + font-weight bold + opacity 0 + transition-t("opacity", "0", "0.2", "ease-in-out") + + i { + font-size 1rem + } + + } + + } + + } + +} diff --git a/source/css/common/codeblock/code-theme.styl b/source/css/common/code-block/code-theme.styl similarity index 84% rename from source/css/common/codeblock/code-theme.styl rename to source/css/common/code-block/code-theme.styl index dc02ffc..20c3715 100644 --- a/source/css/common/codeblock/code-theme.styl +++ b/source/css/common/code-block/code-theme.styl @@ -35,44 +35,44 @@ $night-highlight-deletion = #008000 $night-highlight-addition = #800000 code-theme(mode) { - --code-foreground: mode == 'light' ? $code-foreground : $night-code-foreground; - --code-background: mode == 'light' ? $code-background : $night-code-background; - --highlight-background: mode == 'light' ? $highlight-background : $night-highlight-background; - --highlight-foreground: mode == 'light' ? $highlight-foreground : $night-highlight-foreground; - --highlight-comment: mode == 'light' ? $highlight-comment : $night-highlight-comment; - --highlight-red: mode == 'light' ? $highlight-red : $night-highlight-red; - --highlight-orange: mode == 'light' ? $highlight-orange : $night-highlight-orange; - --highlight-yellow: mode == 'light' ? $highlight-yellow : $night-highlight-yellow; - --highlight-green: mode == 'light' ? $highlight-green : $night-highlight-green; - --highlight-aqua: mode == 'light' ? $highlight-aqua : $night-highlight-aqua; - --highlight-blue: mode == 'light' ? $highlight-blue : $night-highlight-blue; - --highlight-purple: mode == 'light' ? $highlight-purple : $night-highlight-purple; - --highlight-gutter-color: mode == 'light' ? $highlight-gutter-color : $night-highlight-gutter-color; - --highlight-gutter-bg-color: mode == 'light' ? $highlight-gutter-bg-color : $night-highlight-gutter-bg-color; + --code-foreground: mode == 'light' ? $code-foreground : $night-code-foreground + --code-background: mode == 'light' ? $code-background : $night-code-background + --highlight-background: mode == 'light' ? $highlight-background : $night-highlight-background + --highlight-foreground: mode == 'light' ? $highlight-foreground : $night-highlight-foreground + --highlight-comment: mode == 'light' ? $highlight-comment : $night-highlight-comment + --highlight-red: mode == 'light' ? $highlight-red : $night-highlight-red + --highlight-orange: mode == 'light' ? $highlight-orange : $night-highlight-orange + --highlight-yellow: mode == 'light' ? $highlight-yellow : $night-highlight-yellow + --highlight-green: mode == 'light' ? $highlight-green : $night-highlight-green + --highlight-aqua: mode == 'light' ? $highlight-aqua : $night-highlight-aqua + --highlight-blue: mode == 'light' ? $highlight-blue : $night-highlight-blue + --highlight-purple: mode == 'light' ? $highlight-purple : $night-highlight-purple + --highlight-gutter-color: mode == 'light' ? $highlight-gutter-color : $night-highlight-gutter-color + --highlight-gutter-bg-color: mode == 'light' ? $highlight-gutter-bg-color : $night-highlight-gutter-bg-color } :root { - code-theme('light'); + code-theme('light') } @media (prefers-color-scheme: light) { :root { - code-theme('light'); + code-theme('light') } } @media (prefers-color-scheme: dark) { :root { - code-theme('dark'); + code-theme('dark') } } .light-mode { - code-theme('light'); + code-theme('light') } .dark-mode { - code-theme('dark'); + code-theme('dark') } diff --git a/source/css/common/code-block/highlight.styl b/source/css/common/code-block/highlight.styl new file mode 100644 index 0000000..19c09e3 --- /dev/null +++ b/source/css/common/code-block/highlight.styl @@ -0,0 +1,204 @@ +@require "code-theme.styl" + +$code-block { + overflow auto + margin 20px 0 + padding 0 + font-size 0.96rem + line-height 1.5rem + color var(--highlight-foreground) + background var(--highlight-background) +} + + +pre, code { + font-family "Source Code Pro", consolas, Menlo +} + +code { + padding 5px + word-wrap break-word + border-radius 2px + font-size 0.96rem + color var(--code-foreground) + background var(--code-background) +} + +pre { + @extend $code-block + padding 10px + + code { + padding 0 + color var(--highlight-foreground) + background none + text-shadow none + } +} + +.highlight { + @extend $code-block + border-radius 1px + + pre { + border none + margin 0 + padding 10px 0 + } + + + table { + margin 0 + width auto + border none + border-spacing unset + } + + + td { + border none + padding 0 + } + + figcaption { + font-size 1rem + color var(--highlight-foreground) + line-height 1rem + margin-bottom 1rem + + a { + float right + color var(--highlight-foreground) + + &:hover { + border-bottom-color var(--highlight-foreground) + } + } + } + + .gutter pre { + padding-left 10px + padding-right 10px + color var(--highlight-gutter-color) + text-align center + background-color var(--highlight-gutter-bg-color) + } + + .code pre { + width 100% + padding-left 10px + padding-right 10px + background-color var(--highlight-background) + } + + .line { + height 20px + color var(--default-text-color) + + .attr { + color var(--default-text-color) + } + + .string { + color var(--default-text-color) + } + + } +} + + +.gutter { + -webkit-user-select none + -moz-user-select none + -ms-user-select none + user-select none +} + +.gist table { + width auto + + td { + border none + } +} + +// For diff highlight +pre .deletion { + background var(--highlight-deletion) +} + +pre .addition { + background var(--highlight-addition) +} + +pre .meta { + color var(--highlight-purple) +} + +pre { + + .comment { + color var(--highlight-comment) + } + + .variable + .attribute + .tag + .regexp + .ruby .constant + .xml .tag .title + .xml .pi + .xml .doctype + .html .doctype + .css .id + .css .class + .css .pseudo { + color var(--highlight-red) + } + + .number + .preprocessor + .built_in + .literal + .params + .constant + .command { + color var(--highlight-orange) + } + + .ruby .class .title + .css .rules .attribute + .string + .value + .inheritance + .header + .ruby .symbol + .xml .cdata + .special + .number + .formula { + color var(--highlight-green) + } + + .title + .css .hexcolor { + color var(--highlight-aqua) + } + + .function + .python .decorator + .python .title + .ruby .function .title + .ruby .title .keyword + .perl .sub + .javascript .title + .coffeescript .title { + color var(--highlight-blue) + } + + .keyword + .javascript .function { + color var(--highlight-purple) + } + +} diff --git a/source/css/common/codeblock/copy-code.styl b/source/css/common/codeblock/copy-code.styl deleted file mode 100644 index 89fb9dc..0000000 --- a/source/css/common/codeblock/copy-code.styl +++ /dev/null @@ -1,66 +0,0 @@ -disable-user-select() { - -moz-user-select: none; - -ms-user-select: none; - -webkit-user-select: none; - user-select: none; -} - -.highlight-container { - position: relative; -} - -.highlight-container:hover .copy-btn, .highlight-container .copy-btn:focus { - opacity: 1; -} - -.copy-btn { - cursor: pointer; - display: inline-block; - font-weight: bold; - line-height: 1.8; - opacity: 0; - outline: 0; - padding: 2px 6px; - position: absolute; - vertical-align: middle; - white-space: nowrap; - font-size: 1rem; - color: var(--default-text-color); - disable-user-select(); - transition-t("opacity", "0", "0.2", "ease-in-out"); - - - if (hexo-config('code_copy.style') == 'mac') { - color: white; - right: 2px; - top: 2px; - } else { - background: var(--background-color); - border: 0; - right: 0; - top: 0; - } -} - - -if (hexo-config('code_copy.style') == 'mac') { - .highlight-container { - background: #21252b; - border-radius: 5px; - box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4); - padding-top: 20px; - margin-top: 10px; - - &::before { - background: #fc625d; - border-radius: 50%; - box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b; - content: ' '; - height: 12px; - left: 12px; - margin-top: -10px; - position: absolute; - width: 12px; - } - } -} diff --git a/source/css/common/codeblock/highlight.styl b/source/css/common/codeblock/highlight.styl deleted file mode 100644 index 2517bca..0000000 --- a/source/css/common/codeblock/highlight.styl +++ /dev/null @@ -1,204 +0,0 @@ -@require "code-theme.styl" - -$code-block { - overflow: auto; - margin: 20px 0; - padding: 0; - font-size 0.96rem; - line-height: 1.5rem; - color: var(--highlight-foreground); - background: var(--highlight-background); -} - - -pre, code { - font-family: "Source Code Pro", consolas, Menlo; -} - -code { - padding: 5px; - word-wrap: break-word; - border-radius: 2px; - font-size: 0.96rem; - color: var(--code-foreground); - background: var(--code-background); -} - -pre { - @extend $code-block; - padding: 10px; - - code { - padding: 0; - color: var(--highlight-foreground); - background: none; - text-shadow: none; - } -} - -.highlight { - @extend $code-block; - border-radius: 1px; - - pre { - border: none; - margin: 0; - padding: 10px 0; - } - - - table { - margin: 0; - width: auto; - border: none; - border-spacing: unset; - } - - - td { - border: none; - padding: 0; - } - - figcaption { - font-size: 1rem; - color: var(--highlight-foreground); - line-height: 1rem; - margin-bottom: 1rem; - - a { - float: right; - color: var(--highlight-foreground); - - &:hover { - border-bottom-color: var(--highlight-foreground); - } - } - } - - .gutter pre { - padding-left: 10px; - padding-right: 10px; - color: var(--highlight-gutter-color); - text-align: center; - background-color: var(--highlight-gutter-bg-color); - } - - .code pre { - width: 100%; - padding-left: 10px; - padding-right: 10px; - background-color: var(--highlight-background); - } - - .line { - height: 20px; - color: var(--default-text-color); - - .attr { - color: var(--default-text-color); - } - - .string { - color: var(--default-text-color); - } - - } -} - - -.gutter { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.gist table { - width: auto; - - td { - border: none; - } -} - -// For diff highlight -pre .deletion { - background: var(--highlight-deletion); -} - -pre .addition { - background: var(--highlight-addition); -} - -pre .meta { - color: var(--highlight-purple); -} - -pre { - - .comment { - color: var(--highlight-comment); - } - - .variable - .attribute - .tag - .regexp - .ruby .constant - .xml .tag .title - .xml .pi - .xml .doctype - .html .doctype - .css .id - .css .class - .css .pseudo { - color: var(--highlight-red); - } - - .number - .preprocessor - .built_in - .literal - .params - .constant - .command { - color: var(--highlight-orange); - } - - .ruby .class .title - .css .rules .attribute - .string - .value - .inheritance - .header - .ruby .symbol - .xml .cdata - .special - .number - .formula { - color: var(--highlight-green); - } - - .title - .css .hexcolor { - color: var(--highlight-aqua); - } - - .function - .python .decorator - .python .title - .ruby .function .title - .ruby .title .keyword - .perl .sub - .javascript .title - .coffeescript .title { - color: var(--highlight-blue); - } - - .keyword - .javascript .function { - color: var(--highlight-purple); - } - -} diff --git a/source/css/common/variables.styl b/source/css/common/variables.styl index 6ea9621..d78dee1 100644 --- a/source/css/common/variables.styl +++ b/source/css/common/variables.styl @@ -90,7 +90,7 @@ $dark-default-text-color = #bebec6; $dark-first-text-color = lighten($dark-default-text-color, 30%); $dark-second-text-color = lighten($dark-default-text-color, 20%); $dark-third-text-color = darken($dark-default-text-color, 20%); -$dark-fourth-text-color = darken($dark-default-text-color, 80%); +$dark-fourth-text-color = darken($dark-default-text-color, 75%); $dark-border-color = lighten($dark-background-color, 20%); $dark-selection-color = $selection-color; $dark-shadow-color = rgba(128, 128, 128, 0.2); diff --git a/source/css/layout/_partial/article-meta-info.styl b/source/css/layout/_partial/article-meta-info.styl index 9f7735c..dabd49d 100644 --- a/source/css/layout/_partial/article-meta-info.styl +++ b/source/css/layout/_partial/article-meta-info.styl @@ -1,9 +1,9 @@ .article-meta-info { font-size: 0.8rem; - color: var(--third-text-color); .article-meta-item { margin-right: 10px; + color: var(--third-text-color); &:last-child { margin-right: 0; diff --git a/source/css/style.styl b/source/css/style.styl index dea0030..2f56545 100644 --- a/source/css/style.styl +++ b/source/css/style.styl @@ -1,8 +1,8 @@ @import "common/basic.styl" @import "common/markdown.styl" -@import "common/codeblock/highlight.styl" -@import "common/codeblock/copy-code.styl" -@import "common/codeblock/code-theme.styl" +@import "common/code-block/highlight.styl" +@import "common/code-block/code-block-tools.styl" +@import "common/code-block/code-theme.styl" @import "layout/page.styl" @import "layout/_partial/local-search.styl" @import "layout/_partial/toc.styl" diff --git a/source/js/code-block-tools.js b/source/js/code-block-tools.js new file mode 100644 index 0000000..88f13d2 --- /dev/null +++ b/source/js/code-block-tools.js @@ -0,0 +1,85 @@ +/* global KEEP */ + +KEEP.initCodeBlockTools = () => { + HTMLElement.prototype.wrap = function (wrapper) { + this.parentNode.insertBefore(wrapper, this); + this.parentNode.removeChild(this); + wrapper.appendChild(this); + }; + + const { style: codeCopyStyle } = KEEP.theme_config?.code_copy; + const { style: codeBlockStyle } = KEEP.theme_config?.code_block_tools; + const isMac = (codeBlockStyle || codeCopyStyle || 'default') === 'mac'; + const foldedIconClassName = isMac ? 'fas fa-chevron-left' : 'fas fa-chevron-right'; + + const foldDom = `` + + document.querySelectorAll('figure.highlight').forEach(element => { + let codeLang = element.classList.length ? element.classList[1].toUpperCase() : ''; + if (codeLang === 'PLAINTEXT') { codeLang = '' } + const highlightContainer = document.createElement('div'); + highlightContainer.classList.add('highlight-container'); + element.wrap(highlightContainer); + + const codeLangDom = `${codeLang ? '' + codeLang + '' : ''}` + + highlightContainer.insertAdjacentHTML( + 'afterbegin', + `
+ ${isMac ? foldDom + codeLangDom : '' + foldDom + codeLangDom + ''} + +
` + ); + const codeToolsBox = element.parentNode.querySelector('.code-tools-box'); + const copyDom = codeToolsBox.querySelector('.copy'); + const targetFoldDom = codeToolsBox.querySelector('.fold'); + + copyDom.addEventListener('click', event => { + const target = event.currentTarget; + const code = [...element.querySelectorAll('.code .line')].map(line => line.innerText).join('\n'); + const tta = document.createElement('textarea'); + tta.style.top = window.scrollY + 'px'; + tta.style.position = 'absolute'; + tta.style.opacity = '0'; + tta.readOnly = true; + tta.value = code; + document.body.append(tta); + const selection = document.getSelection(); + const selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false; + tta.select(); + tta.setSelectionRange(0, code.length); + tta.readOnly = false; + const result = document.execCommand('copy'); + target.querySelector('i').className = result ? 'fas fa-check' : 'fas fa-times'; + tta.blur(); + target.blur(); + if (selected) { + selection.removeAllRanges(); + selection.addRange(selected); + } + document.body.removeChild(tta); + }); + + copyDom.addEventListener('mouseleave', event => { + setTimeout(() => { + event.target.querySelector('i').className = 'fas fa-copy'; + }, 500); + }); + + let isFold = false + targetFoldDom.addEventListener('click', event => { + const target = event.currentTarget; + const icon = target.querySelector('i'); + isFold = !isFold + if (isFold) { + icon.className = foldedIconClassName + element.classList.add('folded'); + codeToolsBox.classList.add('folded'); + } else { + icon.className = 'fas fa-chevron-down'; + element.classList.remove('folded'); + codeToolsBox.classList.remove('folded'); + } + }); + }); +} diff --git a/source/js/code-copy.js b/source/js/code-copy.js deleted file mode 100644 index 9f528b4..0000000 --- a/source/js/code-copy.js +++ /dev/null @@ -1,46 +0,0 @@ -KEEP.initCodeCopy = () => { - - HTMLElement.prototype.wrap = function (wrapper) { - this.parentNode.insertBefore(wrapper, this); - this.parentNode.removeChild(this); - wrapper.appendChild(this); - }; - - document.querySelectorAll('figure.highlight').forEach(element => { - const box = document.createElement('div'); - element.wrap(box); - box.classList.add('highlight-container'); - box.insertAdjacentHTML('beforeend', '
'); - const button = element.parentNode.querySelector('.copy-btn'); - button.addEventListener('click', event => { - const target = event.currentTarget; - const code = [...target.parentNode.querySelectorAll('.code .line')].map(line => line.innerText).join('\n'); - const ta = document.createElement('textarea'); - ta.style.top = window.scrollY + 'px'; // Prevent page scrolling - ta.style.position = 'absolute'; - ta.style.opacity = '0'; - ta.readOnly = true; - ta.value = code; - document.body.append(ta); - const selection = document.getSelection(); - const selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false; - ta.select(); - ta.setSelectionRange(0, code.length); - ta.readOnly = false; - const result = document.execCommand('copy'); - target.querySelector('i').className = result ? 'fas fa-check' : 'fas fa-times'; - ta.blur(); // For iOS - target.blur(); - if (selected) { - selection.removeAllRanges(); - selection.addRange(selected); - } - document.body.removeChild(ta); - }); - button.addEventListener('mouseleave', event => { - setTimeout(() => { - event.target.querySelector('i').className = 'fas fa-copy'; - }, 300); - }); - }); -} diff --git a/source/js/main.js b/source/js/main.js index 6453867..fd4dc6b 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -50,15 +50,18 @@ window.addEventListener('DOMContentLoaded', () => { KEEP.initModeToggle(); KEEP.initBack2Top(); - if (KEEP.theme_config.local_search.enable === true) { + if (KEEP.theme_config.local_search?.enable === true) { KEEP.initLocalSearch(); } - if (KEEP.theme_config.code_copy.enable === true) { - KEEP.initCodeCopy(); + if ( + KEEP.theme_config.code_block_tools?.enable === true + || KEEP.theme_config.code_copy?.enable === true + ) { + KEEP.initCodeBlockTools(); } - if (KEEP.theme_config.lazyload.enable === true) { + if (KEEP.theme_config.lazyload?.enable === true) { KEEP.initLazyLoad(); } }