博客架构演进：从纯静态到混合渲染

数据库设计#

1
posts
2
├── id            SERIAL PRIMARY KEY
3
├── code          TEXT UNIQUE NOT NULL     -- "cv1", "cv2"...
4
├── slug          TEXT UNIQUE NOT NULL     -- 兼容旧 .md 路径
5
├── title         TEXT
6
├── description   TEXT
7
├── category      TEXT
8
├── tags          TEXT[]
9
├── cover_image   TEXT
10
├── status        ENUM(published|hidden|draft)
11
├── pinned        BOOLEAN DEFAULT false
12
├── word_count    INTEGER
13
├── published_at  TIMESTAMP
14
├── created_at    TIMESTAMP
15
└── updated_at    TIMESTAMP
16

17
post_contents
18
├── id            SERIAL PRIMARY KEY
19
├── post_id       INTEGER UNIQUE → posts.id  (ON DELETE CASCADE)
20
├── content       TEXT             -- Markdown 正文（无 frontmatter）
21
└── updated_at    TIMESTAMP
22

23
users
24
├── id            SERIAL PRIMARY KEY
25
├── username      TEXT UNIQUE
26
├── password_hash TEXT               -- bcrypt 哈希
27
└── created_at    TIMESTAMP

• posts 表存储文章元数据和状态控制
• post_contents 表存储纯 Markdown 正文，与 posts 一一对应
• posts 行被删除时，post_contents 通过 ON DELETE CASCADE 自动清理

认证系统#

• JWT 令牌存在 httpOnly cookie 中，有效期 7 天
• bcryptjs 验证密码，jose 签发/验证 JWT
• Astro middleware 拦截 /admin/* 路径，校验 token，无效则 302 跳回首页

管理后台功能#

1
文章列表页（/admin/posts/）
2
├── 统计卡片（StatCard.svelte——已发布/隐藏/草稿/总计）
3
│     └── 数据来自 POST /api/admin/posts/stats
4
│     └── 操作后触发 admin:statsChanged 事件，Svelte 组件自动刷新
5
├── 搜索 / 批量操作 / 排序分页
6
└── 编辑 / 显示隐藏 / 删除
7

8
文章编辑页（/admin/posts/cv6/）
9
├── ArticleMetaForm.svelte（元数据：标题、分类、标签、置顶…）
10
└── MarkdownEditor.svelte（CodeMirror 6 + 实时预览）
11
      └── 预览使用完整 unified 管道（同文章页）

删除是硬删除——从 posts 表直接删行，post_contents 级联清除，同时删除对应的 .md 文件。

关键迁移#

内存缓存#

为了避免每次 SSR 请求都查数据库，首页/归档/标签/分类等列表页实现了 10 秒 TTL 缓存：

1
let postsCache: PostEntry[] | null = null;
2
let postsCacheTime = 0;
3
const POSTS_CACHE_TTL = 10_000;
4

5
async function getRawSortedPosts(): Promise<PostEntry[]> {
6
  const now = Date.now();
7
  if (postsCache && now - postsCacheTime < POSTS_CACHE_TTL) {
8
    return postsCache;   // ← 10 秒内直接返回
9
  }
10
  const rows = await db.select()...where(eq(status, "published"));
11
  postsCache = entries;
12
  postsCacheTime = now;
13
  return entries;
14
}

编辑文章后，管理后台不再重启 PM2——缓存 10 秒后自动过期，下次请求读取最新数据。

cv 码路由#

URL 从 /posts/site-architecture/site-architecture/ 改为 /posts/cv4/：

• cv 码是自增短标识，与数据库自增 id 对齐
• 主页 PostPage 通过 getPostUrlBySlug() 从 DB 查询 slug→code 映射
• 映射表有 10 秒 TTL，新建文章后至多等 10 秒 URL 自动切换
• 文章详情页同时支持 cv 码和 slug 兜底查询（缓存延迟时仍能正确渲染）

Markdown 渲染管道#

文章正文通过完整的 unified 管道处理，从文章页到后台预览完全一致：

共 16 个自定义插件，覆盖代码高亮（expressive-code）、数学公式（KaTeX）、提醒框（rehype-callouts，支持 GitHub/Obsidian/VitePress/Docusaurus 四种主题）、图表（mermaid + plantuml）、图像网格、GitHub 卡片、外部链接识别、邮件保护等功能。

PostCard 性能优化#

之前的 PostCard 在 SSR 时会调用 render(entry) 来解析 frontmatter 和正文摘要。这个操作会触发完整 unified 管道解析，对于列表页（首页/归档/标签）上有 5–20 篇文章的情况，开销很大。

优化方案：

• 所有文章数据（标题、描述、标签、封面、字数等）直接来自 posts 表查询
• 去掉 PostCard 中的 render() 调用
• 首页/归档等列表页无需解析 Markdown，纯 SQL 查询即可