cloverta/SanYeCao-blog
1
0
Fork 0
mirror of https://github.com/ClovertaTheTrilobita/SanYeCao-blog.git synced 2026-09-04 20:55:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix copy button layout

Browse source
This commit is contained in:
ClovertaTheTrilobita 2026-08-05 12:33:47 +08:00
parent cbad40b5cd
commit 08c4f13d54
2 changed files with 22 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/layouts/BaseLayout.astro
View file

@ -45,11 +45,24 @@ const {
<script is:inline> <script is:inline>
function addCodeCopyButtons() { function addCodeCopyButtons() {
document.querySelectorAll("pre").forEach((pre) => { document.querySelectorAll("pre").forEach((pre) => {
if (pre.querySelector(":scope > .code-copy-button")) return;
const code = pre.querySelector("code"); const code = pre.querySelector("code");
if (!code) return; 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"); const button = document.createElement("button");
button.className = "code-copy-button"; button.className = "code-copy-button";
button.type = "button"; button.type = "button";
@ -63,6 +76,7 @@ const {
icon.setAttribute("aria-hidden", "true"); icon.setAttribute("aria-hidden", "true");
button.appendChild(icon); button.appendChild(icon);
wrapper.appendChild(button);
button.addEventListener("click", async () => { button.addEventListener("click", async () => {
const text = code.textContent ?? ""; const text = code.textContent ?? "";
@ -74,6 +88,7 @@ const {
textarea.value = text; textarea.value = text;
textarea.style.position = "fixed"; textarea.style.position = "fixed";
textarea.style.opacity = "0"; textarea.style.opacity = "0";
textarea.style.pointerEvents = "none";
document.body.appendChild(textarea); document.body.appendChild(textarea);
textarea.select(); textarea.select();
@ -93,8 +108,6 @@ const {
button.classList.remove("copied"); button.classList.remove("copied");
}, 1500); }, 1500);
}); });
pre.appendChild(button);
}); });
} }

6
src/styles/code.css
View file

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