@zlooks.cn/cli 1.0.5 → 1.0.7

package/templates/blog-theme/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "__PACKAGE_NAME__",
+  "version": "1.0.0",
+  "private": false,
+  "type": "module",
+  "engines": {
+    "node": ">=24.0.0"
+  },
+  "bin": {
+    "__PACKAGE_NAME__": "dist/command/index.js"
+  },
+  "files": [
+    "dist",
+    ".hile-rsc"
+  ],
+  "zlooks": {
+    "kind": "theme",
+    "themeId": "__THEME_ID__",
+    "description": __DESCRIPTION_JSON__,
+    "dependsOn": [],
+    "nodeConditions": [
+      "react-server"
+    ]
+  },
+  "scripts": {
+    "build:rsc": "pnpm run clean:rsc && hile-rsc build",
+    "verify:rsc": "hile-rsc verify",
+    "build:runtime": "pnpm run clean:runtime && tsc -p tsconfig.runtime.json && fix-esm-import-path --preserve-import-type ./dist",
+    "build": "pnpm run build:rsc && pnpm run build:runtime",
+    "clean:runtime": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\"",
+    "clean:rsc": "node -e \"require('node:fs').rmSync('.hile-rsc', { recursive: true, force: true })\"",
+    "dev": "NODE_OPTIONS=--conditions=react-server hile start --dev --env-file ~/.zlooks.cn/.env",
+    "start": "NODE_OPTIONS=--conditions=react-server hile start --env-file ~/.zlooks.cn/.env",
+    "test": "vitest run",
+    "typecheck": "tsc -p tsconfig.runtime.json --noEmit && tsc -p tsconfig.json --noEmit"
+  },
+  "dependencies": {
+    "@hile/rsc": "^1.0.18",
+    "@zlooks.cn/blog-schema": "^__BLOG_SCHEMA_VERSION__",
+    "@zlooks.cn/blog-theme": "^__BLOG_THEME_VERSION__",
+    "@zlooks.cn/global-config-shared": "^__GLOBAL_CONFIG_VERSION__",
+    "@zlooks.cn/service-command": "^__SERVICE_COMMAND_VERSION__",
+    "@zlooks.cn/ui": "^__UI_VERSION__",
+    "antd": "6.6.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "react-markdown": "^10.1.0",
+    "react-server-dom-webpack": "^19.2.8",
+    "remark-gfm": "^4.0.1"
+  },
+  "devDependencies": {
+    "@hile/cli": "^4.0.5",
+    "@hile/context": "^4.0.2",
+    "@hile/core": "^4.0.1",
+    "@hile/rsc-build": "^1.0.15",
+    "@types/node": "^26.2.0",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "fix-esm-import-path": "^1.10.3",
+    "happy-dom": "^20.14.0",
+    "typescript": "^7.0.2",
+    "vitest": "^4.1.11"
+  }
+}

package/templates/blog-theme/pnpm-workspace.yaml

@@ -0,0 +1,5 @@
+packages:
+  - .
+
+allowBuilds:
+  esbuild: true

package/templates/blog-theme/src/command/index.ts

@@ -0,0 +1,11 @@
+#!/usr/bin/env node
+import { fileURLToPath } from 'node:url';
+import { runServiceCommand } from '@zlooks.cn/service-command';
+
+await runServiceCommand({
+  packageRoot: fileURLToPath(new URL('../../', import.meta.url)),
+  requiresReactServer: true,
+}).catch((error: unknown) => {
+  process.stderr.write(`${error instanceof Error ? error.message : String(error)}\n`);
+  process.exitCode = 1;
+});

package/templates/blog-theme/src/identity.ts

@@ -0,0 +1,7 @@
+import { defineBlogTheme } from '@zlooks.cn/blog-theme';
+
+export const BLOG_THEME = defineBlogTheme({
+  id: '__THEME_ID__',
+  displayName: __DISPLAY_NAME_JSON__,
+  description: __DESCRIPTION_JSON__,
+});

package/templates/blog-theme/src/plugin/archive-filter.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { RscLink, useRscNavigation } from '@hile/rsc/client/navigation';
+import { blogPostArchiveInputSchema } from '@zlooks.cn/blog-schema';
+import type { BlogArchiveFilter } from '@zlooks.cn/blog-theme';
+import { ZlooksButton } from '@zlooks.cn/ui/button';
+import Input from 'antd/es/input/Input.js';
+import Select from 'antd/es/select/index.js';
+import { useState, type FormEvent } from 'react';
+
+type Mode = 'all' | 'year' | 'month' | 'range';
+
+export default function ArchiveFilter({ filter }: { readonly filter: BlogArchiveFilter }) {
+  return <FilterForm key={JSON.stringify(filter)} filter={filter} />;
+}
+
+function FilterForm({ filter }: { readonly filter: BlogArchiveFilter }) {
+  const navigation = useRscNavigation();
+  const [mode, setMode] = useState<Mode>(filter.startYear ? 'range' : filter.month ? 'month' : filter.year ? 'year' : 'all');
+  const [year, setYear] = useState(String(filter.year ?? ''));
+  const [month, setMonth] = useState(monthValue(filter.year, filter.month));
+  const [start, setStart] = useState(monthValue(filter.startYear, filter.startMonth));
+  const [end, setEnd] = useState(monthValue(filter.endYear, filter.endMonth));
+  const [error, setError] = useState('');
+
+  function submit(event: FormEvent) {
+    event.preventDefault();
+    const selected = mode === 'all' ? {} : mode === 'year' ? { year: Number(year) }
+      : mode === 'month' ? parseMonth(month)
+        : { startYear: parseMonth(start).year, startMonth: parseMonth(start).month, endYear: parseMonth(end).year, endMonth: parseMonth(end).month };
+    const parsed = blogPostArchiveInputSchema.safeParse({ ...selected, limit: 1, monthLimit: 1 });
+    if (!parsed.success) { setError('请选择有效时间，起始月份不能晚于结束月份。'); return; }
+    setError('');
+    const query = new URLSearchParams(Object.entries(selected).map(([key, value]) => [key, String(value)]));
+    navigation.push(query.size ? `/blog/archives?${query}` : '/blog/archives');
+  }
+
+  return (
+    <form aria-label="归档时间筛选" className="theme-archive-filter" onSubmit={submit}>
+      <Select<Mode> aria-label="筛选方式" value={mode} onChange={(value) => { setMode(value); setError(''); }} options={[
+        { value: 'all', label: '全部' }, { value: 'year', label: '年份' }, { value: 'month', label: '月份' }, { value: 'range', label: '月份范围' },
+      ]} />
+      {mode === 'year' ? <Input aria-label="年份" type="number" min={1970} max={9999} required value={year} onChange={(event) => setYear(event.target.value)} /> : null}
+      {mode === 'month' ? <Input aria-label="月份" type="month" min="1970-01" max="9999-12" required value={month} onChange={(event) => setMonth(event.target.value)} /> : null}
+      {mode === 'range' ? <>
+        <Input aria-label="起始月份" type="month" min="1970-01" max="9999-12" required value={start} onChange={(event) => setStart(event.target.value)} />
+        <Input aria-label="结束月份" type="month" min={start || '1970-01'} max="9999-12" required value={end} onChange={(event) => setEnd(event.target.value)} />
+      </> : null}
+      <ZlooksButton htmlType="submit">应用筛选</ZlooksButton>
+      <RscLink href="/blog/archives">清除筛选</RscLink>
+      {error ? <p role="alert">{error}</p> : null}
+    </form>
+  );
+}
+
+function parseMonth(value: string) {
+  const [year, month] = value.split('-').map(Number);
+  return { year: year ?? NaN, month: month ?? NaN };
+}
+function monthValue(year?: number, month?: number): string {
+  return year && month ? `${year}-${String(month).padStart(2, '0')}` : '';
+}

package/templates/blog-theme/src/plugin/blog-frame.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { RscLink, useRscNavigation } from '@hile/rsc/client/navigation';
+import type { BlogPageSummary } from '@zlooks.cn/blog-schema';
+import type { SitePresentationSnapshot } from '@zlooks.cn/global-config-shared';
+import { ZlooksUiProvider, useZlooksTheme, type ZlooksThemeMode } from '@zlooks.cn/ui';
+import { ZlooksShellProvider, useZlooksNavigation, useZlooksPathname } from '@zlooks.cn/ui/shell-provider';
+import { ZlooksUserAccess } from '@zlooks.cn/ui/shell';
+import { useRequest } from '@zlooks.cn/ui/request';
+import type { ZlooksRscShellContext } from '@zlooks.cn/ui/shell-context';
+import { useSitePresentation, ZlooksSiteConfigProvider } from '@zlooks.cn/ui/site-config';
+import type { ReactNode } from 'react';
+import AntFlex from 'antd/es/flex/index.js';
+import AntSegmented from 'antd/es/segmented/index.js';
+import { BlogSearch } from './blog-interactions.js';
+import './theme.css';
+
+const Flex = (AntFlex as unknown as { default?: typeof AntFlex }).default ?? AntFlex;
+const Segmented = (AntSegmented as unknown as { default?: typeof AntSegmented }).default ?? AntSegmented;
+
+export default function BlogFrame({
+  children,
+  navigationPages,
+  shell,
+  site,
+}: {
+  readonly children: ReactNode;
+  readonly navigationPages: readonly BlogPageSummary[];
+  readonly shell: ZlooksRscShellContext;
+  readonly site: SitePresentationSnapshot;
+}) {
+  return (
+    <ZlooksUiProvider>
+      <ZlooksShellProvider initialContext={shell}>
+        <ZlooksSiteConfigProvider initialConfig={site}>
+          <ThemeLayout navigationPages={navigationPages}>{children}</ThemeLayout>
+        </ZlooksSiteConfigProvider>
+      </ZlooksShellProvider>
+    </ZlooksUiProvider>
+  );
+}
+
+function ThemeLayout({ children, navigationPages }: {
+  readonly children: ReactNode;
+  readonly navigationPages: readonly BlogPageSummary[];
+}) {
+  const site = useSitePresentation();
+  const navigation = useZlooksNavigation();
+  const pathname = useZlooksPathname();
+  const rscNavigation = useRscNavigation();
+  const request = useRequest();
+  const { mode, setMode } = useZlooksTheme();
+  const links = [...navigation, { key: 'blog', label: '博客', href: '/blog' }, { key: 'archives', label: '归档', href: '/blog/archives' },
+    ...navigationPages.map((page) => ({ key: page.id, label: page.title, href: `/blog/pages/${page.slug}` })),
+    { key: 'friends', label: '友链', href: '/blog/friends' },
+  ].filter((item, index, items) => items.findIndex((other) => other.href === item.href) === index);
+  const activeHref = links.filter(({ href }) => pathname === href || (href !== '/' && pathname.startsWith(`${href}/`)))
+    .sort((a, b) => b.href.length - a.href.length)[0]?.href;
+
+  async function logout(href: string) {
+    await request(href, { method: 'POST', credentials: 'same-origin' }, { errorMessage: '退出登录失败' });
+    rscNavigation.refresh();
+  }
+  return (
+    <div className="theme-shell">
+      <Flex component="header" className="theme-header" align="center" gap="middle" wrap>
+        <RscLink className="theme-brand" href={site.identity.homeHref}>
+          {site.identity.logoUrl ? <img alt="" src={site.identity.logoUrl} /> : null}
+          <strong>{site.identity.name}</strong>
+        </RscLink>
+        <Flex component="nav" aria-label="主导航" gap="middle" wrap>
+          {links.map((item) => <RscLink aria-current={item.href === activeHref ? 'page' : undefined} href={item.href} key={item.href}>{item.label}</RscLink>)}
+        </Flex>
+        <BlogSearch />
+        <div role="group" aria-label="主题">
+          <Segmented<ZlooksThemeMode> value={mode} onChange={setMode} options={[
+            { label: '浅色', value: 'light' }, { label: '深色', value: 'dark' }, { label: '自动', value: 'default' },
+          ]} />
+        </div>
+        <ZlooksUserAccess onLogout={logout} onNavigate={rscNavigation.push} variant="avatar" />
+      </Flex>
+      <main className="theme-main">{children}</main>
+      <Flex component="footer" className="theme-footer" vertical align="center" gap="small">
+        {site.legal.registrations.map((registration) => registration.verificationUrl
+          ? <a key={registration.id} href={registration.verificationUrl} target="_blank" rel="noopener noreferrer">{registration.number}</a>
+          : <span key={registration.id}>{registration.number}</span>)}
+        <span>{site.legal.copyright ?? '由 Zlooks 驱动'}</span>
+      </Flex>
+    </div>
+  );
+}

package/templates/blog-theme/src/plugin/blog-interactions.tsx

@@ -0,0 +1,236 @@
+'use client';
+
+import { RscLink } from '@hile/rsc/client/navigation';
+import type { BlogComment, BlogPostEngagement, BlogPostSummary } from '@zlooks.cn/blog-schema';
+import { createBlogThemeClient } from '@zlooks.cn/blog-theme/client';
+import { ZlooksButton as Button } from '@zlooks.cn/ui/button';
+import { useRequest } from '@zlooks.cn/ui/request';
+import Input from 'antd/es/input/Input.js';
+import TextArea from 'antd/es/input/TextArea.js';
+import { useEffect, useRef, useState, type FormEvent } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+export function MarkdownContent({ children }: { readonly children: string }) {
+  return <ReactMarkdown skipHtml remarkPlugins={[remarkGfm]} components={{ h1: ({ children }) => <h2>{children}</h2> }}>{children}</ReactMarkdown>;
+}
+
+export function BlogSearch() {
+  const request = useRequest();
+  const client = createBlogThemeClient(request);
+  const controller = useRef<AbortController | undefined>(undefined);
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState<readonly BlogPostSummary[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [searched, setSearched] = useState(false);
+  useEffect(() => () => controller.current?.abort(), []);
+
+  async function search(event: FormEvent) {
+    event.preventDefault();
+    const normalized = query.trim();
+    if (normalized.length < 2 || normalized.length > 100) return;
+    controller.current?.abort();
+    const current = new AbortController();
+    controller.current = current;
+    setLoading(true);
+    setSearched(false);
+    try {
+      const response = await client.searchPosts(
+        { query: normalized, limit: 10 },
+        { signal: current.signal, errorMessage: '文章搜索失败' },
+      );
+      if (!current.signal.aborted) {
+        setResults(response.items);
+        setSearched(true);
+      }
+    } catch {
+      // useRequest owns bounded user-facing error presentation.
+    } finally {
+      if (controller.current === current) controller.current = undefined;
+      if (!current.signal.aborted) setLoading(false);
+    }
+  }
+
+  return (
+    <form className="theme-search" onSubmit={search} role="search">
+      <Input
+        aria-label="搜索文章"
+        maxLength={100}
+        onChange={(event) => {
+          controller.current?.abort();
+          controller.current = undefined;
+          setLoading(false);
+          setSearched(false);
+          setResults([]);
+          setQuery(event.target.value);
+        }}
+        placeholder="搜索文章"
+        value={query}
+      />
+      <Button className="theme-action" htmlType="submit" loading={loading} disabled={query.trim().length < 2}>搜索</Button>
+      {results.length > 0 ? (
+        <div className="theme-search-results">
+          {results.map((post) => <RscLink href={`/blog/posts/${post.slug}`} key={post.id}>{post.title}</RscLink>)}
+        </div>
+      ) : null}
+      {searched && results.length === 0 ? <p role="status">未找到相关文章</p> : null}
+    </form>
+  );
+}
+
+export function ArticleEngagement({ engagement, postSlug }: {
+  readonly engagement: BlogPostEngagement;
+  readonly postSlug: string;
+}) {
+  const request = useRequest();
+  const client = createBlogThemeClient(request);
+  const controller = useRef<AbortController | undefined>(undefined);
+  const [liked, setLiked] = useState(engagement.viewerState === 'liked');
+  const [likeCount, setLikeCount] = useState(engagement.likeCount);
+  const [loading, setLoading] = useState(false);
+  const canLike = engagement.viewerState === 'liked' || engagement.viewerState === 'not-liked';
+  useEffect(() => () => controller.current?.abort(), []);
+
+  async function toggleLike() {
+    if (!canLike || controller.current) return;
+    const current = new AbortController();
+    controller.current = current;
+    setLoading(true);
+    try {
+      const response = liked
+        ? await client.unlikePost({ slug: postSlug }, { signal: current.signal, errorMessage: '取消点赞失败' })
+        : await client.likePost({ slug: postSlug }, { signal: current.signal, errorMessage: '点赞失败' });
+      if (!current.signal.aborted) {
+        setLiked(response.liked);
+        setLikeCount(response.likeCount);
+      }
+    } catch {
+      // useRequest owns bounded user-facing error presentation.
+    } finally {
+      if (controller.current === current) controller.current = undefined;
+      if (!current.signal.aborted) setLoading(false);
+    }
+  }
+
+  return (
+    <div className="theme-engagement">
+      <span>{engagement.viewCount} 次浏览</span>
+      <Button type={liked ? 'primary' : 'default'} aria-pressed={liked} disabled={!canLike} loading={loading} onClick={() => void toggleLike()}>
+        {liked ? '已赞' : '点赞'} {likeCount}
+      </Button>
+    </div>
+  );
+}
+
+export function CommentSection({ comments, nextCursor: initialCursor, postSlug, viewerStatus }: {
+  readonly comments: readonly BlogComment[];
+  readonly nextCursor: string | null;
+  readonly postSlug: string;
+  readonly viewerStatus: 'authenticated' | 'anonymous' | 'unavailable';
+}) {
+  const request = useRequest();
+  const client = createBlogThemeClient(request);
+  const controller = useRef<AbortController | undefined>(undefined);
+  const [items, setItems] = useState<readonly BlogComment[]>(comments);
+  const [cursor, setCursor] = useState(initialCursor);
+  const [order, setOrder] = useState<'desc' | 'asc'>('desc');
+  const [content, setContent] = useState('');
+  const [submitted, setSubmitted] = useState(false);
+  const [loading, setLoading] = useState(false);
+  useEffect(() => () => controller.current?.abort(), []);
+
+  async function load(nextOrder: 'desc' | 'asc', nextCursor?: string) {
+    // A read must never cancel an accepted write, and cursors belong to the committed order.
+    if (controller.current) return;
+    const current = new AbortController();
+    controller.current = current;
+    setLoading(true);
+    try {
+      const response = await client.listComments(
+        { postSlug, limit: 20, order: nextOrder, ...(nextCursor ? { cursor: nextCursor } : {}) },
+        { signal: current.signal, errorMessage: '评论加载失败' },
+      );
+      if (!current.signal.aborted) {
+        setItems((existing) => mergeComments(nextCursor ? existing : [], response.items, nextOrder));
+        setCursor(response.nextCursor);
+        setOrder(nextOrder);
+      }
+    } catch {
+      // useRequest owns bounded user-facing error presentation.
+    } finally {
+      if (controller.current === current) controller.current = undefined;
+      if (!current.signal.aborted) setLoading(false);
+    }
+  }
+
+  async function submit(event: FormEvent) {
+    event.preventDefault();
+    const normalized = content.trim();
+    if (viewerStatus !== 'authenticated' || !normalized || normalized.length > 2000 || controller.current) return;
+    const submittedSnapshot = content;
+    const current = new AbortController();
+    controller.current = current;
+    setLoading(true);
+    try {
+      const comment = await client.createComment(
+        { postSlug, content: normalized },
+        { signal: current.signal, errorMessage: '评论提交失败' },
+      );
+      if (!current.signal.aborted) {
+        setItems((existing) => mergeComments(existing, [comment], order));
+        setContent((latest) => latest === submittedSnapshot ? '' : latest);
+        setSubmitted(true);
+      }
+    } catch {
+      // useRequest owns bounded user-facing error presentation.
+    } finally {
+      if (controller.current === current) controller.current = undefined;
+      if (!current.signal.aborted) setLoading(false);
+    }
+  }
+
+  return (
+    <section className="theme-comments" id="comments">
+      <header><h2>评论</h2></header>
+      {viewerStatus === 'authenticated' ? (
+        <form onSubmit={submit}>
+          <TextArea aria-label="评论内容" maxLength={2000} onChange={(event) => { setContent(event.target.value); setSubmitted(false); }} rows={5} value={content} />
+          <Button type="primary" disabled={!content.trim()} htmlType="submit" loading={loading}>提交评论</Button>
+          {submitted ? <p role="status">评论已提交，审核通过后将公开展示。</p> : null}
+        </form>
+      ) : <p>{viewerStatus === 'anonymous' ? '登录后才能发表评论。' : '账户服务暂不可用。'}</p>}
+      {items.length > 0 ? (
+        <>
+          <div aria-label="评论排序" className="theme-comment-order" role="group">
+            <Button aria-pressed={order === 'desc'} type={order === 'desc' ? 'primary' : 'default'} disabled={loading} onClick={() => void load('desc')}>最新优先</Button>
+            <Button aria-pressed={order === 'asc'} type={order === 'asc' ? 'primary' : 'default'} disabled={loading} onClick={() => void load('asc')}>最早优先</Button>
+          </div>
+          <div className="theme-comment-list">
+            {items.map((comment) => (
+              <article key={comment.id}>
+                <header><strong>{comment.user.displayName ?? '读者'}</strong><time dateTime={comment.createdAt}>{formatDate(comment.createdAt)}</time></header>
+                {comment.pendingReview ? <span>待审核</span> : null}
+                <MarkdownContent>{comment.content}</MarkdownContent>
+                {comment.replyContent ? <aside><strong>站长回复</strong><MarkdownContent>{comment.replyContent}</MarkdownContent></aside> : null}
+              </article>
+            ))}
+          </div>
+          {cursor ? <Button block className="theme-action theme-action-block" loading={loading} onClick={() => void load(order, cursor)}>加载更多评论</Button> : null}
+        </>
+      ) : <p>暂无评论。</p>}
+    </section>
+  );
+}
+
+function mergeComments(current: readonly BlogComment[], incoming: readonly BlogComment[], order: 'asc' | 'desc'): readonly BlogComment[] {
+  const byId = new Map([...current, ...incoming].map((comment) => [comment.id, comment]));
+  return [...byId.values()].sort((left, right) => {
+    const comparison = Date.parse(left.createdAt) - Date.parse(right.createdAt)
+      || (left.id < right.id ? -1 : left.id > right.id ? 1 : 0);
+    return order === 'asc' ? comparison : -comparison;
+  });
+}
+
+function formatDate(value: string): string {
+  return new Intl.DateTimeFormat('zh-CN', { dateStyle: 'medium', timeZone: 'Asia/Shanghai' }).format(new Date(value));
+}

package/templates/blog-theme/src/plugin/page.tsx

@@ -0,0 +1,174 @@
+import { RscLink } from '@hile/rsc/client/navigation';
+import type { BlogPostSummary } from '@zlooks.cn/blog-schema';
+import type { BlogThemeDataLoader, BlogThemeFrameModel, BlogThemeRouteProps } from '@zlooks.cn/blog-theme';
+import { createServiceBackedBlogThemeDataLoader } from '@zlooks.cn/blog-theme/rsc';
+import { ZlooksSeo, type ZlooksSeoModel } from '@zlooks.cn/ui/seo';
+import type { ReactNode } from 'react';
+import { BLOG_THEME } from '../identity.js';
+import BlogFrame from './blog-frame.js';
+import ArchiveFilter from './archive-filter.js';
+import { ArticleEngagement, CommentSection, MarkdownContent } from './blog-interactions.js';
+
+const data = createServiceBackedBlogThemeDataLoader({ definition: BLOG_THEME });
+
+export async function BlogHomePage(props: BlogThemeRouteProps) {
+  const model = await data.home(props);
+  return (
+    <Frame model={model.frame} seo={model.seo}>
+      <section className="theme-hero"><p>{__DISPLAY_NAME_JSON__}</p><h1>{model.frame.site.value.identity.name}</h1></section>
+      <div className="theme-layout">
+        <section>
+          <h2>最新文章</h2>
+          <PostGrid posts={model.posts.items} />
+          <Pagination current={model.page} pageSize={model.pageSize} path="/blog" total={model.posts.total} />
+        </section>
+        <aside className="theme-sidebar">
+          {model.sidebarPages.map((page) => <section key={page.id}><h2><RscLink href={`/blog/pages/${page.slug}`}>{page.title}</RscLink></h2><p>{page.summary}</p></section>)}
+          <section><h2>最新发布</h2>{model.latestPosts.map((post) => <RscLink href={`/blog/posts/${post.slug}`} key={post.id}>{post.title}</RscLink>)}</section>
+          <section><h2>分类</h2>{model.categories.map((category) => <RscLink href={`/blog/categories/${category.slug}`} key={category.id}>{category.name} · {category.postCount}</RscLink>)}</section>
+          <section><h2>标签</h2>{model.tags.map((tag) => <RscLink href={`/blog/tags/${tag.slug}`} key={tag.id}>#{tag.name}</RscLink>)}</section>
+          <section><h2>归档</h2>{model.archive.months.map((month) => <RscLink href={`/blog/archives?year=${month.year}&month=${month.month}`} key={`${month.year}-${month.month}`}>{month.year}-{month.month} · {month.count}</RscLink>)}</section>
+          <section><h2>最新评论</h2>{model.recentComments.map(({ comment, post }) => <RscLink href={`/blog/posts/${post.slug}#comments`} key={comment.id}>{comment.user.displayName ?? '读者'}：{comment.content}</RscLink>)}</section>
+        </aside>
+      </div>
+    </Frame>
+  );
+}
+
+export async function BlogPostPage(props: BlogThemeRouteProps) {
+  const model = await data.post(props);
+  if (model.kind === 'not-found') return renderMissing(model, props, 'post', '文章不存在');
+  return (
+    <Frame model={model.frame} seo={model.seo}>
+      <article className="theme-article">
+        <header>
+          <RscLink href={`/blog/categories/${model.post.category.slug}`}>{model.post.category.name}</RscLink>
+          <h1>{model.post.title}</h1>
+          {model.post.summary ? <p>{model.post.summary}</p> : null}
+          <time dateTime={model.post.publishedAt}>{formatDate(model.post.publishedAt)}</time>
+          <ArticleEngagement key={`${model.post.slug}:${JSON.stringify(model.engagement)}`} engagement={model.engagement} postSlug={model.post.slug} />
+        </header>
+        {model.post.coverUrl ? <img alt="" className="theme-cover" src={model.post.coverUrl} /> : null}
+        <div className="theme-prose"><MarkdownContent>{model.post.content}</MarkdownContent></div>
+        <nav aria-label="文章标签">{model.post.tags.map((tag) => <RscLink href={`/blog/tags/${tag.slug}`} key={tag.id}>#{tag.name}</RscLink>)}</nav>
+        <nav className="theme-connections" aria-label="相邻文章">
+          {model.connections.previousPost ? <RscLink href={`/blog/posts/${model.connections.previousPost.slug}`}>← {model.connections.previousPost.title}</RscLink> : <span />}
+          {model.connections.nextPost ? <RscLink href={`/blog/posts/${model.connections.nextPost.slug}`}>{model.connections.nextPost.title} →</RscLink> : null}
+        </nav>
+        {model.connections.relatedPosts.length ? <section><h2>相关文章</h2><PostGrid posts={model.connections.relatedPosts} /></section> : null}
+        <CommentSection key={`${model.post.slug}:${model.viewerStatus}:${JSON.stringify(model.comments)}`} comments={model.comments} nextCursor={model.nextCommentCursor} postSlug={model.post.slug} viewerStatus={model.viewerStatus} />
+      </article>
+      <aside className="theme-post-sidebar">
+        <h2>最新文章</h2>{model.sidebar.latestPosts.map((post) => <RscLink href={`/blog/posts/${post.slug}`} key={post.id}>{post.title}</RscLink>)}
+        <h2>分类</h2>{model.sidebar.categories.map((category) => <RscLink href={`/blog/categories/${category.slug}`} key={category.id}>{category.name}</RscLink>)}
+        <h2>最新评论</h2>{model.sidebar.recentComments.map(({ comment, post }) => <RscLink href={`/blog/posts/${post.slug}#comments`} key={comment.id}>{comment.content}</RscLink>)}
+      </aside>
+    </Frame>
+  );
+}
+
+export async function BlogArchivePage(props: BlogThemeRouteProps) {
+  const model = await data.archive(props);
+  return (
+    <Frame model={model.frame} seo={model.seo}>
+      <section><header className="theme-page-heading"><h1>文章归档</h1><p>共 {model.archive.total} 篇文章</p></header>
+        <ArchiveFilter filter={model.filter} />
+        <PostGrid posts={model.archive.items} />
+        <Pagination current={model.page} pageSize={model.pageSize} path={archivePath(model.filter)} total={model.archive.total} />
+      </section>
+    </Frame>
+  );
+}
+
+export async function BlogSinglePagePage(props: BlogThemeRouteProps) {
+  const model = await data.page(props);
+  if (!('frame' in model)) return <DeferredFrame props={props} resource="page"><Missing title="页面不存在" /></DeferredFrame>;
+  return (
+    <Frame model={model.frame} seo={model.seo}>
+      {model.kind === 'page' ? <article className="theme-article"><header><h1>{model.page.title}</h1><p>{model.page.summary}</p></header><div className="theme-prose"><MarkdownContent>{model.page.content}</MarkdownContent></div></article> : <Missing title="页面不存在" />}
+    </Frame>
+  );
+}
+
+export async function BlogCategoryPage(props: BlogThemeRouteProps) {
+  return renderTaxonomy(await data.category(props), props, 'category');
+}
+
+export async function BlogTagPage(props: BlogThemeRouteProps) {
+  return renderTaxonomy(await data.tag(props), props, 'tag');
+}
+
+export async function BlogFriendLinksPage(props: BlogThemeRouteProps) {
+  const model = await data.friends(props);
+  return (
+    <Frame model={model.frame} seo={model.seo}>
+      <section><header className="theme-page-heading"><h1>友情链接</h1><p>值得持续访问的站点。</p></header>
+        <div className="theme-friends">{model.links.map((link) => <a href={link.url} key={link.id} rel="noopener noreferrer" target="_blank">{link.logoUrl ? <img alt="" src={link.logoUrl} width={48} height={48} /> : null}<strong>{link.name}</strong>{link.description ? <p>{link.description}</p> : null}</a>)}</div>
+        {model.links.length === 0 ? <Missing title="暂无友情链接" /> : null}
+      </section>
+    </Frame>
+  );
+}
+
+function renderTaxonomy(
+  model: Awaited<ReturnType<BlogThemeDataLoader['category']>>,
+  props: BlogThemeRouteProps,
+  kind: 'category' | 'tag',
+) {
+  if (model.kind === 'not-found') return renderMissing(model, props, kind, `${kind === 'category' ? '分类' : '标签'}不存在`);
+  return (
+    <Frame model={model.frame} seo={model.seo}>
+      <section><header className="theme-page-heading"><h1>{kind === 'tag' ? '# ' : ''}{model.taxonomy.name}</h1><p>共 {model.total} 篇文章</p></header>
+        <PostGrid posts={model.posts} />
+        <Pagination current={model.page} pageSize={model.pageSize} path={model.path} total={model.total} />
+      </section>
+    </Frame>
+  );
+}
+
+function PostGrid({ posts }: { readonly posts: readonly BlogPostSummary[] }) {
+  if (posts.length === 0) return <Missing title="这里还没有文章" />;
+  return <div className="theme-post-grid">{posts.map((post) => <article key={post.id}>{post.coverUrl ? <img alt="" src={post.coverUrl} /> : null}<RscLink href={`/blog/categories/${post.category.slug}`}>{post.category.name}</RscLink><h3><RscLink href={`/blog/posts/${post.slug}`}>{post.title}</RscLink></h3>{post.summary ? <p>{post.summary}</p> : null}<time dateTime={post.publishedAt}>{formatDate(post.publishedAt)}</time></article>)}</div>;
+}
+
+function Pagination({ current, pageSize, path, total }: { readonly current: number; readonly pageSize: number; readonly path: string; readonly total: number }) {
+  const pages = Math.max(1, Math.ceil(total / pageSize));
+  if (pages <= 1) return null;
+  const separator = path.includes('?') ? '&' : '?';
+  const visiblePages = [...new Set([1, ...Array.from({ length: 5 }, (_, index) => current + index - 2), pages])].filter((page) => page >= 1 && page <= pages);
+  return <nav className="theme-pagination" aria-label="分页">{current > 1 ? <RscLink href={`${path}${separator}page=${current - 1}`}>上一页</RscLink> : null}{visiblePages.map((page, index) => <span key={page}>{index > 0 && page - visiblePages[index - 1]! > 1 ? <span aria-hidden="true">… </span> : null}<RscLink aria-current={current === page ? 'page' : undefined} href={`${path}${separator}page=${page}`}>{page}</RscLink></span>)}{current < pages ? <RscLink href={`${path}${separator}page=${current + 1}`}>下一页</RscLink> : null}</nav>;
+}
+
+function Frame({ children, model, seo }: { readonly children: ReactNode; readonly model: BlogThemeFrameModel; readonly seo: ZlooksSeoModel }) {
+  return <><ZlooksSeo seo={seo} /><BlogFrame navigationPages={model.navigationPages} shell={model.shell} site={model.site}>{children}</BlogFrame></>;
+}
+
+function renderMissing(model: object, props: BlogThemeRouteProps, resource: 'post' | 'category' | 'tag', title: string) {
+  return hasFrameAndSeo(model)
+    ? <Frame model={model.frame} seo={model.seo}><Missing title={title} /></Frame>
+    : <DeferredFrame props={props} resource={resource}><Missing title={title} /></DeferredFrame>;
+}
+
+function hasFrameAndSeo(value: object): value is { readonly frame: BlogThemeFrameModel; readonly seo: ZlooksSeoModel } {
+  return 'frame' in value && 'seo' in value;
+}
+
+async function DeferredFrame({ children, props, resource }: { readonly children: ReactNode; readonly props: BlogThemeRouteProps; readonly resource: 'post' | 'page' | 'category' | 'tag' }) {
+  const model = await data.notFound(props, resource);
+  return <Frame model={model.frame} seo={model.seo}>{children}</Frame>;
+}
+
+function Missing({ title }: { readonly title: string }) { return <p className="theme-empty">{title}</p>; }
+function formatDate(value: string) { return new Intl.DateTimeFormat('zh-CN', { dateStyle: 'medium', timeZone: 'Asia/Shanghai' }).format(new Date(value)); }
+function archivePath(filter: {
+  readonly year?: number;
+  readonly month?: number;
+  readonly startYear?: number;
+  readonly startMonth?: number;
+  readonly endYear?: number;
+  readonly endMonth?: number;
+}) {
+  const query = new URLSearchParams();
+  for (const [key, value] of Object.entries(filter)) if (value !== undefined) query.set(key, String(value));
+  return query.size ? `/blog/archives?${query}` : '/blog/archives';
+}