mirror of
https://github.com/ClovertaTheTrilobita/SanYeCao-blog.git
synced 2026-07-03 23:51:26 +00:00
Compare commits
No commits in common. "2f48907035265d6b509d06bbd79caa2745bfa52d" and "7dd21ea510cdc4c965499df30e50a454518b3ce9" have entirely different histories.
2f48907035
...
7dd21ea510
4 changed files with 3 additions and 477 deletions
|
|
@ -1,335 +0,0 @@
|
||||||
---
|
|
||||||
interface Heading {
|
|
||||||
depth: number;
|
|
||||||
slug: string;
|
|
||||||
text: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
headings: Heading[];
|
|
||||||
}
|
|
||||||
|
|
||||||
const { headings = [] } = Astro.props;
|
|
||||||
|
|
||||||
// 只取 h2 / h3，博客目录最常见
|
|
||||||
const tocHeadings = headings.filter((h) => h.depth === 2 || h.depth === 3);
|
|
||||||
|
|
||||||
// 手机端按钮里显示的“目录: 第一节、xxxxx”
|
|
||||||
const mobilePreview = tocHeadings[0]?.text ?? "本文目录";
|
|
||||||
---
|
|
||||||
|
|
||||||
{
|
|
||||||
tocHeadings.length > 0 && (
|
|
||||||
<>
|
|
||||||
<button
|
|
||||||
class="post-menu-mobile-toggle"
|
|
||||||
type="button"
|
|
||||||
aria-expanded="false"
|
|
||||||
aria-controls="post-menu-panel"
|
|
||||||
aria-label="目录"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="post-menu-mobile-preview"
|
|
||||||
data-post-menu-preview
|
|
||||||
data-default-text={tocHeadings[0]?.text ?? "本文目录"}
|
|
||||||
>
|
|
||||||
{tocHeadings[0]?.text ?? "本文目录"}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="post-menu-mobile-icon" aria-hidden="true">
|
|
||||||
<svg
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
width="16"
|
|
||||||
height="16"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M5 6.5H19M5 12H19M5 17.5H19"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="1.8"
|
|
||||||
stroke-linecap="round"
|
|
||||||
/>
|
|
||||||
<circle cx="3.5" cy="6.5" r="1" fill="currentColor" />
|
|
||||||
<circle cx="3.5" cy="12" r="1" fill="currentColor" />
|
|
||||||
<circle cx="3.5" cy="17.5" r="1" fill="currentColor" />
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<aside class="post-menu" id="post-menu-panel">
|
|
||||||
<nav aria-label="Table of contents">
|
|
||||||
<p class="post-menu-title">目录</p>
|
|
||||||
<ul class="post-menu-list">
|
|
||||||
{tocHeadings.map((heading) => (
|
|
||||||
<li class={`post-menu-item depth-${heading.depth}`}>
|
|
||||||
<a
|
|
||||||
href={`#${heading.slug}`}
|
|
||||||
data-heading-link
|
|
||||||
data-heading-text={heading.text}
|
|
||||||
>
|
|
||||||
{heading.text}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</aside>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
<script is:inline>
|
|
||||||
(() => {
|
|
||||||
const btn = document.querySelector(".post-menu-mobile-toggle");
|
|
||||||
const panel = document.querySelector("#post-menu-panel");
|
|
||||||
|
|
||||||
if (!btn || !panel) return;
|
|
||||||
|
|
||||||
btn.addEventListener("click", () => {
|
|
||||||
const expanded = btn.getAttribute("aria-expanded") === "true";
|
|
||||||
btn.setAttribute("aria-expanded", String(!expanded));
|
|
||||||
panel.classList.toggle("is-open", !expanded);
|
|
||||||
});
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.post-menu {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-menu-title {
|
|
||||||
margin: 0 0 0.8rem;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-menu-list {
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-menu-item {
|
|
||||||
margin: 0.45rem 0;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-menu-item.depth-3 {
|
|
||||||
padding-left: 1rem;
|
|
||||||
opacity: 0.82;
|
|
||||||
font-size: 0.95em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-menu a {
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-menu a:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-menu-mobile-toggle {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1200px) {
|
|
||||||
.post-menu {
|
|
||||||
--menu-width: 180px;
|
|
||||||
position: fixed;
|
|
||||||
top: 8.5rem;
|
|
||||||
width: var(--menu-width);
|
|
||||||
left: max(1rem, calc((100vw - 760px) / 4 - var(--menu-width) / 2));
|
|
||||||
max-height: calc(100vh - 10rem);
|
|
||||||
overflow: auto;
|
|
||||||
padding: 0.2rem 0.2rem 0.2rem 0;
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1199px) {
|
|
||||||
.post-menu-mobile-toggle {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.25rem;
|
|
||||||
position: fixed;
|
|
||||||
top: 0.75rem;
|
|
||||||
right: 0.8rem;
|
|
||||||
z-index: 30;
|
|
||||||
max-width: min(78vw, 22rem);
|
|
||||||
padding: 0.45rem 0.75rem;
|
|
||||||
border: 1.5px solid rgba(123, 169, 255, 0.55);
|
|
||||||
border-radius: 999px;
|
|
||||||
background: rgba(249, 242, 237, 0.92);
|
|
||||||
backdrop-filter: blur(6px);
|
|
||||||
color: inherit;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(calc(-100% - 0.6rem));
|
|
||||||
pointer-events: none;
|
|
||||||
transition:
|
|
||||||
transform 0.28s ease,
|
|
||||||
opacity 0.22s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-menu-mobile-toggle.is-visible {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(calc(env(safe-area-inset-top) + 0.4rem));
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-menu-mobile-icon {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
opacity: 0.78;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-menu-mobile-preview {
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
max-width: 14rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-menu {
|
|
||||||
display: none;
|
|
||||||
position: fixed;
|
|
||||||
top: calc(env(safe-area-inset-top) + 4.2rem);
|
|
||||||
right: 0.8rem;
|
|
||||||
z-index: 29;
|
|
||||||
width: min(88vw, 24rem);
|
|
||||||
max-height: min(65vh, 32rem);
|
|
||||||
overflow: auto;
|
|
||||||
padding: 0.9rem 1rem;
|
|
||||||
border: 1.5px solid rgba(128, 128, 128, 0.55);
|
|
||||||
/* border-radius: 1rem; */
|
|
||||||
background: rgba(255, 255, 255, 0.96);
|
|
||||||
backdrop-filter: blur(8px);
|
|
||||||
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-menu.is-open {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script is:inline>
|
|
||||||
(() => {
|
|
||||||
const setupPostMenu = () => {
|
|
||||||
const btn = document.querySelector(".post-menu-mobile-toggle");
|
|
||||||
const panel = document.querySelector("#post-menu-panel");
|
|
||||||
const preview = document.querySelector("[data-post-menu-preview]");
|
|
||||||
const headingLinks = Array.from(
|
|
||||||
document.querySelectorAll("[data-heading-link]"),
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!btn || !panel || !preview || headingLinks.length === 0) return;
|
|
||||||
|
|
||||||
const defaultText =
|
|
||||||
preview.getAttribute("data-default-text") || "本文目录";
|
|
||||||
|
|
||||||
const getHeadingElements = () =>
|
|
||||||
headingLinks
|
|
||||||
.map((link) => {
|
|
||||||
const href = link.getAttribute("href");
|
|
||||||
if (!href || !href.startsWith("#")) return null;
|
|
||||||
|
|
||||||
const el = document.getElementById(href.slice(1));
|
|
||||||
if (!el) return null;
|
|
||||||
|
|
||||||
return {
|
|
||||||
link,
|
|
||||||
el,
|
|
||||||
text:
|
|
||||||
link.getAttribute("data-heading-text") ||
|
|
||||||
el.textContent ||
|
|
||||||
defaultText,
|
|
||||||
};
|
|
||||||
})
|
|
||||||
.filter(Boolean);
|
|
||||||
|
|
||||||
let headingItems = getHeadingElements();
|
|
||||||
|
|
||||||
const closeMenu = () => {
|
|
||||||
panel.classList.remove("is-open");
|
|
||||||
btn.setAttribute("aria-expanded", "false");
|
|
||||||
};
|
|
||||||
|
|
||||||
const updateVisibility = () => {
|
|
||||||
if (window.innerWidth > 1199) {
|
|
||||||
btn.classList.remove("is-visible");
|
|
||||||
closeMenu();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const shouldShow = window.scrollY > 300;
|
|
||||||
btn.classList.toggle("is-visible", shouldShow);
|
|
||||||
|
|
||||||
if (!shouldShow) {
|
|
||||||
closeMenu();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const updateCurrentHeading = () => {
|
|
||||||
if (window.innerWidth > 1099) return;
|
|
||||||
|
|
||||||
headingItems = getHeadingElements();
|
|
||||||
|
|
||||||
let current = null;
|
|
||||||
const triggerLine = 140;
|
|
||||||
|
|
||||||
for (const item of headingItems) {
|
|
||||||
const rect = item.el.getBoundingClientRect();
|
|
||||||
if (rect.top <= triggerLine) {
|
|
||||||
current = item;
|
|
||||||
} else {
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
preview.textContent = current ? current.text : defaultText;
|
|
||||||
|
|
||||||
headingLinks.forEach((link) =>
|
|
||||||
link.classList.remove("is-current"),
|
|
||||||
);
|
|
||||||
if (current) current.link.classList.add("is-current");
|
|
||||||
};
|
|
||||||
|
|
||||||
const toggleMenu = () => {
|
|
||||||
const expanded = btn.getAttribute("aria-expanded") === "true";
|
|
||||||
btn.setAttribute("aria-expanded", String(!expanded));
|
|
||||||
panel.classList.toggle("is-open", !expanded);
|
|
||||||
};
|
|
||||||
|
|
||||||
btn.addEventListener("click", toggleMenu);
|
|
||||||
|
|
||||||
panel.addEventListener("click", (e) => {
|
|
||||||
const target = e.target;
|
|
||||||
if (target instanceof Element && target.closest("a")) {
|
|
||||||
closeMenu();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const onScroll = () => {
|
|
||||||
updateVisibility();
|
|
||||||
updateCurrentHeading();
|
|
||||||
};
|
|
||||||
|
|
||||||
window.addEventListener("scroll", onScroll, { passive: true });
|
|
||||||
window.addEventListener("resize", onScroll);
|
|
||||||
|
|
||||||
updateVisibility();
|
|
||||||
updateCurrentHeading();
|
|
||||||
};
|
|
||||||
|
|
||||||
setupPostMenu();
|
|
||||||
document.addEventListener("astro:page-load", setupPostMenu);
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,130 +0,0 @@
|
||||||
---
|
|
||||||
import { getCollection } from "astro:content";
|
|
||||||
import type { CollectionEntry } from "astro:content";
|
|
||||||
import type { Lang } from "@/i18n";
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
post: CollectionEntry<"blog">;
|
|
||||||
lang: Lang;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { post, lang } = Astro.props;
|
|
||||||
|
|
||||||
const allPosts = await getCollection("blog");
|
|
||||||
|
|
||||||
// 只保留当前语言
|
|
||||||
const sameLangPosts = allPosts.filter((p) => {
|
|
||||||
const [postLang] = p.id.split("/");
|
|
||||||
return postLang === lang;
|
|
||||||
});
|
|
||||||
|
|
||||||
// 按日期倒序：越新越靠前
|
|
||||||
const sortedPosts = [...sameLangPosts].sort(
|
|
||||||
(a, b) =>
|
|
||||||
new Date(b.data.pubDate).getTime() - new Date(a.data.pubDate).getTime(),
|
|
||||||
);
|
|
||||||
|
|
||||||
// 找当前文章位置
|
|
||||||
const currentIndex = sortedPosts.findIndex((p) => p.id === post.id);
|
|
||||||
|
|
||||||
// 更旧的一篇
|
|
||||||
const prevPost =
|
|
||||||
currentIndex < sortedPosts.length - 1
|
|
||||||
? sortedPosts[currentIndex + 1]
|
|
||||||
: null;
|
|
||||||
|
|
||||||
// 更新的一篇
|
|
||||||
const nextPost = currentIndex > 0 ? sortedPosts[currentIndex - 1] : null;
|
|
||||||
|
|
||||||
const getSlugFromId = (id: string) => id.split("/").slice(1).join("/");
|
|
||||||
|
|
||||||
const prevSlug = prevPost ? getSlugFromId(prevPost.id) : null;
|
|
||||||
const nextSlug = nextPost ? getSlugFromId(nextPost.id) : null;
|
|
||||||
---
|
|
||||||
|
|
||||||
<nav class="post-nav" aria-label="Post navigation">
|
|
||||||
<div class="post-nav-item post-nav-prev">
|
|
||||||
{
|
|
||||||
nextPost && nextSlug && (
|
|
||||||
<a href={`/${lang}/posts/${nextSlug}/`}>
|
|
||||||
<span class="post-nav-label">
|
|
||||||
{lang === "zh" ? "上一篇" : "Previous"}
|
|
||||||
</span>
|
|
||||||
<span class="post-nav-title">{nextPost.data.title}</span>
|
|
||||||
</a>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="post-nav-item post-nav-next">
|
|
||||||
{
|
|
||||||
prevPost && prevSlug && (
|
|
||||||
<a href={`/${lang}/posts/${prevSlug}/`}>
|
|
||||||
<span class="post-nav-label">
|
|
||||||
{lang === "zh" ? "下一篇" : "Next"}
|
|
||||||
</span>
|
|
||||||
<span class="post-nav-title">{prevPost.data.title}</span>
|
|
||||||
</a>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.post-nav {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: 1rem;
|
|
||||||
margin-top: 3rem;
|
|
||||||
padding-top: 1.5rem;
|
|
||||||
padding-bottom: 1.5rem;
|
|
||||||
border-top: 1px dashed rgba(128, 128, 128, 0.5);
|
|
||||||
border-bottom: 1px dashed rgba(128, 128, 128, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-nav-item {
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-nav-next {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
.post-nav-title {
|
|
||||||
display: inline-block;
|
|
||||||
transition: transform 0.18s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-nav a:hover .post-nav-title {
|
|
||||||
transform: scale(1.04);
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-nav a {
|
|
||||||
display: block;
|
|
||||||
text-decoration: none;
|
|
||||||
/* color: inherit; */
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-nav-label {
|
|
||||||
display: block;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
opacity: 0.65;
|
|
||||||
margin-bottom: 0.35rem;
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-nav-title {
|
|
||||||
display: block;
|
|
||||||
font-size: 1rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.post-nav {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-nav-next {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,13 +1,11 @@
|
||||||
---
|
---
|
||||||
import BaseLayout from "./BaseLayout.astro";
|
import BaseLayout from "./BaseLayout.astro";
|
||||||
import Remark42Embed from "@/components/Remark42Embed.astro";
|
import Remark42Embed from "@/components/Remark42Embed.astro";
|
||||||
import PostNav from "@/components/Posts/PostNav.astro";
|
|
||||||
import PostMenu from "@/components/Posts/PostMenu.astro";
|
|
||||||
import { fade } from "astro:transitions";
|
import { fade } from "astro:transitions";
|
||||||
import { getTranslations } from "@/i18n";
|
import { getLangFromUrl, getTranslations } from "@/i18n";
|
||||||
import "@/styles/global.css";
|
import "@/styles/global.css";
|
||||||
|
|
||||||
const { post, frontmatter, lang, slug, postId, headings } = Astro.props;
|
const { frontmatter, lang, slug, postId } = Astro.props;
|
||||||
const comments = lang === "zh" ? "评论区" : "comments";
|
const comments = lang === "zh" ? "评论区" : "comments";
|
||||||
const t = getTranslations(lang);
|
const t = getTranslations(lang);
|
||||||
---
|
---
|
||||||
|
|
@ -39,9 +37,6 @@ const t = getTranslations(lang);
|
||||||
<path d="M15 18l-6-6 6-6"></path>
|
<path d="M15 18l-6-6 6-6"></path>
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<PostMenu headings={headings} />
|
|
||||||
|
|
||||||
<article class="post-article">
|
<article class="post-article">
|
||||||
<div class="post-header">
|
<div class="post-header">
|
||||||
<div class="post-meta">
|
<div class="post-meta">
|
||||||
|
|
@ -81,8 +76,6 @@ const t = getTranslations(lang);
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<PostNav post={post} lang={lang} />
|
|
||||||
|
|
||||||
<h2>{comments}</h2>
|
<h2>{comments}</h2>
|
||||||
<Remark42Embed slug={slug} />
|
<Remark42Embed slug={slug} />
|
||||||
</article>
|
</article>
|
||||||
|
|
|
||||||
|
|
@ -22,19 +22,17 @@ export async function getStaticPaths() {
|
||||||
}
|
}
|
||||||
|
|
||||||
const { post, lang } = Astro.props;
|
const { post, lang } = Astro.props;
|
||||||
const { Content, headings } = await render(post);
|
const { Content } = await render(post);
|
||||||
|
|
||||||
const [postLang, ...slugParts] = post.id.split("/");
|
const [postLang, ...slugParts] = post.id.split("/");
|
||||||
const slug = slugParts.join("/");
|
const slug = slugParts.join("/");
|
||||||
---
|
---
|
||||||
|
|
||||||
<MarkdownPostLayout
|
<MarkdownPostLayout
|
||||||
post={post}
|
|
||||||
frontmatter={post.data}
|
frontmatter={post.data}
|
||||||
lang={lang}
|
lang={lang}
|
||||||
slug={slug}
|
slug={slug}
|
||||||
postId={post.id}
|
postId={post.id}
|
||||||
headings={headings}
|
|
||||||
>
|
>
|
||||||
<Content />
|
<Content />
|
||||||
</MarkdownPostLayout>
|
</MarkdownPostLayout>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue