hd-garden 0.7.0 → 0.8.0

package/app/components/HandbookLangRedirect.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { useEffect } from "react";
+import { HANDBOOK_LANG_KEY, type HandbookLang } from "../lib/garden-docs-meta";
+import { swapHandbookLang } from "../lib/handbook-path";
+
+/**
+ * First visit: follow the browser language. Afterwards: follow the reader's
+ * saved choice (set by the 中 / EN switch). Only moves to a page that exists,
+ * which the hreflang link in <head> tells us.
+ */
+export function HandbookLangRedirect({ lang }: { lang: HandbookLang }) {
+  useEffect(() => {
+    let saved: string | null = null;
+    try {
+      saved = localStorage.getItem(HANDBOOK_LANG_KEY);
+    } catch {}
+    const wanted: HandbookLang = saved === "en" || saved === "zh"
+      ? saved
+      : /^en\b/i.test(navigator.language || "") ? "en" : "zh";
+    if (wanted === lang) return;
+    const link = document.querySelector<HTMLLinkElement>(`link[rel="alternate"][hreflang="${wanted === "en" ? "en" : "zh-CN"}"]`);
+    if (!link?.href) return;
+    // The hreflang link says the page exists; the address comes from this one,
+    // so the origin and any basePath stay as they are.
+    const pathname = swapHandbookLang(location.pathname, wanted);
+    if (pathname && pathname !== location.pathname) location.replace(pathname + location.search + location.hash);
+  }, [lang]);
+  return null;
+}

package/app/components/HandbookLangSwitch.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+import { usePathname } from "next/navigation";
+import { HANDBOOK_LANG_KEY, handbookBase, type HandbookLang } from "../lib/garden-docs-meta";
+import { siteHref } from "../lib/site-href";
+import { swapHandbookLang } from "../lib/handbook-path";
+
+const noSubscribe = () => () => {};
+
+/** The counterpart page from the hreflang link in <head>, on this origin. */
+function counterpartHref(target: HandbookLang) {
+  const link = document.querySelector<HTMLLinkElement>(`link[rel="alternate"][hreflang="${target === "en" ? "en" : "zh-CN"}"]`);
+  if (link?.href) return swapHandbookLang(location.pathname, target);
+  return target === "zh" ? siteHref(`${handbookBase("zh")}/`) : null;
+}
+
+/** 「中 / EN」 in the top bar on handbook pages. Goes to the counterpart page. */
+export function HandbookLangSwitch() {
+  const pathname = usePathname() ?? "";
+  const lang: HandbookLang = /\/garden\/en(\/|$)/.test(pathname) ? "en" : "zh";
+  const target: HandbookLang = lang === "en" ? "zh" : "en";
+  const href = useSyncExternalStore(
+    noSubscribe,
+    () => counterpartHref(target),
+    () => null,
+  );
+
+  const remember = () => {
+    try {
+      localStorage.setItem(HANDBOOK_LANG_KEY, target);
+    } catch {}
+  };
+  const label = (
+    <>
+      <span aria-current={lang === "zh" ? "true" : undefined}>中</span>
+      <span aria-hidden="true"> / </span>
+      <span aria-current={lang === "en" ? "true" : undefined}>EN</span>
+    </>
+  );
+  if (!href) {
+    return <span className="sh-lang is-disabled" title="No English version of this page yet">{label}</span>;
+  }
+  return (
+    <a className="sh-lang" href={href} hrefLang={target === "en" ? "en" : "zh-CN"} lang={target === "en" ? "en" : undefined} onClick={remember} aria-label={target === "en" ? "Read in English" : "Switch to Chinese"}>
+      {label}
+    </a>
+  );
+}

package/app/components/HandbookView.tsx

@@ -0,0 +1,187 @@
+import Link from "next/link";
+import type { Metadata } from "next";
+import { ArrowLeft, ArrowRight } from "@phosphor-icons/react/ssr";
+import { ArticleMeasure } from "./ArticleMeasure";
+import { ArticleReferences } from "./ArticleReferences";
+import { ArticleTitle } from "./ArticleTitle";
+import { GardenDocsNav } from "./GardenDocsNav";
+import { HandbookLangRedirect } from "./HandbookLangRedirect";
+import { MarkdownArticle } from "./MarkdownArticle";
+import { TableOfContents } from "./TableOfContents";
+import { extractHeadings, handbookDocs, handbookIndexDoc, hasHandbookPage, type GardenDocEntry } from "../lib/content";
+import { pageAlternates } from "../lib/page-alternates";
+import { absoluteUrl, getSiteUrl } from "../lib/site";
+import { siteHref } from "../lib/site-href";
+import {
+  COMPONENT_BADGE,
+  HANDBOOK_SECTIONS,
+  HANDBOOK_UI,
+  handbookPath,
+  orderedHandbookDocs,
+  sectionTitle,
+  toHandbookNavItems,
+  type HandbookLang,
+} from "../lib/garden-docs-meta";
+import { siteConfig } from "../site.config";
+
+const other = (lang: HandbookLang): HandbookLang => (lang === "en" ? "zh" : "en");
+const hreflang = (lang: HandbookLang) => (lang === "en" ? "en" : "zh-CN");
+
+/** canonical + hreflang links; the counterpart is listed only when it exists. */
+export function handbookLanguages(lang: HandbookLang, docPath: string) {
+  if (!hasHandbookPage(other(lang), docPath)) return undefined;
+  const zh = siteHref(handbookPath("zh", docPath));
+  const en = siteHref(handbookPath("en", docPath));
+  return { "zh-CN": zh, en, "x-default": zh };
+}
+
+export const handbookAlternates = (lang: HandbookLang, docPath: string) =>
+  pageAlternates(handbookPath(lang, docPath), handbookLanguages(lang, docPath));
+
+export async function handbookDocMetadata(lang: HandbookLang, doc: GardenDocEntry | undefined) {
+  if (!doc) return {};
+  const t = HANDBOOK_UI[lang];
+  const baseUrl = await getSiteUrl();
+  const pathname = siteHref(handbookPath(lang, doc.path));
+  return {
+    title: `${doc.title} · ${t.name}`,
+    description: doc.description,
+    alternates: handbookAlternates(lang, doc.path),
+    openGraph: {
+      type: "article",
+      url: absoluteUrl(pathname, baseUrl),
+      title: `${doc.title} · ${t.name}`,
+      description: doc.description,
+      locale: lang === "en" ? "en_US" : "zh_CN",
+    },
+  } satisfies Metadata;
+}
+
+export function HandbookOverview({ lang }: { lang: HandbookLang }) {
+  const t = HANDBOOK_UI[lang];
+  const docs = handbookDocs(lang);
+  const indexDoc = handbookIndexDoc(lang);
+  const navItems = toHandbookNavItems(docs);
+  const firstDoc = orderedHandbookDocs(docs)[0] ?? null;
+  const content = indexDoc?.content ?? "";
+  const headings = extractHeadings(content);
+  // The site config title/subtitle is written in the site's own language.
+  const configured = lang === "zh" ? siteConfig.pages.garden : { title: "", subtitle: "" };
+  const title = configured.title?.trim() || indexDoc?.title || t.name;
+  const subtitle = configured.subtitle?.trim() || indexDoc?.description || "";
+
+  return (
+    <main className="column-reading-page garden-doc-page" lang={hreflang(lang)}>
+      <HandbookLangRedirect lang={lang} />
+      <GardenDocsNav docs={navItems} currentPath="" lang={lang} />
+
+      <article className="article-column garden-doc-article h-entry">
+        <header className="gdoc-article-head">
+          <div className="gdoc-eyebrow">
+            <span>{t.name}</span>
+            <span aria-hidden="true">/</span>
+            <span>{t.overview}</span>
+          </div>
+          <ArticleTitle title={title} />
+          {subtitle ? <p className="gdoc-article-deck p-summary">{subtitle}</p> : null}
+        </header>
+
+        <ArticleMeasure />
+
+        <div className="e-content">
+          <MarkdownArticle content={content} lang={lang} />
+        </div>
+
+        <ArticleReferences references={indexDoc?.references} />
+
+        {firstDoc ? (
+          <nav className="gdoc-pager" aria-label={t.pager}>
+            <Link href={siteHref(handbookPath(lang, firstDoc.path))} className="gdoc-pager-card is-next">
+              <span className="gdoc-pager-dir">
+                {t.next}
+                <ArrowRight size={14} aria-hidden="true" />
+              </span>
+              <strong>{firstDoc.title}</strong>
+            </Link>
+          </nav>
+        ) : null}
+      </article>
+
+      <TableOfContents headings={headings} label={t.toc} lang={lang} />
+    </main>
+  );
+}
+
+export function HandbookDoc({ lang, doc }: { lang: HandbookLang; doc: GardenDocEntry }) {
+  const t = HANDBOOK_UI[lang];
+  const docs = handbookDocs(lang);
+  const ordered = orderedHandbookDocs(docs);
+  const navItems = toHandbookNavItems(docs);
+  const index = ordered.findIndex((item) => item.path === doc.path);
+  const prev = index > 0 ? ordered[index - 1] : null;
+  const next = index >= 0 && index < ordered.length - 1 ? ordered[index + 1] : null;
+  const headings = extractHeadings(doc.content);
+  const sectionMeta = HANDBOOK_SECTIONS.find((sec) => sec.id === doc.section);
+  const componentBadge = COMPONENT_BADGE[doc.path];
+
+  return (
+    <main className="column-reading-page garden-doc-page" lang={hreflang(lang)}>
+      <HandbookLangRedirect lang={lang} />
+      <GardenDocsNav docs={navItems} currentPath={doc.path} lang={lang} />
+
+      <article className="article-column garden-doc-article h-entry">
+        <header className="gdoc-article-head">
+          <div className="gdoc-eyebrow">
+            <Link href={siteHref(handbookPath(lang))} className="gdoc-eyebrow-root">
+              {t.name}
+            </Link>
+            <span aria-hidden="true">/</span>
+            <span>{sectionTitle(sectionMeta, lang) ?? doc.sectionTitle ?? t.guide}</span>
+            {componentBadge ? <code className="gdoc-eyebrow-fence">{`garden ${componentBadge}`}</code> : null}
+          </div>
+          <ArticleTitle title={doc.title} />
+          {doc.description ? <p className="gdoc-article-deck p-summary">{doc.description}</p> : null}
+        </header>
+
+        <ArticleMeasure />
+
+        <div className="e-content">
+          <MarkdownArticle content={doc.content} lang={lang} />
+        </div>
+
+        <ArticleReferences references={doc.references} />
+
+        <nav className="gdoc-pager" aria-label={t.pager}>
+          {prev ? (
+            <Link href={siteHref(handbookPath(lang, prev.path))} className="gdoc-pager-card is-prev">
+              <span className="gdoc-pager-dir">
+                <ArrowLeft size={14} aria-hidden="true" />
+                {t.prev}
+              </span>
+              <strong>{prev.title}</strong>
+            </Link>
+          ) : (
+            <Link href={siteHref(handbookPath(lang))} className="gdoc-pager-card is-prev">
+              <span className="gdoc-pager-dir">
+                <ArrowLeft size={14} aria-hidden="true" />
+                {t.backToOverview}
+              </span>
+              <strong>{t.overviewDocTitle}</strong>
+            </Link>
+          )}
+          {next ? (
+            <Link href={siteHref(handbookPath(lang, next.path))} className="gdoc-pager-card is-next">
+              <span className="gdoc-pager-dir">
+                {t.next}
+                <ArrowRight size={14} aria-hidden="true" />
+              </span>
+              <strong>{next.title}</strong>
+            </Link>
+          ) : null}
+        </nav>
+      </article>
+
+      <TableOfContents headings={headings} label={t.toc} lang={lang} />
+    </main>
+  );
+}

package/app/components/MarkdownArticle.tsx

@@ -1,3 +1,5 @@
+import { UiLangProvider } from "./UiLang";
+import { ui, type UiLang } from "../lib/i18n";
 import { markdownPlugins } from "../lib/markdown-plugins";
 import { remarkA2 } from "../lib/remark-a2.mjs";
 import { remarkLinkCard } from "../lib/remark-link-card.mjs";
@@ -28,7 +30,7 @@ import { imageDimensions, lookupImageSize } from "../../ui/garden/image-dims.mjs
 import { siteConfig, siteLinks } from "@garden/site-config";
 import { articleLink, sameSiteMatcher } from "../../ui/garden/same-site.mjs";
 import { columnRedirects, internalLinkResolver, readRedirects } from "../../ui/garden/internal-links.mjs";
-import { columnHref, columns, gardenDocHref, gardenDocs, postHref, posts, thoughts } from "../lib/content";
+import { columnHref, columns, gardenDocHref, gardenDocs, gardenDocsEn, postHref, posts, thoughts } from "../lib/content";
 import { LinkCardRefresh } from "./LinkCardRefresh";
 import { linkHost } from "../../scripts/link-meta-core.mjs";
 import { cardDate } from "../../ui/garden/card-refresh.mjs";
@@ -46,11 +48,12 @@ const internalRoute = internalLinkResolver({
     ...columnRedirects({ columns: [...new Set(columns.map((entry) => entry.column).filter(Boolean))].map((slug) => ({ slug })) }),
   ],
   routes: [
-    "/", "/blog", "/columns", "/thoughts", "/tags", "/about", "/garden",
+    "/", "/blog", "/columns", "/thoughts", "/tags", "/about", "/garden", "/garden/en",
     ...posts.map(postHref),
     ...columns.map(columnHref),
     ...thoughts.map((thought) => `/thoughts/${thought.slug}`),
     ...gardenDocs.map(gardenDocHref),
+    ...gardenDocsEn.map((doc) => siteHref(`/garden/en/${doc.path}`)),
   ],
   basePath: siteLinks?.basePath ?? "",
   // Same shape as every other address in the site (the slash follows trailingSlash).
@@ -208,7 +211,8 @@ const headingText = (children: ReactNode) => {
   return parts.join("");
 };
 
-export function MarkdownArticle({ content, numbering }: { content: string; numbering?: boolean }) {
+export function MarkdownArticle({ content, numbering, lang }: { content: string; numbering?: boolean; lang?: UiLang }) {
+  const t = ui(lang);
   // Optional layer 2: a Worker that refreshes card text. Without it, cards stay as built.
   const cardWorker = content.includes("{card}") ? siteConfig.linkPreview?.worker : undefined;
   const numbers = { h2: 0, h3: 0 };
@@ -248,7 +252,7 @@ export function MarkdownArticle({ content, numbering }: { content: string; numbe
     "garden-block": (props: { dataPayload?: string; "data-payload"?: string }) => {
       const payload = props.dataPayload ?? props["data-payload"];
       const block = readGardenPayload(payload);
-      if (block?.name === "file" && !block.error) return <GardenFile props={(block.props ?? {}) as Record<string, unknown>} />;
+      if (block?.name === "file" && !block.error) return <GardenFile props={(block.props ?? {}) as Record<string, unknown>} lang={lang} />;
       return <GardenBlock dataPayload={payload} />;
     },
     "garden-codediff": (props: {
@@ -266,6 +270,7 @@ export function MarkdownArticle({ content, numbering }: { content: string; numbe
     ),
   };
   return (
+    <UiLangProvider lang={lang}>
     <div className="markdown-body prose">
       <ReactMarkdown
         remarkPlugins={[...markdownPlugins, [remarkLinkCard, { sameSite }], [remarkA2, { imageSize: (src: string) => lookupImageSize(imageSizes, src) }]]}
@@ -320,7 +325,7 @@ export function MarkdownArticle({ content, numbering }: { content: string; numbe
             return <MarkdownImage {...props} {...dims} style={{ ...props.style, ...dims.style }} />;
           },
           table: ({ children, ...props }) => (
-            <div className="table-wrap" role="region" aria-label="表格，可横向滚动" tabIndex={0}>
+            <div className="table-wrap" role="region" aria-label={t.tableScroll} tabIndex={0}>
               <table {...props}>{children}</table>
             </div>
           ),
@@ -356,5 +361,6 @@ export function MarkdownArticle({ content, numbering }: { content: string; numbe
       </ReactMarkdown>
       {cardWorker ? <LinkCardRefresh endpoint={cardWorker} /> : null}
     </div>
+    </UiLangProvider>
   );
 }

package/app/components/MarkdownImage.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useUi } from "./UiLang";
 import { useEffect, useState, type ComponentPropsWithoutRef } from "react";
 
 // react-markdown also hands over its syntax-tree `node`; it must not reach the DOM.
@@ -8,7 +9,8 @@ type MarkdownImageProps = ComponentPropsWithoutRef<"img"> & { node?: unknown };
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function MarkdownImage({ alt = "", src, node, style, ...props }: MarkdownImageProps) {
   const [open, setOpen] = useState(false);
-  const description = alt || "查看原图";
+  const t = useUi();
+  const description = alt || t.viewImage;
 
   useEffect(() => {
     if (!open) return undefined;
@@ -33,7 +35,7 @@ export function MarkdownImage({ alt = "", src, node, style, ...props }: Markdown
         type="button"
         className="markdown-image-trigger"
         onClick={() => setOpen(true)}
-        aria-label={`放大查看：${description}`}
+        aria-label={t.zoomImage(description)}
       >
         {/* Native images preserve Typora-authored relative paths. */}
         {/* eslint-disable-next-line @next/next/no-img-element */}
@@ -56,9 +58,9 @@ export function MarkdownImage({ alt = "", src, node, style, ...props }: Markdown
               type="button"
               className="markdown-image-lightbox-close"
               onClick={() => setOpen(false)}
-              aria-label="关闭图片预览"
+              aria-label={t.closeImage}
             >
-              关闭
+              {t.close.trim()}
             </button>
           </div>
         </div>

package/app/components/SiteChrome.tsx

@@ -1,18 +1,27 @@
 "use client";
 
 import { usePathname } from "next/navigation";
+import { routeLang, ui } from "../lib/i18n";
 import { SiteFooter } from "./SiteFooter";
 import { SiteHeader } from "./SiteHeader";
 
 export function SiteChrome({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();
-  if (pathname?.startsWith("/admin")) return <>{children}</>;
+  const lang = routeLang(pathname);
+  // The skip link follows the route language too (/garden/en/ is English).
+  const skip = (
+    <a className="skip-link" href="#main-content">
+      {ui(lang).skipToContent}
+    </a>
+  );
+  if (pathname?.startsWith("/admin")) return <>{skip}{children}</>;
 
   return (
     <>
+      {skip}
       <SiteHeader />
       <div id="main-content">{children}</div>
-      <SiteFooter docs={pathname?.startsWith("/garden") ?? false} />
+      <SiteFooter docs={pathname?.startsWith("/garden") ?? false} lang={lang} />
     </>
   );
 }

package/app/components/SiteFooter.tsx

@@ -1,18 +1,20 @@
 import { GithubLogo, Rss } from "@phosphor-icons/react/ssr";
 import { githubUrl, siteConfig } from "../site.config";
+import { ui, type UiLang } from "../lib/i18n";
 
 /** On the Garden docs pages the footer carries no site-owner line. */
-export function SiteFooter({ docs = false }: { docs?: boolean }) {
+export function SiteFooter({ docs = false, lang }: { docs?: boolean; lang?: UiLang }) {
+  const t = ui(lang);
   return (
     <footer className="sh-footer">
       <div className="sh-foot">
         <p>
           {docs ? (
-            <span className="footer-framework">基于 <a href="https://github.com/hedon954/garden" target="_blank" rel="noreferrer">Garden</a> 构建</span>
+            <span className="footer-framework">{t.builtWith[0]}<a href="https://github.com/hedon954/garden" target="_blank" rel="noreferrer">Garden</a>{t.builtWith[1]}</span>
           ) : (
             <>
               © {new Date().getFullYear()} {siteConfig.author.name} · {siteConfig.footer}
-              <span className="footer-framework"> · 基于 <a href="https://github.com/hedon954/garden" target="_blank" rel="noreferrer">Garden</a> 构建</span>
+              <span className="footer-framework"> · {t.builtWith[0]}<a href="https://github.com/hedon954/garden" target="_blank" rel="noreferrer">Garden</a>{t.builtWith[1]}</span>
             </>
           )}
         </p>

package/app/components/SiteHeader.tsx

@@ -14,9 +14,11 @@ import type Fuse from "fuse.js";
 import { MagnifyingGlass, X } from "@phosphor-icons/react";
 import { brand, searchFull, searchIndexUrl } from "@garden/site-config";
 import { createSearch } from "../../ui/garden/search-match.mjs";
-import { cropMatchedText, highlightParts, noResultsText } from "../../ui/garden/search-preview.mjs";
+import { cropMatchedText, highlightParts } from "../../ui/garden/search-preview.mjs";
 import { resolveDark, themeSwitchProps } from "../../ui/garden/theme.mjs";
 import { SITE_NAV, isCurrentNav } from "../../ui/garden/site-nav.mjs";
+import { routeLang, ui } from "../lib/i18n";
+import { HandbookLangSwitch } from "./HandbookLangSwitch";
 import { createIdbStore, loadFullIndex, saveDataOn, whenIdleAfterLoad } from "../../ui/garden/search-full.mjs";
 import { siteConfig } from "../site.config";
 import { siteHref } from "../lib/site-href";
@@ -87,7 +89,7 @@ function loadSearchEngine() {
   return engineLoad;
 }
 
-const nav = SITE_NAV.map((item) => ({ ...item, href: siteHref(item.href) }));
+const nav = SITE_NAV.map((item) => ({ ...item, key: item.href, href: siteHref(item.href) }));
 
 function rangesFor(
   matches: readonly SearchMatch[] | undefined,
@@ -140,6 +142,7 @@ function searchPreview(
 
 export function SiteHeader() {
   const pathname = usePathname() || "/";
+  const t = ui(routeLang(pathname));
   const [menuOpen, setMenuOpen] = useState(false);
   const [searchOpen, setSearchOpen] = useState(false);
   const [query, setQuery] = useState("");
@@ -313,29 +316,30 @@ export function SiteHeader() {
             {brand.logo ? <span className="sh-mark" aria-hidden="true" dangerouslySetInnerHTML={{ __html: brand.logo }} /> : null}
             {siteConfig.name}
           </Link>
-          <nav className="sh-nav" aria-label="站点导航">
+          <nav className="sh-nav" aria-label={t.siteNav}>
             {nav.map((item) => (
               <Link key={item.href} href={item.href} aria-current={current(item.href) ? "page" : undefined}>
-                {item.label}
+                {t.navLabels[item.key] ?? item.label}
               </Link>
             ))}
           </nav>
           <div className="sh-tools">
-            <button ref={searchTriggerRef} className="sh-search" type="button" onClick={openSearch} onPointerEnter={prefetchSearch} onFocus={prefetchSearch} aria-label="搜索文章" aria-expanded={searchOpen} aria-controls="site-search-dialog">
+            <button ref={searchTriggerRef} className="sh-search" type="button" onClick={openSearch} onPointerEnter={prefetchSearch} onFocus={prefetchSearch} aria-label={t.searchArticles} aria-expanded={searchOpen} aria-controls="site-search-dialog">
               <svg viewBox="0 0 20 20" aria-hidden="true">
                 <circle cx="9" cy="9" r="5.8" />
                 <path d="M13.3 13.3 17 17" />
               </svg>
-              <span className="lbl">搜索</span>
+              <span className="lbl">{t.search}</span>
               <kbd><span className="kbd-mod kbd-mac">⌘</span><span className="kbd-mod kbd-other">Ctrl</span>{" "}K</kbd>
             </button>
-            <button className="sh-icon sh-search-m" type="button" onClick={openSearch} onPointerDown={prefetchSearch} aria-label="搜索文章">
+            <button className="sh-icon sh-search-m" type="button" onClick={openSearch} onPointerDown={prefetchSearch} aria-label={t.searchArticles}>
               <svg viewBox="0 0 20 20" aria-hidden="true">
                 <circle cx="9" cy="9" r="5.8" />
                 <path d="M13.3 13.3 17 17" />
               </svg>
             </button>
-            <button className="sh-icon sh-theme" type="button" onClick={toggleTheme} aria-label={dark ? "切换到浅色模式" : "切换到深色模式"}>
+            {pathname?.startsWith("/garden") ? <HandbookLangSwitch /> : null}
+            <button className="sh-icon sh-theme" type="button" onClick={toggleTheme} aria-label={dark ? t.toLight : t.toDark}>
               <svg className="i-moon" viewBox="0 0 20 20" aria-hidden="true">
                 <path d="M16.5 12.2A6.8 6.8 0 0 1 7.8 3.5a6.8 6.8 0 1 0 8.7 8.7Z" />
               </svg>
@@ -344,27 +348,27 @@ export function SiteHeader() {
                 <path d="M10 1.8v2M10 16.2v2M1.8 10h2M16.2 10h2M4.2 4.2l1.4 1.4M14.4 14.4l1.4 1.4M4.2 15.8l1.4-1.4M14.4 5.6l1.4-1.4" />
               </svg>
             </button>
-            <button className="sh-icon sh-menu-btn" type="button" aria-expanded={menuOpen} aria-controls="sh-menu" aria-label={menuOpen ? "关闭菜单" : "打开菜单"} onClick={() => setMenuOpen((open) => !open)}>
+            <button className="sh-icon sh-menu-btn" type="button" aria-expanded={menuOpen} aria-controls="sh-menu" aria-label={menuOpen ? t.closeMenu : t.openMenu} onClick={() => setMenuOpen((open) => !open)}>
               {menuOpen ? <X size={18} /> : <span aria-hidden="true">☰</span>}
             </button>
             {/* Without JavaScript the button above cannot open anything: these two links take its place
                 and open or close the menu through :target on the fixed anchors above (shell.css). */}
-            <a className="sh-icon sh-menu-nojs" id="sh-menu-open" href="#sh-menu-on" aria-label="打开菜单">
+            <a className="sh-icon sh-menu-nojs" id="sh-menu-open" href="#sh-menu-on" aria-label={t.openMenu}>
               <span aria-hidden="true">☰</span>
             </a>
-            <a className="sh-icon sh-menu-nojs-close" href="#sh-menu-off" aria-label="关闭菜单">
+            <a className="sh-icon sh-menu-nojs-close" href="#sh-menu-off" aria-label={t.closeMenu}>
               <X size={18} />
             </a>
           </div>
         </div>
-        <nav className={`sh-menu${menuOpen ? " is-open" : ""}`} id="sh-menu" aria-label="站点导航（移动端）">
+        <nav className={`sh-menu${menuOpen ? " is-open" : ""}`} id="sh-menu" aria-label={t.siteNavMobile}>
           {nav.map((item) => (
             <Link key={item.href} href={item.href} aria-current={current(item.href) ? "page" : undefined} onClick={() => setMenuOpen(false)}>
-              {item.label}
+              {t.navLabels[item.key] ?? item.label}
             </Link>
           ))}
           <button className="sh-menu-theme" {...themeSwitchProps(dark, toggleTheme)}>
-            <span>深色模式</span>
+            <span>{t.darkMode}</span>
             <span className="sh-switch" aria-hidden="true" />
           </button>
         </nav>
@@ -388,7 +392,7 @@ export function SiteHeader() {
             onKeyDown={handleSearchKeyDown}
           >
             <h2 className="sr-only" id="site-search-title">
-              搜索站内内容
+              {t.searchTitle}
             </h2>
             <div className="search-input-wrap">
               <MagnifyingGlass size={20} aria-hidden="true" />
@@ -400,8 +404,8 @@ export function SiteHeader() {
                   setActiveResult(-1);
                   resultRefs.current = [];
                 }}
-                placeholder="搜索标题、主题或正文…"
-                aria-label="模糊搜索"
+                placeholder={t.searchPlaceholder}
+                aria-label={t.searchInput}
                 role="combobox"
                 aria-expanded="true"
                 aria-autocomplete="list"
@@ -410,7 +414,7 @@ export function SiteHeader() {
                   activeResult >= 0 ? `site-search-result-${activeResult}` : undefined
                 }
               />
-              <button onClick={closeSearch} aria-label="关闭搜索">
+              <button onClick={closeSearch} aria-label={t.closeSearch}>
                 <X size={19} />
               </button>
             </div>
@@ -418,11 +422,11 @@ export function SiteHeader() {
               className="search-results"
               id="site-search-results"
               role="listbox"
-              aria-label="搜索结果"
+              aria-label={t.searchResults}
             >
               {query && engine && resultTotal === 0 ? null : (
                 <p className="search-label">
-                  {query ? `${resultTotal} 篇相关文章` : "最近内容"}
+                  {query ? t.resultCount(resultTotal) : t.recent}
                 </p>
               )}
               {results.map((result, index) => {
@@ -464,13 +468,13 @@ export function SiteHeader() {
               {results.length === 0 && (
                 <p className="empty-state">
                   {/* The query is a React text child, so it is escaped. */}
-                  {engine ? noResultsText(query) : engineFailed ? "搜索暂时打不开，请稍后再试。" : "正在载入…"}
+                  {engine ? t.noResults(query.trim()) : engineFailed ? t.searchFailed : t.loading}
                 </p>
               )}
             </div>
             <footer className="search-footer">
-              <span>支持模糊匹配</span>
-              <span><kbd>ESC</kbd> 关闭</span>
+              <span>{t.fuzzy}</span>
+              <span><kbd>ESC</kbd> {t.escToClose}</span>
             </footer>
           </section>
         </div>