Merge pull request #34 from ClovertaTheTrilobita/dev

Fix button layout

README-en.md

@@ -4,9 +4,9 @@
     ✨SanYeCao Blog✨<br>
     🌊Lightweight / Fast / Beautiful🌊<br><br>
     Built With<br>
-    <img alt="Static Badge" src="https://img.shields.io/badge/Astro-6.0-purple">
-    <img alt="Static Badge" src="https://img.shields.io/badge/Nodejs-24-green">
-    <img alt="Static Badge" src="https://img.shields.io/badge/Heart-♥️-pink">
+		<img alt="Static Badge" src="https://img.shields.io/badge/Astro-6.0-purple?style=for-the-badge">
+    <img alt="Static Badge" src="https://img.shields.io/badge/Nodejs-24-green?style=for-the-badge">
+    <img alt="Static Badge" src="https://img.shields.io/badge/Heart-♥️-pink?style=for-the-badge">
     <br>
 </p>
 

README.md

@@ -6,12 +6,13 @@
     ✨三叶草Blog✨<br>
     🌊轻度/快速/美观🌊<br><br>
     Built With<br>
-    <img alt="Static Badge" src="https://img.shields.io/badge/Astro-6.0-purple">
-    <img alt="Static Badge" src="https://img.shields.io/badge/Nodejs-24-green">
-    <img alt="Static Badge" src="https://img.shields.io/badge/Heart-♥️-pink">
+    <img alt="Static Badge" src="https://img.shields.io/badge/Astro-6.0-purple?style=for-the-badge">
+    <img alt="Static Badge" src="https://img.shields.io/badge/Nodejs-24-green?style=for-the-badge">
+    <img alt="Static Badge" src="https://img.shields.io/badge/Heart-♥️-pink?style=for-the-badge">
     <br>
 </p>
 
+
 ## 😋 特性
 
 <br>

src/layouts/BaseLayout.astro

@@ -45,11 +45,24 @@ const {
 	<script is:inline>
 		function addCodeCopyButtons() {
 			document.querySelectorAll("pre").forEach((pre) => {
-				if (pre.querySelector(":scope > .code-copy-button")) return;
-
 				const code = pre.querySelector("code");
 				if (!code) return;
 
+				/* 已经处理过则跳过 */
+				if (
+					pre.parentElement?.classList.contains("code-block-wrapper")
+				) {
+					return;
+				}
+
+				/* 创建外层容器 */
+				const wrapper = document.createElement("div");
+				wrapper.className = "code-block-wrapper";
+
+				pre.parentNode?.insertBefore(wrapper, pre);
+				wrapper.appendChild(pre);
+
+				/* 创建复制按钮 */
 				const button = document.createElement("button");
 				button.className = "code-copy-button";
 				button.type = "button";
@@ -63,6 +76,7 @@ const {
 				icon.setAttribute("aria-hidden", "true");
 
 				button.appendChild(icon);
+				wrapper.appendChild(button);
 
 				button.addEventListener("click", async () => {
 					const text = code.textContent ?? "";
@@ -74,6 +88,7 @@ const {
 						textarea.value = text;
 						textarea.style.position = "fixed";
 						textarea.style.opacity = "0";
+						textarea.style.pointerEvents = "none";
 
 						document.body.appendChild(textarea);
 						textarea.select();
@@ -93,8 +108,6 @@ const {
 						button.classList.remove("copied");
 					}, 1500);
 				});
-
-				pre.appendChild(button);
 			});
 		}
 

src/styles/code.css

@@ -1,4 +1,8 @@
-pre {
+.code-block-wrapper {
+    position: relative;
+}
+
+.code-block-wrapper pre {
     padding: 1rem;
     border-radius: 3px;
     overflow-x: auto;