增加代码复制功能

src/assets/js/code.js

@@ -0,0 +1,79 @@
+// 脚本来自 https://blowfish.page/
+
+var scriptBundle = document.getElementById("script-bundle");
+var copyText =
+    scriptBundle && scriptBundle.getAttribute("data-copy")
+        ? scriptBundle.getAttribute("data-copy")
+        : "Copy";
+var copiedText =
+    scriptBundle && scriptBundle.getAttribute("data-copied")
+        ? scriptBundle.getAttribute("data-copied")
+        : "Copied";
+
+function createCopyButton(highlightDiv) {
+    const button = document.createElement("button");
+    button.className = "copy-button";
+    button.type = "button";
+    button.ariaLabel = copyText;
+    button.innerText = copyText;
+    button.addEventListener("click", () =>
+        copyCodeToClipboard(button, highlightDiv)
+    );
+    addCopyButtonToDom(button, highlightDiv);
+}
+
+async function copyCodeToClipboard(button, highlightDiv) {
+    const codeToCopy = highlightDiv.querySelector(":last-child").innerText;
+    try {
+        result = await navigator.permissions.query({ name: "clipboard-write" });
+        if (result.state == "granted" || result.state == "prompt") {
+            await navigator.clipboard.writeText(codeToCopy);
+        } else {
+            copyCodeBlockExecCommand(codeToCopy, highlightDiv);
+        }
+    } catch (_) {
+        copyCodeBlockExecCommand(codeToCopy, highlightDiv);
+    } finally {
+        codeWasCopied(button);
+    }
+}
+
+function copyCodeBlockExecCommand(codeToCopy, highlightDiv) {
+    const textArea = document.createElement("textArea");
+    textArea.contentEditable = "true";
+    textArea.readOnly = "false";
+    textArea.className = "copy-textarea";
+    textArea.value = codeToCopy;
+    highlightDiv.insertBefore(textArea, highlightDiv.firstChild);
+    const range = document.createRange();
+    range.selectNodeContents(textArea);
+    const sel = window.getSelection();
+    sel.removeAllRanges();
+    sel.addRange(range);
+    textArea.setSelectionRange(0, 999999);
+    document.execCommand("copy");
+    highlightDiv.removeChild(textArea);
+}
+
+function codeWasCopied(button) {
+    button.blur();
+    button.innerText = copiedText;
+    setTimeout(function () {
+        button.innerText = copyText;
+    }, 2000);
+}
+
+function addCopyButtonToDom(button, highlightDiv) {
+    highlightDiv.insertBefore(button, highlightDiv.firstChild);
+    const wrapper = document.createElement("div");
+    wrapper.className = "highlight-wrapper";
+    highlightDiv.parentNode.insertBefore(wrapper, highlightDiv);
+    wrapper.appendChild(highlightDiv);
+}
+
+
+export function initCopyButton() {
+    document
+        .querySelectorAll(".kg-code-card")
+        .forEach((highlightDiv) => createCopyButton(highlightDiv));
+};

src/assets/js/main.js

@@ -5,6 +5,7 @@ import mediumZoom from "medium-zoom";
 import search from "./search";
 import Artalk from "./ArtalkLite";
 import quicklink from "quicklink/dist/quicklink.umd";
+import { initCopyButton } from "./code.js";
 
 // import "./highlightjs-badge.min.js";
 import { getMemos, parseMemos } from "./memos.js";
@@ -57,6 +58,7 @@ function initZoom() {
 
 search();
 initZoom();
+initCopyButton();
 
 if (navigator.serviceWorker) {
     navigator.serviceWorker.register(location.origin + "/sw.js", {

src/assets/sass/_custom.scss

@@ -333,3 +333,39 @@
         }
     }
 }
+
+
+
+/** add copybutton **/
+
+.kg-code-card:hover >.copy-button {
+    visibility: visible
+}
+
+.copy-button {
+    visibility: hidden;
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 10;
+    width: 5rem;
+    cursor: pointer;
+    white-space: nowrap;
+    line-height: 1.5rem;
+    opacity: .9;
+}
+
+.copy-button:hover,.copy-button:focus,.copy-button:active,.copy-button:active:hover {
+    --tw-bg-opacity: 1;
+
+}
+
+.copy-button:hover:is(.dark *),.copy-button:focus:is(.dark *),.copy-button:active:is(.dark *),.copy-button:active:hover:is(.dark *) {
+    --tw-bg-opacity: 1;
+}
+
+.copy-textarea {
+    position: absolute;
+    z-index: -10;
+    opacity: .05
+}

src/assets/sass/plugins/ghost.css

@@ -8,6 +8,10 @@
     color: var(--gray-500);
 }
 
+.kg-code-card{
+    position:relative;
+}
+
 .kg-width-wide,
 .kg-width-full,
 .kg-gallery-card {

src/site/_includes/layouts/base.liquid

@@ -59,7 +59,7 @@
 
   {% comment %} {{ partial "docs/inject/body" . }} {% endcomment %}
   {% block scripts %}
-  <script src="{{ '/assets/main.js' | absoluteUrl | cacheBust }}"  data-taxi-reload></script>
+  <script src="{{ '/assets/main.js' | absoluteUrl | cacheBust }}" id="script-bundle" data-taxi-reload></script>
   {% endblock %}
   {{ site.codeinjection_foot  }}
 </body>