feat: init Astro blog with wikilinks, KaTeX and local search

- Astro 5 static blog, zero runtime JS - Obsidian wikilink remark plugin (slug matches Astro content collection) - KaTeX math rendering, local search, TOC, archives, tags - 5 posts on math/physics/ML topics - deploy scripts for nginx + certbot + rsync
2026-08-14 00:19:33 +08:00
commit 12dd13a76f
39 changed files with 19371 additions and 0 deletions
@@ -0,0 +1,189 @@
+---
+import { render } from 'astro:content';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import { getPublishedPosts, formatDate, readingTime, heroCss } from '../../lib/utils';
+import Toc from '../../components/Toc.astro';
+import '../../styles/prose.css';
+
+export async function getStaticPaths() {
+  const posts = await getPublishedPosts();
+  return posts.map((post) => ({
+    params: { slug: post.id.replace(/\/index$/, '') },
+    props: { post },
+  }));
+}
+
+const { post } = Astro.props;
+const { Content } = await render(post);
+const all = await getPublishedPosts();
+const idx = all.findIndex((p) => p.id === post.id);
+const prev = idx > 0 ? all[idx - 1] : null;
+const next = idx < all.length - 1 ? all[idx + 1] : null;
+const rt = readingTime(post.body ?? '');
+const date = formatDate(post.data.date);
+const updated = post.data.updatedDate ? formatDate(post.data.updatedDate) : null;
+---
+
+<BaseLayout title={post.data.title} description={post.data.description} showProgress={true}>
+  <article class="container post" style="padding-top: calc(var(--nav-h) + clamp(32px, 6vw, 60px));">
+    <!-- 封面 -->
+    <div class="hero-banner reveal" style={`background:${heroCss(post)}`}>
+      <div class="hero-inner">
+        <div class="hero-tags">
+          {post.data.tags.map((t) => <span class="hero-chip">{t}</span>)}
+        </div>
+        <h1 class="post-title">{post.data.title}</h1>
+        <div class="post-meta">
+          <time datetime={post.data.date.toISOString()}>{date}</time>
+          <span class="dot"></span>
+          <span>{rt}阅读</span>
+          {updated && <><span class="dot"></span><span>更新于 {updated}</span></>}
+        </div>
+      </div>
+    </div>
+
+    <!-- 正文 + 侧栏目录 -->
+    <div class="post-layout">
+      <div class="post-content glass">
+        <div class="prose">
+          <Content />
+        </div>
+        <hr class="hr-soft" />
+        <div class="post-footer">
+          <div class="post-tags">
+            {post.data.tags.map((t) => (
+              <a href={`/tags/${t}`} class="chip chip-lg">#{t}</a>
+            ))}
+          </div>
+          <a href="/" class="back-link">← 返回首页</a>
+        </div>
+      </div>
+      <div class="post-aside">
+        <div class="aside-inner">
+          <Toc />
+        </div>
+      </div>
+    </div>
+
+    <!-- 上下篇 -->
+    {(prev || next) && (
+      <nav class="pager reveal">
+        {prev ? (
+          <a href={`/posts/${prev.id}`} class="pager-card glass">
+            <span class="pager-label">← 上一篇</span>
+            <span class="pager-title">{prev.data.title}</span>
+          </a>
+        ) : <span class="pager-empty"></span>}
+        {next ? (
+          <a href={`/posts/${next.id}`} class="pager-card glass next">
+            <span class="pager-label">下一篇 →</span>
+            <span class="pager-title">{next.data.title}</span>
+          </a>
+        ) : <span class="pager-empty"></span>}
+      </nav>
+    )}
+  </article>
+</BaseLayout>
+
+<style>
+  .hero-banner {
+    border-radius: var(--r-xl);
+    padding: clamp(28px, 5vw, 48px) clamp(20px, 4vw, 44px);
+    overflow: hidden;
+    position: relative;
+    color: #fff;
+  }
+  .hero-banner::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background:
+      radial-gradient(circle at 25% 15%, rgba(255, 255, 255, 0.35), transparent 45%),
+      linear-gradient(180deg, transparent 50%, rgba(0, 40, 80, 0.22));
+  }
+  .hero-inner { position: relative; z-index: 1; }
+  .hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
+  .hero-chip {
+    padding: 4px 12px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.22);
+    border: 1px solid rgba(255, 255, 255, 0.35);
+    font-size: 0.78rem;
+    font-weight: 600;
+    color: #fff;
+  }
+  .post-title {
+    font-family: var(--font-display);
+    font-weight: 800;
+    font-size: clamp(1.8rem, 1rem + 3vw, 2.8rem);
+    line-height: 1.15;
+    letter-spacing: -0.03em;
+    margin-bottom: 14px;
+    text-shadow: 0 2px 16px rgba(0, 40, 80, 0.25);
+  }
+  .post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: rgba(255, 255, 255, 0.92); font-size: 0.88rem; }
+  .post-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.6; }
+
+  .post-layout {
+    display: grid;
+    grid-template-columns: 1fr 260px;
+    gap: clamp(20px, 3vw, 36px);
+    margin-top: clamp(20px, 3vw, 32px);
+    align-items: start;
+  }
+  .post-content {
+    border-radius: var(--r-lg);
+    padding: clamp(20px, 3.5vw, 40px);
+    min-width: 0;
+  }
+  .post-footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 14px;
+  }
+  .post-tags { display: flex; flex-wrap: wrap; gap: 8px; }
+  .back-link { color: var(--ink-faint); font-weight: 600; font-size: 0.9rem; }
+  .back-link:hover { color: var(--blue-600); }
+
+  .post-aside { position: relative; }
+  .aside-inner {
+    position: sticky;
+    top: calc(var(--nav-h) + 24px);
+    max-height: calc(100vh - var(--nav-h) - 48px);
+    overflow: auto;
+  }
+
+  /* 上下篇 */
+  .pager {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+    margin-top: clamp(28px, 4vw, 44px);
+  }
+  .pager-card {
+    border-radius: var(--r-md);
+    padding: 16px 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    transition: transform 0.3s;
+  }
+  .pager-card:hover { transform: translateY(-3px); }
+  .pager-card.next { text-align: right; align-items: flex-end; }
+  .pager-label { color: var(--blue-500); font-weight: 700; font-size: 0.82rem; }
+  .pager-title { color: var(--ink); font-weight: 600; }
+  .pager-empty { visibility: hidden; }
+
+  /* 移动端：目录移到正文上方，上下篇单列 */
+  @media (max-width: 1024px) {
+    .post-layout { grid-template-columns: 1fr; }
+    .aside-inner { position: static; max-height: none; }
+  }
+  @media (max-width: 600px) {
+    .pager { grid-template-columns: 1fr; }
+    .pager-card.next { text-align: left; align-items: flex-start; }
+    .pager-empty { display: none; }
+  }
+</style>
@@ -0,0 +1,42 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import PostCard from '../../components/PostCard.astro';
+import TagChip from '../../components/TagChip.astro';
+import { getPublishedPosts, getAllTags } from '../../lib/utils';
+
+const all = await getPublishedPosts();
+const tags = getAllTags(all);
+---
+
+<BaseLayout title="全部文章" description="Yukun's Blog 的全部文章列表">
+  <section class="container" style="padding-top: calc(var(--nav-h) + 48px);">
+    <header class="page-head reveal">
+      <h1 class="page-title">全部文章</h1>
+      <p class="page-sub">共 {all.length} 篇 · 按发布时间倒序排列</p>
+    </header>
+
+    <div class="tag-bar glass reveal">
+      <span class="tag-label">筛选标签</span>
+      <div class="tag-list">
+        <a href="/posts" class="tag-chip active">全部</a>
+        {tags.map((t) => <TagChip tag={t.tag} count={t.count} />)}
+      </div>
+    </div>
+  </section>
+
+  <section class="container section" style="padding-top: 24px;">
+    <div class="post-grid">
+      {all.map((post) => <PostCard post={post} class="reveal" />)}
+    </div>
+  </section>
+</BaseLayout>
+
+<style>
+  .page-head { margin-bottom: 28px; }
+  .page-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1rem + 4vw, 3rem); letter-spacing: -0.03em; color: var(--ink); }
+  .page-sub { color: var(--ink-soft); margin-top: 8px; }
+  .tag-bar { border-radius: var(--r-lg); padding: 14px 18px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
+  .tag-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); font-weight: 700; white-space: nowrap; }
+  .tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
+  .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(16px, 2.5vw, 24px); }
+</style>