added menu

src/components/Posts/PostMenu.astro

@@ -0,0 +1,335 @@
+---
+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>

src/components/Posts/PostNav.astro

@@ -0,0 +1,130 @@
+---
+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>

src/layouts/MarkdownPostLayout.astro

@@ -1,11 +1,13 @@
 ---
 import BaseLayout from "./BaseLayout.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 { getLangFromUrl, getTranslations } from "@/i18n";
+import { getTranslations } from "@/i18n";
 import "@/styles/global.css";
 
-const { frontmatter, lang, slug, postId } = Astro.props;
+const { post, frontmatter, lang, slug, postId, headings } = Astro.props;
 const comments = lang === "zh" ? "评论区" : "comments";
 const t = getTranslations(lang);
 ---
@@ -37,6 +39,9 @@ const t = getTranslations(lang);
       <path d="M15 18l-6-6 6-6"></path>
     </svg>
   </a>
+
+  <PostMenu headings={headings} />
+
   <article class="post-article">
     <div class="post-header">
       <div class="post-meta">
@@ -76,6 +81,8 @@ const t = getTranslations(lang);
       <slot />
     </div>
 
+    <PostNav post={post} lang={lang} />
+
     <h2>{comments}</h2>
     <Remark42Embed slug={slug} />
   </article>

src/pages/[lang]/posts/[...slug].astro

@@ -22,17 +22,19 @@ export async function getStaticPaths() {
 }
 
 const { post, lang } = Astro.props;
-const { Content } = await render(post);
+const { Content, headings } = await render(post);
 
 const [postLang, ...slugParts] = post.id.split("/");
 const slug = slugParts.join("/");
 ---
 
 <MarkdownPostLayout
+    post={post}
     frontmatter={post.data}
     lang={lang}
     slug={slug}
     postId={post.id}
+    headings={headings}
 >
     <Content />
 </MarkdownPostLayout>