From 53bbd972a669e40f9c9c0c33b610230e8d7b6608 Mon Sep 17 00:00:00 2001 From: xaoxuu Date: Tue, 9 May 2023 12:54:34 +0800 Subject: [PATCH] [opt] copycode --- _config.yml | 13 ++--- layout/_partial/main/copycode.ejs | 86 ------------------------------- layout/_partial/scripts/index.ejs | 3 ++ layout/layout.ejs | 1 - source/css/_plugins/copycode.styl | 27 ++++++++++ source/css/_plugins/index.styl | 2 + source/js/main.js | 4 ++ source/js/plugins/copycode.js | 51 ++++++++++++++++++ 8 files changed, 94 insertions(+), 93 deletions(-) delete mode 100644 layout/_partial/main/copycode.ejs create mode 100644 source/css/_plugins/copycode.styl create mode 100644 source/js/plugins/copycode.js diff --git a/_config.yml b/_config.yml index 8d17857..36b6a3b 100755 --- a/_config.yml +++ b/_config.yml @@ -78,12 +78,6 @@ TianliGpt: wiki: true api: 5Q5mpqRK5DkwT1X9Gi5e -# 代码块 -CodeBlock: - show_copy: true - default_text: 'copy' - success_text: 'copied' - search: service: local_search # local_search, todo... local_search: # 在 front-matter 中设置 indexing:false 来避免被搜索索引 @@ -366,6 +360,13 @@ plugins: # 推荐使用 dark 主题 在夜间模式下显示效果更好 theme: dark + # 代码块复制按钮 + copycode: + enable: true + js: /js/plugins/copycode.js + default_text: 'Copy' + success_text: 'Copied' + style: darkmode: auto # auto / always / false smooth_scroll: true # true / false diff --git a/layout/_partial/main/copycode.ejs b/layout/_partial/main/copycode.ejs deleted file mode 100644 index 557d0da..0000000 --- a/layout/_partial/main/copycode.ejs +++ /dev/null @@ -1,86 +0,0 @@ -<% if (theme.CodeBlock.show_copy) { %> - - - -<% } %> - diff --git a/layout/_partial/scripts/index.ejs b/layout/_partial/scripts/index.ejs index 02cdded..4e58315 100644 --- a/layout/_partial/scripts/index.ejs +++ b/layout/_partial/scripts/index.ejs @@ -143,6 +143,9 @@ if ('<%- theme.plugins.heti.enable %>' == 'true') { stellar.plugins.heti = Object.assign(<%- JSON.stringify(theme.plugins.heti) %>); } + if ('<%- theme.plugins.copycode.enable %>' == 'true') { + stellar.plugins.copycode = Object.assign(<%- JSON.stringify(theme.plugins.copycode) %>); + } diff --git a/layout/layout.ejs b/layout/layout.ejs index c2daa04..1e1e36b 100755 --- a/layout/layout.ejs +++ b/layout/layout.ejs @@ -16,7 +16,6 @@
<%- partial('_partial/scripts/index') %> - <%- partial('_partial/main/copycode') %>
diff --git a/source/css/_plugins/copycode.styl b/source/css/_plugins/copycode.styl new file mode 100644 index 0000000..ecec531 --- /dev/null +++ b/source/css/_plugins/copycode.styl @@ -0,0 +1,27 @@ +.highlight + position: relative + +.highlight .code .copy-btn + position: absolute + top: 0 + right: 0 + padding: 4px 0.5rem + opacity: 0 + font-weight: 700 + color: var(--theme) + cursor: pointer + +.highlight:hover .copy-btn + opacity 0.25 + +.highlight .code .copy-btn:hover + color: var(--theme) + opacity: 0.75 + +.highlight .code .copy-btn.success + color: $c-green + opacity: 0.75 + +.highlight .code .copy-btn.warning + color: $c-orange + opacity: 0.75 \ No newline at end of file diff --git a/source/css/_plugins/index.styl b/source/css/_plugins/index.styl index 2524c35..bde7511 100644 --- a/source/css/_plugins/index.styl +++ b/source/css/_plugins/index.styl @@ -11,6 +11,8 @@ if hexo-config('plugins.fancybox.enable') @import 'fancybox' if hexo-config('plugins.mermaid.enable') @import 'mermaid' +if hexo-config('plugins.copycode.enable') + @import 'copycode' // 评论 diff --git a/source/js/main.js b/source/js/main.js index 0ad4eed..fc8e2a7 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -385,3 +385,7 @@ if (stellar.plugins.heti) { stellar.plugins.heti.enable = false; }); } + +if (stellar.plugins.copycode) { + stellar.loadScript(stellar.plugins.copycode.js, { defer: true }) +} \ No newline at end of file diff --git a/source/js/plugins/copycode.js b/source/js/plugins/copycode.js new file mode 100644 index 0000000..2b80b22 --- /dev/null +++ b/source/js/plugins/copycode.js @@ -0,0 +1,51 @@ +const codeElementArr = document.querySelectorAll('.code') +codeElementArr.forEach(code => { + const codeBeforeWidth = window.getComputedStyle(code, '::before').width.split('px')[0] + const codeBeforePadding = window.getComputedStyle(code, '::before').padding.split(' ').pop().split('px')[0] + + // copy btn + const codeCopyBtn = document.createElement('div') + codeCopyBtn.classList.add('copy-btn') + codeCopyBtn.style.right = Number(codeBeforeWidth) + Number(codeBeforePadding) * 2 + 'px' + codeCopyBtn.innerText = stellar.plugins.copycode.default_text + + code.appendChild(codeCopyBtn) + + codeCopyBtn.addEventListener('click', async () => { + const currentCodeElement = code.children[0]?.innerText + await copyCode(currentCodeElement) + + codeCopyBtn.innerText = stellar.plugins.copycode.success_text + codeCopyBtn.classList.add('success') + + setTimeout(() => { + codeCopyBtn.innerText = stellar.plugins.copycode.default_text + codeCopyBtn.classList.remove('success') + },3000) + }) +}) + +async function copyCode(currentCode) { + // console.log(currentCode) + // console.log('复制代码') + if (navigator.clipboard) { + try { + await navigator.clipboard.writeText(currentCode) + } catch (error) { + // 未获得用户许可 + codeCopyBtn.innerText = '未获得用户许可' + codeCopyBtn.classList.add('warning') + setTimeout(() => { + codeCopyBtn.innerText = stellar.plugins.copycode.default_text + codeCopyBtn.classList.remove('warning') + },3000) + } + } else { + codeCopyBtn.innerText = '当前浏览器不支持此api' + codeCopyBtn.classList.add('warning') + setTimeout(() => { + codeCopyBtn.innerText = stellar.plugins.copycode.default_text + codeCopyBtn.classList.remove('warning') + },3000) + } +} \ No newline at end of file