From 72666f39d87d36bf28827d99b8d1dac37af74be1 Mon Sep 17 00:00:00 2001
From: Whbbit1999 <60510247+Whbbit1999@users.noreply.github.com>
Date: Tue, 9 May 2023 12:24:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BB=A3=E7=A0=81=E5=9D=97=E5=A4=8D?=
 =?UTF-8?q?=E5=88=B6=E4=BB=A3=E7=A0=81=20(#288)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增配置：
CodeBlock:
  show_copy: true
  default_text: 'copy'
  success_text: 'copied'
---
 _config.yml                       |  6 +++
 layout/_partial/main/copycode.ejs | 86 +++++++++++++++++++++++++++++++
 layout/layout.ejs                 |  1 +
 3 files changed, 93 insertions(+)
 create mode 100644 layout/_partial/main/copycode.ejs

diff --git a/_config.yml b/_config.yml
index 07fd7cf..8d17857 100755
--- a/_config.yml
+++ b/_config.yml
@@ -78,6 +78,12 @@ 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 来避免被搜索索引
diff --git a/layout/_partial/main/copycode.ejs b/layout/_partial/main/copycode.ejs
new file mode 100644
index 0000000..557d0da
--- /dev/null
+++ b/layout/_partial/main/copycode.ejs
@@ -0,0 +1,86 @@
+<% if (theme.CodeBlock.show_copy) { %>
+
+  <style>
+    .highlight {
+      position: relative;
+    }
+    .highlight .code .copy-btn{
+      position: absolute;
+      top: 0;
+      right: 0;
+      padding: 4px 0.5rem;
+      opacity: 0.25;
+      font-weight: 700;
+      color: var(--theme);
+      cursor: pointer;
+      transition: opacity 0.3s;
+    }
+    .highlight .code .copy-btn:hover{
+      color: var(--text-code);
+      opacity: 0.75;
+    }
+    .highlight .code .copy-btn.success {
+      color: var(--swiper-theme-color);
+      opacity: 0.75;
+
+    }
+    .highlight .code .copy-btn.warning {
+      color: var(--text-code);
+      opacity: 0.75;
+    }
+    
+  </style>
+  <script>
+    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 = '<%= theme.CodeBlock.default_text%>'
+      code.appendChild(codeCopyBtn)
+  
+      codeCopyBtn.addEventListener('click', async () => {
+        const currentCodeElement = code.children[0]?.innerText
+        await copyCode(currentCodeElement)
+
+        codeCopyBtn.innerText = '<%= theme.CodeBlock.success_text%>'
+        codeCopyBtn.classList.add('success')
+
+        setTimeout(() => {
+          codeCopyBtn.innerText = '<%= theme.CodeBlock.default_text%>'
+          codeCopyBtn.classList.remove('success')
+        },1000)
+      })
+    })
+    
+    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 = '<%= theme.CodeBlock.default_text%>'
+            codeCopyBtn.classList.remove('warning')
+          },1000)
+        }
+      } else {
+        codeCopyBtn.innerText = '当前浏览器不支持此api'
+        codeCopyBtn.classList.add('warning')
+        setTimeout(() => {
+          codeCopyBtn.innerText = '<%= theme.CodeBlock.default_text%>'
+          codeCopyBtn.classList.remove('warning')
+        },1000)
+      }
+    }
+  </script>
+<% } %>
+ 
diff --git a/layout/layout.ejs b/layout/layout.ejs
index 1e1e36b..c2daa04 100755
--- a/layout/layout.ejs
+++ b/layout/layout.ejs
@@ -16,6 +16,7 @@
   </div>
   <div class='scripts'>
     <%- partial('_partial/scripts/index') %>
+    <%- partial('_partial/main/copycode') %>
   </div>
 </body>
 </html>