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

Merge pull request #28 from ClovertaTheTrilobita/dev

Browse source 
added copy button & refactor looks
This commit is contained in:
ClovertaTheTrilobita 2026-07-18 17:26:12 +08:00 committed by GitHub
commit a8d4de69bc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
15 changed files with 365 additions and 193 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
public/images/copy-svgrepo-com.svg Normal file
View file

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg fill="#000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 460 460" xml:space="preserve">
<g>
<g>
<g>
<path d="M425.934,0H171.662c-18.122,0-32.864,14.743-32.864,32.864v77.134h30V32.864c0-1.579,1.285-2.864,2.864-2.864h254.272
c1.579,0,2.864,1.285,2.864,2.864v254.272c0,1.58-1.285,2.865-2.864,2.865h-74.729v30h74.729
c18.121,0,32.864-14.743,32.864-32.865V32.864C458.797,14.743,444.055,0,425.934,0z"/>
<path d="M288.339,139.998H34.068c-18.122,0-32.865,14.743-32.865,32.865v254.272C1.204,445.257,15.946,460,34.068,460h254.272
c18.122,0,32.865-14.743,32.865-32.864V172.863C321.206,154.741,306.461,139.998,288.339,139.998z M288.341,430H34.068
c-1.58,0-2.865-1.285-2.865-2.864V172.863c0-1.58,1.285-2.865,2.865-2.865h254.272c1.58,0,2.865,1.285,2.865,2.865v254.273h0.001
C291.206,428.715,289.92,430,288.341,430z"/>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

12
public/images/correct-signal-svgrepo-com.svg Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="800px" height="800px" viewBox="0 0 335.765 335.765"
xml:space="preserve">
<g>
<g>
<polygon points="311.757,41.803 107.573,245.96 23.986,162.364 0,186.393 107.573,293.962 335.765,65.795 "/>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 571 B

40
src/components/Divider.astro Normal file
View file

@ -0,0 +1,40 @@
<div class="divider" aria-hidden="true"></div>
<style>
.divider {
--divider-red: var(--deep-red);
--divider-blue: var(--deep-blue);
--px: 4px; /* 单个像素点大小 */
--stripe: 16px; /* 每段斜纹横向长度 */
--period: 64px; /* 一个完整重复周期 */
--row-pattern: linear-gradient(
90deg,
var(--divider-red) 0 var(--stripe),
transparent var(--stripe) calc(var(--stripe) * 2),
var(--divider-blue) calc(var(--stripe) * 2) calc(var(--stripe) * 3),
transparent calc(var(--stripe) * 3) calc(var(--stripe) * 4)
);
width: 100%;
height: calc(var(--px) * 3);
margin-bottom: 1rem;
background:
var(--row-pattern) 0 0 / var(--period) var(--px) repeat-x,
var(--row-pattern) calc(-1 * var(--px)) calc(1 * var(--px)) /
var(--period) var(--px) repeat-x,
var(--row-pattern) calc(-2 * var(--px)) calc(2 * var(--px)) /
var(--period) var(--px) repeat-x,
var(--row-pattern) calc(-3 * var(--px)) calc(3 * var(--px)) /
var(--period) var(--px) repeat-x;
pointer-events: none;
}
:global(html.dark) .divider,
:global(.dark) .divider {
--divider-red: #ff8a8a;
--divider-blue: #9ecbff;
}
</style>

28
src/components/Footer.astro
View file

@ -1,12 +1,14 @@
---
import { getLangFromUrl, getTranslations, type Lang } from "@/i18n";
import BuildHashBlocks from "@/components/BuildHashBlocks.astro";
import Divider from "@/components/Divider.astro";
const commit = import.meta.env.PUBLIC_GIT_COMMIT || "unknown";
const lang = getLangFromUrl(Astro.url);
const t = getTranslations(lang);
---
<footer class="footer">
<Divider />
<a
href="https://github.com/ClovertaTheTrilobita/SanYeCao-blog"
class="github"
@ -82,22 +84,6 @@ const t = getTranslations(lang);
text-align: center;
}
.footer::before {
content: "";
display: block;
width: 100%;
height: 12px;
margin-bottom: 1rem;
background: repeating-linear-gradient(
-45deg,
var(--deep-red) 0 14px,
transparent 14px 28px,
var(--deep-blue) 28px 42px,
transparent 42px 56px
);
pointer-events: none;
}
.footer-content-mobile {
display: none;
}
@ -108,16 +94,6 @@ const t = getTranslations(lang);
/* display: inline-flex; */
}
:global(.dark) .footer::before {
background: repeating-linear-gradient(
-45deg,
#ff8a8a 0 14px,
transparent 14px 28px,
#9ecbff 28px 42px,
transparent 42px 56px
);
}
@media (max-width: 700px) {
.footer-content-pc {
display: none;

20
src/components/FriendlyLinks/FriendlyLinkItem.astro
View file

@ -24,10 +24,18 @@ const { name, description, avatar, url } = Astro.props;
align-items: center;
gap: 1rem;
padding: 0.1rem 0.5rem;
background: #fffcf1;
border: 2px solid #ede3d0;
background: #fff5ea;
border-top: 1px dotted var(--deep-blue); /* 上下点线 */
border-left: 1px dotted var(--deep-blue);
border-bottom: 2px solid var(--deep-blue);
border-right: 2px solid var(--deep-blue);
text-decoration: none;
color: inherit;
transition:
transform 0.2s ease,
background-color 0.2s ease,
box-shadow 0.2s ease;
}
.friendly-link-text {
@ -63,12 +71,14 @@ const { name, description, avatar, url } = Astro.props;
}
.friendly-link-card:hover {
background: #efe2be;
/* background: #efe2be; */
transform: translate(-3px, -3px);
box-shadow: 5px 6px 12px rgb(0 0 0 / 18%);
}
:global(.dark) .friendly-link-card {
background: #3a352b;
border-color: #8f8268;
background: rgba(127, 127, 127, 0.12);
border-color: #9ecbff;
}
:global(.dark) .friendly-link-title {

5
src/components/FriendlyLinks/FriendsDescription.astro
View file

@ -64,6 +64,11 @@ avatar: 'https://s2.loli.net/2025/11/22/tiDKuzdqycx1v9B.png'
border-radius: 3px;
padding: 0rem;
overflow-x: auto;
/* color: var(--text-color); */
}
:global(.dark) .friend-code-block {
background: rgba(127, 127, 127, 0.12);
}
.friend-code-block pre {

9
src/components/Header.astro
View file

@ -2,6 +2,7 @@
import Navigation from "./Navigation.astro";
import ThemeIcon from "./ThemeIcon.astro";
import { getLangFromUrl, getTranslations } from "@/i18n";
import Divider from "@/components/Divider.astro";
const lang = getLangFromUrl(Astro.url);
const t = getTranslations(lang);
@ -25,6 +26,9 @@ const t = getTranslations(lang);
</div>
<Navigation />
</nav>
<div class="divider">
<Divider />
</div>
</header>
<style>
@ -81,6 +85,11 @@ const t = getTranslations(lang);
font-size: clamp(1.6rem, 6vw, 2.5rem);
}
.divider {
margin-top: 0.2rem;
margin-bottom: 2rem;
}
@media (max-width: 768px) {
.site-header {
padding-top: 0.25rem;

29
src/components/Navigation.astro
View file

@ -43,37 +43,10 @@ const t = getTranslations(lang);
<style>
.site-nav {
margin: 1rem 0;
padding-bottom: 3rem;
padding-bottom: 1rem;
position: relative;
}
.site-nav::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 12px;
background: repeating-linear-gradient(
-45deg,
var(--deep-red) 0 14px,
transparent 14px 28px,
var(--deep-blue) 28px 42px,
transparent 42px 56px
);
pointer-events: none;
}
:global(.dark) .site-nav::after {
background: repeating-linear-gradient(
-45deg,
#ff8a8a 0 14px,
transparent 14px 28px,
#9ecbff 28px 42px,
transparent 42px 56px
);
}
.site-nav-desktop {
display: flex;
gap: 1.5rem;

1
src/components/Posts/PostItem.astro
View file

@ -148,6 +148,7 @@ const tags = data.tags;
.post-title {
margin: 0;
font-family:
"Noto Sans SC",
system-ui,
-apple-system,
BlinkMacSystemFont,

59
src/layouts/BaseLayout.astro
View file

@ -42,6 +42,65 @@ const {
<title>{pageTitle}</title>
</head>
<FloatingActions />
<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;
const button = document.createElement("button");
button.className = "code-copy-button";
button.type = "button";
button.setAttribute("aria-label", "复制代码");
button.title = "复制代码";
const icon = document.createElement("img");
icon.className = "code-copy-icon";
icon.src = "/images/copy-svgrepo-com.svg";
icon.alt = "";
icon.setAttribute("aria-hidden", "true");
button.appendChild(icon);
button.addEventListener("click", async () => {
const text = code.textContent ?? "";
try {
await navigator.clipboard.writeText(text);
} catch {
const textarea = document.createElement("textarea");
textarea.value = text;
textarea.style.position = "fixed";
textarea.style.opacity = "0";
document.body.appendChild(textarea);
textarea.select();
document.execCommand("copy");
textarea.remove();
}
icon.src = "/images/correct-signal-svgrepo-com.svg";
button.setAttribute("aria-label", "已复制");
button.title = "已复制";
button.classList.add("copied");
window.setTimeout(() => {
icon.src = "/images/copy-svgrepo-com.svg";
button.setAttribute("aria-label", "复制代码");
button.title = "复制代码";
button.classList.remove("copied");
}, 1500);
});
pre.appendChild(button);
});
}
addCodeCopyButtons();
document.addEventListener("astro:page-load", addCodeCopyButtons);
</script>
<body>
<Header />

86
src/styles/code.css Normal file
View file

@ -0,0 +1,86 @@
pre {
padding: 1rem;
border-radius: 3px;
overflow-x: auto;
line-height: 1.6;
margin: 1rem 0;
position: relative;
}
/* pre:has(> .code-copy-button) {
padding-top: 2.75rem;
} */
code {
font-family: "Maple Mono", monospace;
font-size: 0.96rem;
}
/* 行内代码 */
p code,
li code,
blockquote code,
td code {
padding: 0.15em 0.4em;
border-radius: 0.25rem;
background: rgba(127, 127, 127, 0.12);
}
.code-copy-button {
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 2;
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
padding: 0.35rem;
border-top: 1px dotted var(--deep-blue);
border-left: 1px dotted var(--deep-blue);
border-right: 2px solid var(--deep-blue);
border-bottom: 2px solid var(--deep-blue);
border-radius: 3px;
background: rgba(250, 250, 250, 0.7);
cursor: pointer;
transition:
transform 0.15s ease,
background-color 0.15s ease,
box-shadow 0.15s ease;
}
.code-copy-icon {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
}
.code-copy-button:hover {
background: rgb(250, 250, 250, 0.9);
transform: translate(-1px, -1px);
box-shadow: 3px 4px 8px rgb(0 0 0 / 18%);
}
.code-copy-button:active {
transform: translate(0, 0);
box-shadow: none;
}
.code-copy-button.copied {
background: #dcebd5;
}
/* .dark .code-copy-button {
border-color: #9ecbff;
}
.dark .code-copy-button:hover {
box-shadow: 3px 4px 8px rgb(0 0 0 / 35%);
} */

136
src/styles/global.css
View file

@ -4,29 +4,9 @@
@import "./latest-comments.css";
@import "./variables.css";
@import "./dialog.css";
@import "./posts.css";
@import "./code.css";
pre {
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
line-height: 1.6;
margin: 1rem 0;
}
code {
font-family: "Maple Mono", monospace;
font-size: 0.96rem;
}
/* 行内代码 */
p code,
li code,
blockquote code,
td code {
padding: 0.15em 0.4em;
border-radius: 0.25rem;
background: rgba(127, 127, 127, 0.12);
}
article svg.flowchart,
article svg[class*="flowchart"],
@ -117,7 +97,7 @@ h1 {
a {
color: #3D74B6;
color: var(--url-color);
font-weight: 700;
text-decoration: none;
}
@ -161,112 +141,4 @@ img {
max-width: 100%;
height: auto;
display: block;
}
/* 避免 Markdown 内容撑宽正文 */
.post-article,
.post-content {
min-width: 0;
max-width: 100%;
}
/* 块级公式过长时独立横向滚动 */
.post-content .katex-display {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
box-sizing: border-box;
padding: 0.25rem 0;
-webkit-overflow-scrolling: touch;
}
.post-content .katex-display > .katex {
display: inline-block;
min-width: max-content;
white-space: nowrap;
}
/* =========================
Markdown details 下拉栏
========================= */
.post-content details {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
margin: 1.5rem 0;
overflow: hidden;
border-top: 2px solid #1e3a5f;
border-radius: 0 0 0.5rem 0.5rem;
background: rgba(128, 128, 128, 0.14);
}
.post-content details summary {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
padding: 0.8rem 0.9rem;
cursor: pointer;
font-weight: 600;
user-select: none;
list-style: none;
}
.post-content details summary::-webkit-details-marker {
display: none;
}
.post-content details summary::before {
content: "›";
display: inline-block;
flex: 0 0 auto;
font-size: 1.25rem;
line-height: 1;
transition: transform 0.2s ease;
}
.post-content details[open] summary::before {
transform: rotate(90deg);
}
.post-content details > :not(summary) {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
margin-top: 0;
margin-bottom: 0;
padding-right: 1rem;
}
.post-content details > ol,
.post-content details > ul {
padding: 0.6rem 1rem 1rem 3rem;
}
.post-content details li {
margin: 0.8rem 0;
}
blockquote {
margin: 1.25rem 0;
padding: 0.75rem 1rem;
border-left: 4px solid var(--deep-red);
background: rgba(128, 128, 128, 0.1);
border-radius: 0 0.4rem 0.4rem 0;
}
blockquote p {
margin: 0;
}
blockquote p + p {
margin-top: 0.75rem;
}
}

2
src/styles/latest-comments.css
View file

@ -38,7 +38,7 @@
margin: 0 0 14px 0;
padding: 0.6rem 1rem;
border: 2px dashed #aeb8c2;
background-color: #fbf5f2;
background-color: var(--comment-background);
}

108
src/styles/posts.css Normal file
View file

@ -0,0 +1,108 @@
/* 避免 Markdown 内容撑宽正文 */
.post-article,
.post-content {
min-width: 0;
max-width: 100%;
}
/* 块级公式过长时独立横向滚动 */
.post-content .katex-display {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
box-sizing: border-box;
padding: 0.25rem 0;
-webkit-overflow-scrolling: touch;
}
.post-content .katex-display > .katex {
display: inline-block;
min-width: max-content;
white-space: nowrap;
}
/* =========================
Markdown details 下拉栏
========================= */
.post-content details {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
margin: 1.5rem 0;
overflow: hidden;
border-top: 2px solid #1e3a5f;
border-radius: 0 0 0.5rem 0.5rem;
background: rgba(128, 128, 128, 0.14);
}
.post-content details summary {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
padding: 0.8rem 0.9rem;
cursor: pointer;
font-weight: 600;
user-select: none;
list-style: none;
}
.post-content details summary::-webkit-details-marker {
display: none;
}
.post-content details summary::before {
content: "›";
display: inline-block;
flex: 0 0 auto;
font-size: 1.25rem;
line-height: 1;
transition: transform 0.2s ease;
}
.post-content details[open] summary::before {
transform: rotate(90deg);
}
.post-content details > :not(summary) {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
margin-top: 0;
margin-bottom: 0;
padding-right: 1rem;
}
.post-content details > ol,
.post-content details > ul {
padding: 0.6rem 1rem 1rem 3rem;
}
.post-content details li {
margin: 0.8rem 0;
}
blockquote {
margin: 1.25rem 0;
padding: 0.75rem 1rem;
border-left: 4px solid var(--deep-red);
background: rgba(128, 128, 128, 0.1);
border-radius: 0 0.4rem 0.4rem 0;
}
blockquote p {
margin: 0;
}
blockquote p + p {
margin-top: 0.75rem;
}

5
src/styles/variables.css
View file

@ -1,8 +1,11 @@
/* 默认配色 */
:root {
--deep-blue: #536493;
--deep-red: #ef5a6f;
--background-color: #f9f2ed;
--text-color: #0E2F56;
--text-color: #0e2f56;
--url-color: #3D74B6;
--comment-background: #fbf5f2;
--background-color-dark: #1e1e1e;
--text-color-dark: #e6e6e6;