初始提交：时之刃的小站

基于 VermilionVoid（朱墨留白）主题的个人博客。 - 站点配置集中在 src/data/site.ts 与 src/data/profile.ts - 30 篇文章、8 条偶得、相册 - 评论使用自托管 twikoo - 部署走 deploy.sh（rsync 到树莓派 + 云服务器）
2026-09-14 20:44:12 +08:00
commit 6f4cc13a20
209 changed files with 36176 additions and 0 deletions
@@ -0,0 +1,236 @@
+---
+import BaseLayout from "@/layouts/BaseLayout.astro"
+import SiteHeader from "@/components/site-header.astro"
+import { Footer } from "@/components/footer"
+import { siteTitleSuffix } from "@/data/site"
+import { galleryConfig } from "@/data/gallery"
+import { getAlbumCover, scanAlbumPhotos } from "@/lib/gallery"
+
+export function getStaticPaths() {
+  return galleryConfig.albums.map((album) => ({ params: { album: album.id } }))
+}
+
+const albumId = Astro.params.album as string
+const album = galleryConfig.albums.find((a) => a.id === albumId)
+
+if (!album) {
+  return Astro.redirect("/404/")
+}
+
+const photos = scanAlbumPhotos(album.id)
+const cover = getAlbumCover(album, photos)
+const columnWidth = galleryConfig.columnWidth || 240
+
+const title = `${album.name} | ${siteTitleSuffix}`
+const description = album.description ?? "相册"
+---
+
+<BaseLayout {title} {description} fontProfile="interface">
+  <div class="min-h-screen bg-background dark:bg-surface-subtle">
+    <SiteHeader />
+    <main class="pt-20 pb-16">
+      {/* 封面横幅 */}
+      <section class="relative w-full overflow-hidden">
+        {cover ? (
+          <div class="relative h-[240px] w-full sm:h-[320px]">
+            <img src={cover} alt={album.name} class="h-full w-full object-cover" />
+            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/35 to-black/10" />
+
+            <a
+              href="/gallery/"
+              class="absolute left-4 top-4 rounded-lg bg-black/35 px-3 py-1.5 text-sm text-white/90 backdrop-blur-sm transition-colors hover:bg-black/55 hover:text-white"
+            >
+              ← 返回相册
+            </a>
+
+            <div class="absolute inset-x-0 bottom-0 p-6">
+              <div class="mx-auto max-w-6xl">
+                <h1 class="mb-2 text-2xl font-bold text-white drop-shadow-lg sm:text-3xl">
+                  {album.name}
+                </h1>
+                {album.description && (
+                  <p class="mb-2 max-w-2xl line-clamp-2 text-sm leading-relaxed text-white/75">
+                    {album.description}
+                  </p>
+                )}
+                <div class="flex flex-wrap items-center gap-4 text-sm text-white/80">
+                  {album.date && <span>🗓 {album.date}</span>}
+                  {album.location && <span>📍 {album.location}</span>}
+                  <span>🖼 {photos.length} 张</span>
+                </div>
+                {album.tags && album.tags.length > 0 && (
+                  <div class="mt-2.5 flex flex-wrap gap-1.5">
+                    {album.tags.map((tag) => (
+                      <span class="rounded bg-white/20 px-2 py-0.5 text-xs text-white/90 backdrop-blur-sm">
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div class="mx-auto max-w-6xl px-6 pt-4">
+            <a href="/gallery/" class="mb-3 inline-block text-sm text-primary hover:underline">
+              ← 返回相册
+            </a>
+            <h1 class="text-2xl font-bold text-foreground sm:text-3xl">{album.name}</h1>
+          </div>
+        )}
+      </section>
+
+      {/* 瀑布流 */}
+      <section class="mx-auto max-w-6xl px-6 pt-8">
+        {photos.length > 0 ? (
+          <div class="gallery-masonry" style={`--col-width: ${columnWidth}px;`}>
+            {photos.map((photo, index) => (
+              <button
+                type="button"
+                data-lightbox-src={photo}
+                data-lightbox-index={index}
+                aria-label={`查看第 ${index + 1} 张照片`}
+                class="gallery-photo mb-3 block w-full cursor-zoom-in overflow-hidden rounded-xl border border-border/50 bg-card p-0"
+              >
+                <img
+                  src={photo}
+                  alt=""
+                  loading="lazy"
+                  decoding="async"
+                  class="h-auto w-full object-cover transition-transform duration-300 hover:scale-[1.03]"
+                />
+              </button>
+            ))}
+          </div>
+        ) : (
+          <div class="py-20 text-center text-muted-foreground">
+            这个相册还没有照片。往 <code class="rounded bg-secondary px-1.5 py-0.5">public/gallery/{album.id}/</code> 里放图片即可。
+          </div>
+        )}
+      </section>
+    </main>
+    <Footer />
+  </div>
+</BaseLayout>
+
+<style is:global>
+  .gallery-masonry {
+    column-width: var(--col-width, 240px);
+    column-gap: 0.75rem;
+  }
+  .gallery-masonry .gallery-photo {
+    break-inside: avoid;
+  }
+</style>
+
+<script>
+  /**
+   * 无依赖灯箱。
+   * 用事件委托 + 每次打开时重新收集当前页的照片，因此 ClientRouter 切页后依然有效。
+   */
+  const LB_ID = "vv-lightbox"
+
+  const ensureOverlay = (): HTMLElement => {
+    let overlay = document.getElementById(LB_ID)
+    if (overlay) return overlay
+
+    overlay = document.createElement("div")
+    overlay.id = LB_ID
+    overlay.setAttribute("role", "dialog")
+    overlay.setAttribute("aria-modal", "true")
+    overlay.className =
+      "fixed inset-0 z-[100] hidden items-center justify-center bg-black/90 backdrop-blur-sm"
+    overlay.innerHTML = `
+      <button type="button" data-lb-close aria-label="关闭"
+        class="absolute right-4 top-4 z-10 flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-2xl leading-none text-white/90 transition-colors hover:bg-white/20">×</button>
+      <button type="button" data-lb-prev aria-label="上一张"
+        class="absolute left-3 z-10 flex h-11 w-11 items-center justify-center rounded-full bg-white/10 text-2xl leading-none text-white/90 transition-colors hover:bg-white/20 sm:left-6">‹</button>
+      <button type="button" data-lb-next aria-label="下一张"
+        class="absolute right-3 z-10 flex h-11 w-11 items-center justify-center rounded-full bg-white/10 text-2xl leading-none text-white/90 transition-colors hover:bg-white/20 sm:right-6">›</button>
+      <img data-lb-img src="" alt="" class="max-h-[88vh] max-w-[92vw] object-contain" />
+      <div data-lb-count
+        class="absolute bottom-5 left-1/2 -translate-x-1/2 rounded-full bg-white/10 px-3 py-1 font-mono text-xs text-white/80"></div>
+    `
+    document.body.appendChild(overlay)
+    return overlay
+  }
+
+  let sources: string[] = []
+  let current = 0
+
+  const render = (overlay: HTMLElement) => {
+    const img = overlay.querySelector<HTMLImageElement>("[data-lb-img]")
+    const counter = overlay.querySelector<HTMLElement>("[data-lb-count]")
+    if (img) img.src = sources[current] ?? ""
+    if (counter) counter.textContent = `${current + 1} / ${sources.length}`
+    const single = sources.length < 2
+    for (const sel of ["[data-lb-prev]", "[data-lb-next]"]) {
+      const el = overlay.querySelector<HTMLElement>(sel)
+      if (el) el.style.display = single ? "none" : ""
+    }
+  }
+
+  const openAt = (index: number) => {
+    const overlay = ensureOverlay()
+    current = index
+    render(overlay)
+    overlay.classList.remove("hidden")
+    overlay.classList.add("flex")
+    document.body.style.overflow = "hidden"
+  }
+
+  const close = () => {
+    const overlay = document.getElementById(LB_ID)
+    if (!overlay) return
+    overlay.classList.add("hidden")
+    overlay.classList.remove("flex")
+    document.body.style.overflow = ""
+  }
+
+  const step = (delta: number) => {
+    if (sources.length < 2) return
+    current = (current + delta + sources.length) % sources.length
+    const overlay = document.getElementById(LB_ID)
+    if (overlay) render(overlay)
+  }
+
+  if (!(window as unknown as { __vvLightboxBound?: boolean }).__vvLightboxBound) {
+    ;(window as unknown as { __vvLightboxBound?: boolean }).__vvLightboxBound = true
+
+    document.addEventListener("click", (event) => {
+      const target = event.target as Element | null
+
+      const trigger = target?.closest<HTMLElement>("[data-lightbox-src]")
+      if (trigger) {
+        // 每次打开都重新收集当前页的照片
+        const all = Array.from(document.querySelectorAll<HTMLElement>("[data-lightbox-src]"))
+        sources = all.map((el) => el.dataset.lightboxSrc ?? "")
+        openAt(Number(trigger.dataset.lightboxIndex ?? all.indexOf(trigger)))
+        return
+      }
+
+      if (target?.closest("[data-lb-close]")) return close()
+      if (target?.closest("[data-lb-prev]")) return step(-1)
+      if (target?.closest("[data-lb-next]")) return step(1)
+
+      // 点背景关闭（点图片本身不关）
+      const overlay = document.getElementById(LB_ID)
+      if (overlay && target === overlay) close()
+    })
+
+    document.addEventListener("keydown", (event) => {
+      const overlay = document.getElementById(LB_ID)
+      if (!overlay || overlay.classList.contains("hidden")) return
+      if (event.key === "Escape") close()
+      if (event.key === "ArrowLeft") step(-1)
+      if (event.key === "ArrowRight") step(1)
+    })
+
+    // 切页时收拾干净，避免残留遮罩锁住滚动
+    document.addEventListener("astro:page-load", () => {
+      const overlay = document.getElementById(LB_ID)
+      if (overlay) overlay.remove()
+      document.body.style.overflow = ""
+    })
+  }
+</script>