feat(reader): PDF 改 pdf.js 渲染+斜体 bug 根治+评论假挂载修复+排版类

【T1 PDF 内置阅读重做】iframe 对 arXiv PDF 实测 ERR_ABORTED（浏览器 PDF
插件策略差异）→ pdfjs-dist 6.4.299 客户端 canvas 渲染：只在 /papers/
动态 import（worker ?url 打包，不进全站 bundle）；文档一次取回 + IO
懒渲染（rootMargin 400px）+ 页占位 aspect-ratio 防跳动 + 12s 首屏兜底 +
微信 UA 直接兜底；工具条页码/缩放/翻页/下载/arXiv/授权声明保留。红线：
PDF 由访客浏览器直取 arXiv（CORS * 实测），仓内零副本。真页实测：
13 页 canvas 全绘制、首屏墨迹像素非空、零 console 错误。

【T2 斜体排版 bug 真凶】global.css 的 `.prose-* p > em:only-child
{ display:block; text-align:center }` 图注样式按"斜体独占段"自动命中，
把所有正文独占段斜体变成块级居中。改：图注用显式 .fig-cap 驱动 + 补
em/i { display:inline; font-style:italic } 基线；media-sample 迁移新写法，
指南注明旧写法失效原因。实测独占段与行内斜体均 display:inline/italic。

【T3 评论"假挂载"真 bug】原 initArtalk 一进来就置 mounted=true——脚本
404/被拦截时把空容器误标已挂载，5s 兜底被绕过，正是"评论区一直空着"的
来源之一。改为库就绪才算成功；另加三触发路径（IO 主 + 锚点点击 + 滚到
页底 2s 兜底）、5s 失败提示+重试钮、软导航重挂、成功打
data-artalk-mounted=1 供 E2E。

【T4 文章排版类 + 安全白名单】11 个受限类（ink-1/2/3/muted/accent、
font-serif/kai/sans/mono、drop-cap、quote-line、fig-cap）全走 tokens 禁
任意 hex；新增 rehype-class-whitelist.ts：className 白名单 + 剥离 style
与 on*；实测注入用例只剩 class="ink-2"，style/onclick 全无。新坑入档：
markdown raw HTML 在 hast 是 type:'raw' 节点、白名单插件看不见 span，必须
先 rehype-raw 再过滤 → 插件链 [rehypeRaw, rehypeClassWhitelist,
rehypeLinkCards]。新依赖：pdfjs-dist、rehype-raw。

车道：op-artalk（T1 6/6、T2 2/2、T3 3/3、T4 6/6）；收编复验：build 46 页、
E2E 37/37、四专项 playwright 实测（PDF 13 canvas/斜体 inline/白名单净化/
评论 mounted 标记）

验证: node v26.13.0 + astro 7.4.4 构建 46 页 exit 0；E2E 37/37 PASS

Spec: none (阅读体验四件，车道级交付)

Co-authored-by: GLM-5.3

astro.config.mjs

@@ -4,6 +4,8 @@ import pagefind from 'astro-pagefind';
 import sitemap from '@astrojs/sitemap';
 import { execSync } from 'node:child_process';
 import rehypeLinkCards, { linkCardsReport } from './src/lib/rehype-link-cards';
+import rehypeClassWhitelist from './src/lib/rehype-class-whitelist';
+import rehypeRaw from 'rehype-raw';
 
 // 构建透明（T7）：commit/时间经 vite.define 注入，页脚与 /about 引用。
 // 四重回退：CI 环境变量优先（GITEA_ACTIONS/GITHUB_SHA）→ 本地 git → dev 占位。
@@ -21,7 +23,9 @@ export default defineConfig({
   integrations: [pagefind(), sitemap(), linkCardsReport()],
   markdown: {
     // 独立成段的裸链接 → OG 预览卡（构建期抓取，失败回落普通链接；见 src/lib/rehype-link-cards.ts）
-    rehypePlugins: [rehypeLinkCards],
+    // 顺序：rehypeRaw 先把 markdown 里的 raw HTML 解析成 hast element（否则白名单看不到 span），
+    // 再白名单净化（剥 style/on*/非白名单类），最后链接卡片（节点由插件自建，不经净化）
+    rehypePlugins: [rehypeRaw, rehypeClassWhitelist, rehypeLinkCards],
   },
   i18n: {
     defaultLocale: 'zh',

content/posts/fix3-test.md

@@ -0,0 +1,34 @@
+---
+title: "排版能力样例"
+pubDate: 2026-11-02
+category: tech
+tags: [test, hidden]
+# 排版/斜体/白名单测试样张（fix3 车道）：hidden 不列出，构建与 E2E 验证用
+draft: false
+---
+
+本篇验证三件事：斜体行内渲染、受限排版类白名单、图注类。
+
+## 斜体（应为行内，不换行不居中）
+
+这一句里有 *行内斜体强调* 夹在文字中间，它必须与正文同处一行。
+
+*这一整段是斜体独占段，它不该变成块级居中。*
+
+## 受限排版类（白名单）
+
+<span class="ink-muted">这一段是 ink-muted 灰字。</span>
+<span class="font-kai">这一段是霞鹜文楷字族。</span>
+<span class="font-mono">这一段是等宽字族 mono。</span>
+
+<p class="drop-cap">首字下沉段落：秋天的海面像一块被风抚平的铁皮，落日把它的边缘烧红了一圈。</p>
+
+<p class="quote-line">所谓暮色，就是光慢慢地承认自己要走。</p>
+
+## 白名单剔除（非法类与内联样式必须被剥离）
+
+<span class="evil-class ink-2" style="color:#ff0000" onclick="alert(1)">这一段同时带了非法类、内联颜色与 onclick，构建后应只剩 ink-2 且 style/onclick 消失。</span>
+
+## 图注（类驱动）
+
+<p class="fig-cap">这是显式图注样式（fig-cap），居中灰字。</p>

content/posts/media-sample.md

@@ -14,7 +14,7 @@ draft: false
 
 ![样例照片](./assets/media-sample/sample-photo.jpg)
 
-*图注写法：斜体单独成段，photos 目录样片副本（1600×2400 竖幅）。*
+<p class="fig-cap">图注新写法：fig-cap 类，photos 目录样片副本（1600×2400 竖幅）。</p>
 
 ## 视频（raw HTML，H.264 320×240，ffmpeg testsrc2 生成）
 

docs/写作指南.md

@@ -22,10 +22,11 @@ content/posts/
 
 ```markdown
 ![外滩夜景](./assets/my-post/bund.jpg)
-*图：外滩的傍晚*            ← 紧跟媒体的斜体独立段 = 图注（居中小字）
+<p class="fig-cap">图：外滩的傍晚</p>   ← 显式图注类（居中小字）
 ```
 
-- 图注可选；写法固定为 `*…*` 单独成段，紧跟图片
+- 图注可选；**必须用 `<p class="fig-cap">…</p>`**（2026-11-02 起）
+- ⚠️ 旧写法 `*斜体独立段*` 已不再自动当图注：此前它会把正文里所有独占成段的斜体都变成块级居中（用户实测的排版 bug），现在斜体恢复为正常行内强调
 - 压缩纪律：入仓前长边 ≤2400px（可跑 `python3 scripts/photos_ingest.py`，对 posts 资产同样有效的思路，图片请自行用同规格压缩）
 
 ## 视频 / 音频
@@ -83,6 +84,33 @@ https://astro.build/
 - **缓存**：结果存 `content/.link-cache.json`（入仓，保证构建确定性）；条目 30 天后自动重抓。想强制刷新某条——删掉该 URL 的条目即可
 - 缩略图取 `og:image`，无图不占位；图标取站点而非第三方 favicon 服务
 
+## 文章排版类（受限白名单）
+
+正文里可用 `<span class="…">` / `<p class="…">` 做**受限**排版。构建期有白名单过滤：**只放行下表类名，其它 class 与 `style`、`on*` 属性一律被剥离**（防注入 + 保护灰阶骨架）。
+
+| 类名 | 作用 |
+|---|---|
+| `ink-1` / `ink-2` / `ink-3` | 指定灰阶层（正文/次要/更淡） |
+| `ink-muted` | 最淡灰（注释感） |
+| `ink-accent` | 强调色（链接色，仅少量点缀） |
+| `font-serif` | 思源宋（书评正文族） |
+| `font-kai` | 霞鹜文楷（金句族） |
+| `font-sans` | 思源黑（UI/技术族） |
+| `font-mono` | 等宽族（标签/数值） |
+| `drop-cap` | 段落首字下沉（书评开篇） |
+| `quote-line` | 金句块（左侧竖线 + 文楷） |
+| `fig-cap` | 图注（居中小字） |
+
+```markdown
+<span class="ink-muted">次要说明</span>
+<span class="font-kai">金句可以换文楷</span>
+<p class="drop-cap">开篇段落，首字会下沉。</p>
+<p class="quote-line">所谓暮色，就是光慢慢地承认自己要走。</p>
+```
+
+- **颜色只能走上面这些类**（内部用 tokens，亮暗双态都可读）；写 `style="color:red"` 会被构建期剔除
+- 斜体就用普通 markdown `*斜体*`——行内强调，不会换行也不会居中
+
 ## 发布提醒
 
 - push main → webhook 自动构建发布（约 10 秒）

package.json

@@ -20,6 +20,8 @@
     "astro-pagefind": "^2.0.1",
     "exifr": "^7.1.3",
     "lxgw-wenkai-screen-webfont": "^1.7.0",
+    "pdfjs-dist": "^6.4.299",
+    "rehype-raw": "^7.0.0",
     "sharp": "^0.35.5"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -38,6 +38,12 @@ importers:
       lxgw-wenkai-screen-webfont:
         specifier: ^1.7.0
         version: 1.7.0
+      pdfjs-dist:
+        specifier: ^6.4.299
+        version: 6.4.299
+      rehype-raw:
+        specifier: ^7.0.0
+        version: 7.0.0
       sharp:
         specifier: ^0.35.5
         version: 0.35.5(@types/node@24.19.2)
@@ -427,6 +433,81 @@ packages:
   '@mdx-js/mdx@3.1.1':
     resolution: {integrity: sha512-f6ZO2ifpwAQIpzGWaBQT2TXxPv6z3RBzQKpVftEWN78Vl/YweF1uwussDx8ECAXVtr3Rs89fKyG9YlzUs9DyGQ==}
 
+  '@napi-rs/canvas-android-arm64@1.1.0':
+    resolution: {integrity: sha512-mKrSmRyhWK4q699Q1xthbZIZi7JBvLtsRNnOZAeFaLPOFT1yo8y82aRC2nNZbXTGJXU7fVDONgGQPr0vo3kerw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@napi-rs/canvas-darwin-arm64@1.1.0':
+    resolution: {integrity: sha512-iqwST4g0oH+x8VCpBIYh+MYokv/mVvkM+v9oJGB0d9A3P2qBh42ogJlVyWq9SpPCrAjS7tplMb1D3OIfxl+utw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@napi-rs/canvas-darwin-x64@1.1.0':
+    resolution: {integrity: sha512-jkeA8eVTxDum03LTvc32YJ28F6KB1U0gYwnWMfOAUQZvWWEh/kvONby4iWGJx3+Tw45UqMGMXjtw2GKNVZDhVg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@napi-rs/canvas-linux-arm-gnueabihf@1.1.0':
+    resolution: {integrity: sha512-Y4YkKG1ijoqkgUdTEEBNG4k+2BK5bR5jGL6S56YxCXYPwGfUd5nED8/74xyc7z+bpixPasCjSYoP3xYPOIGNxw==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@napi-rs/canvas-linux-arm64-gnu@1.1.0':
+    resolution: {integrity: sha512-dE/XthqYkiWcBVtKFlZbUXwAYfDuQGqDWixznipJNmevLGpprNnTVQZyftm1RZJudkIOn2EkzYZDMMETM08Row==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@napi-rs/canvas-linux-arm64-musl@1.1.0':
+    resolution: {integrity: sha512-DqZ/CMcHlhU56pPjv9AP0h3U7MFQ5LzC1HzMyRMotL+PFsJmZJA/ziApPYVyyz78DaVLhI8t3So3ztqtijbYpg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@napi-rs/canvas-linux-riscv64-gnu@1.1.0':
+    resolution: {integrity: sha512-kJ7m5n2VffxWXM5QGa5lfq8ZN4LdOJEoz3aAJAmIqYvKiZw1gRdXqpucnRXsF6D9nLYiiIlevaAtAclR7c5ilg==}
+    engines: {node: '>= 10'}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@napi-rs/canvas-linux-x64-gnu@1.1.0':
+    resolution: {integrity: sha512-uQ9JuJlRhQdHyttcMWOiwLkfIqkqaB0YFUVe835LUe12THt2b51HXkTItq0fxWT1jdhUPX2ylWZ1walkJyD6GQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@napi-rs/canvas-linux-x64-musl@1.1.0':
+    resolution: {integrity: sha512-has4CPPAkkCac/LZ13VAw5p+MJLdaKVoyrhumN/A7uJd6960xYkJNDZgUebyxiha82AFzXx6RV+QJg5qGG079g==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@napi-rs/canvas-win32-arm64-msvc@1.1.0':
+    resolution: {integrity: sha512-MJnktLKNijmXqdjTughHDZ9TDLZ9uUm2hvFXqaOqn0+w7lphXFnft6bpSgQAc9U1exc20UGIBlzGu9+kiCj9Ag==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@napi-rs/canvas-win32-x64-msvc@1.1.0':
+    resolution: {integrity: sha512-08575bFk7iiadxap4h+JxgGut9xDCHAGum6wh0eInN53zEMImkmEHi5MushX2FOmNO7qRNX7BPiDC5ZYBwHeEg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@napi-rs/canvas@1.1.0':
+    resolution: {integrity: sha512-k+ph/D8H9GS8ZZ48okvHrKeJynkqAA1kMUZRuzRWNlQUDHXngq7oRaWMZBdmSfd9ZhVy9bwNKei/7wMboI/uMg==}
+    engines: {node: '>= 10'}
+
   '@napi-rs/wasm-runtime@1.2.6':
     resolution: {integrity: sha512-mRyDmEw9/fCDXCGfL1sbgIw/GUK0PVxRW4YwgPN61F3LQ+fSyoBFarJVzgGyhF6kRzEQZ0FejDqm4WLXSeqQmw==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=23.5.0}
@@ -1369,6 +1450,10 @@ packages:
     resolution: {integrity: sha512-enSlaiat05iasnzmgNxRj8reFdj3puY2QpNgP1aPIaVfT6nn9ICuPoFlKHk8EN22HcwewshO+mN2DGbkCEOtqQ==}
     engines: {node: '>=14.0.0'}
 
+  pdfjs-dist@6.4.299:
+    resolution: {integrity: sha512-AVl138zALtfaAPvADulE0PZThbYzCBS79nL4pOSL/6Sm/4AH5A21BD9VHt97OlCuzJuCpmeZtAtkinisF4Vb1g==}
+    engines: {node: '>=22.13.0 || >=24'}
+
   piccolore@0.1.3:
     resolution: {integrity: sha512-o8bTeDWjE086iwKrROaDf31K0qC/BENdm15/uH9usSC/uZjJOKb2YGiVHfLY4GhwsERiPI1jmwI2XrA7ACOxVw==}
 
@@ -2166,6 +2251,54 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@napi-rs/canvas-android-arm64@1.1.0':
+    optional: true
+
+  '@napi-rs/canvas-darwin-arm64@1.1.0':
+    optional: true
+
+  '@napi-rs/canvas-darwin-x64@1.1.0':
+    optional: true
+
+  '@napi-rs/canvas-linux-arm-gnueabihf@1.1.0':
+    optional: true
+
+  '@napi-rs/canvas-linux-arm64-gnu@1.1.0':
+    optional: true
+
+  '@napi-rs/canvas-linux-arm64-musl@1.1.0':
+    optional: true
+
+  '@napi-rs/canvas-linux-riscv64-gnu@1.1.0':
+    optional: true
+
+  '@napi-rs/canvas-linux-x64-gnu@1.1.0':
+    optional: true
+
+  '@napi-rs/canvas-linux-x64-musl@1.1.0':
+    optional: true
+
+  '@napi-rs/canvas-win32-arm64-msvc@1.1.0':
+    optional: true
+
+  '@napi-rs/canvas-win32-x64-msvc@1.1.0':
+    optional: true
+
+  '@napi-rs/canvas@1.1.0':
+    optionalDependencies:
+      '@napi-rs/canvas-android-arm64': 1.1.0
+      '@napi-rs/canvas-darwin-arm64': 1.1.0
+      '@napi-rs/canvas-darwin-x64': 1.1.0
+      '@napi-rs/canvas-linux-arm-gnueabihf': 1.1.0
+      '@napi-rs/canvas-linux-arm64-gnu': 1.1.0
+      '@napi-rs/canvas-linux-arm64-musl': 1.1.0
+      '@napi-rs/canvas-linux-riscv64-gnu': 1.1.0
+      '@napi-rs/canvas-linux-x64-gnu': 1.1.0
+      '@napi-rs/canvas-linux-x64-musl': 1.1.0
+      '@napi-rs/canvas-win32-arm64-msvc': 1.1.0
+      '@napi-rs/canvas-win32-x64-msvc': 1.1.0
+    optional: true
+
   '@napi-rs/wasm-runtime@1.2.6(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)':
     dependencies:
       '@emnapi/core': 1.11.1
@@ -3457,6 +3590,10 @@ snapshots:
 
   path-expression-matcher@1.6.2: {}
 
+  pdfjs-dist@6.4.299:
+    optionalDependencies:
+      '@napi-rs/canvas': 1.1.0
+
   piccolore@0.1.3: {}
 
   picocolors@1.1.1: {}

src/components/ArtalkComments.astro

@@ -17,6 +17,10 @@ const locale = localeOf(Astro.url.pathname);
   {' '}{t('pv_viewed', locale)}
 </p>
 <div id="artalk-container" data-page-key={pageKey} data-page-title={pageTitle}></div>
+<p class="atk-load-hint" id="artalk-retry" hidden>
+  <span>评论区加载失败。</span>
+  <button type="button" class="atk-retry-btn" id="artalk-retry-btn">重试</button>
+</p>
 
 <!-- Artalk 主题接管：--at-color-* 全套映射到站点 tokens（值均为 var()，明暗随
      html[data-theme] 翻转 tokens 自动生效，一套规则双态成立）。
@@ -76,6 +80,26 @@ const locale = localeOf(Astro.url.pathname);
   #artalk-container .atk-content a:hover {
     text-decoration-color: var(--accent);
   }
+  .atk-load-hint {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    margin: var(--space-2) 0 0;
+    font-family: var(--font-mono);
+    font-size: 12px;
+    color: var(--ink-4);
+  }
+  .atk-retry-btn {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    color: var(--ink-2);
+    background: var(--bg-soft);
+    border: 1px solid var(--line);
+    border-radius: 6px;
+    padding: 2px 10px;
+    cursor: pointer;
+  }
+  .atk-retry-btn:hover { border-color: var(--accent); }
   .atk-pv-line {
     font-family: var(--font-mono);
     font-size: 12px;
@@ -107,9 +131,24 @@ const locale = localeOf(Astro.url.pathname);
   document.addEventListener('astro:page-load', () => void bumpPv());
   void bumpPv();
 
+  // ── 挂载健壮化（用户实测「总没加载出来」）──
+  // 触发路径三条：IO 进入视口（主）/ 点击评论区锚点（兜底）/ 滚到页底 2s 后（兜底）；
+  // 失败路径：脚本 5s 未 onload → 灰阶提示 + 重试钮；成功后容器打 data-artalk-mounted 供 E2E 断言。
   const el = document.getElementById('artalk-container');
   if (el) {
+    let mounting = false;
+    let mounted = false;
+    const retryEl = document.getElementById('artalk-retry');
+    const showRetry = (show: boolean) => { if (retryEl) retryEl.hidden = !show; };
+    const armTimeout = () => {
+      window.setTimeout(() => {
+        if (!mounted) showRetry(true);
+      }, 5000);
+    };
     const mount = () => {
+      if (mounting || mounted) return;
+      mounting = true;
+      armTimeout();
       if (document.getElementById('artalk-lib')) return initArtalk();
       // 官方部署文档要求 CSS 手动引入（JS 不自动注入）；此前缺失导致评论区自上线起跑在 UA 默认样式上
       const cssReady = new Promise<void>((done) => {
@@ -130,6 +169,15 @@ const locale = localeOf(Astro.url.pathname);
     };
     const initArtalk = () => {
       const lib = (window as unknown as { Artalk?: { init: (o: object) => void } }).Artalk;
+      // 只有库真正就绪才算挂载成功：否则脚本 404/被拦截时会把"空容器"误标成已挂载，
+      // 5s 兜底提示也被一并绕过（用户看到的正是"评论区一直空着"）
+      if (!lib) {
+        showRetry(true);
+        return;
+      }
+      mounted = true;
+      showRetry(false);
+      el.dataset.artalkMounted = '1';
       lib?.init({
         el: '#artalk-container',
         server: 'https://wait4x.online/artalk',
@@ -143,12 +191,48 @@ const locale = localeOf(Astro.url.pathname);
         pvAdd: false,
       });
     };
+    // 兜底 ①：点任意指向评论区的锚点（含页内 #评论 跳转）立即挂载
+    document.addEventListener('click', (e) => {
+      const t = e.target as HTMLElement;
+      if (!t.closest('a[href="#comments"], a[href="#artalk-container"], [data-artalk-jump]')) return;
+      mountNow();
+    });
+    // 兜底 ②：滚到页底 2s 仍未挂载 → 强制挂载（用户滚到底显然在找评论）
+    let bottomTimer = 0;
+    addEventListener('scroll', () => {
+      if (mounted || mounting) return;
+      const nearBottom = innerHeight + scrollY >= document.documentElement.scrollHeight - 200;
+      if (!nearBottom) return;
+      clearTimeout(bottomTimer);
+      bottomTimer = window.setTimeout(() => { if (!mounted) mountNow(); }, 2000);
+    }, { passive: true });
+    // 重试钮：重置脚本引用后重新挂载
+    document.getElementById('artalk-retry-btn')?.addEventListener('click', () => {
+      showRetry(false);
+      document.getElementById('artalk-lib')?.remove();
+      mounting = false;
+      mountNow();
+    });
+    // 软导航复核：换页后若容器在而从未挂载，重新按当前 DOM 接线
+    document.addEventListener('astro:page-load', () => {
+      const fresh = document.getElementById('artalk-container');
+      if (fresh && !fresh.dataset.artalkMounted) {
+        mounting = false;
+        mountNow();
+      }
+    });
+
     // 进入视口 ~200px 前挂载；无 IO 环境直接挂
     if ('IntersectionObserver' in window) {
       new IntersectionObserver(
-        (entries, obs) => { if (entries.some((e) => e.isIntersecting)) { obs.disconnect(); mount(); } },
+        (entries, obs) => { if (entries.some((e) => e.isIntersecting)) { obs.disconnect(); mountNow(); } },
         { rootMargin: '200px' }
       ).observe(el);
-    } else mount();
+    } else mountNow();
+
+    function mountNow() {
+      if (mounted) return;
+      mount();
+    }
   }
 </script>

src/lib/rehype-class-whitelist.ts

@@ -0,0 +1,50 @@
+/**
+ * rehype 排版类白名单：文章里允许用 `<span class="...">` / `<p class="fig-cap">` 做受限排版，
+ * 但**只放行白名单类名**，其余 class 一律剔除；同时剥离 style 与 on* 事件属性（纵深防御）。
+ *
+ * 为什么需要：Astro 默认不 sanitize markdown 里的 raw HTML——若直接放行 class，作者（或
+ * Sveltia 后台协作者）可写入任意类名/颜色破坏灰阶骨架，甚至借 style/on* 注入。
+ * 白名单与 global.css 的「受限排版类」段一一对应，加类时两处同改。
+ */
+
+const ALLOWED = new Set([
+  // 颜色（走 tokens，明暗双态可读）
+  'ink-1',
+  'ink-2',
+  'ink-3',
+  'ink-muted',
+  'ink-accent',
+  // 字族（与分轨排版共存的四个既有字族）
+  'font-serif',
+  'font-kai',
+  'font-sans',
+  'font-mono',
+  // 文学排版
+  'drop-cap',
+  'quote-line',
+  'fig-cap',
+]);
+
+export default function rehypeClassWhitelist() {
+  return (tree: any) => {
+    const walk = (node: any) => {
+      if (node?.type === 'element') {
+        const props = node.properties ?? (node.properties = {});
+        // 剥离内联样式与事件属性：排版能力只经白名单类提供
+        delete props.style;
+        for (const key of Object.keys(props)) {
+          if (/^on/i.test(key)) delete props[key];
+        }
+        const raw = props.className;
+        if (raw !== undefined) {
+          const list = Array.isArray(raw) ? raw : String(raw).split(/\s+/);
+          const kept = list.map((c: string) => String(c).trim()).filter((c: string) => ALLOWED.has(c));
+          if (kept.length > 0) props.className = kept;
+          else delete props.className;
+        }
+      }
+      for (const child of node?.children ?? []) walk(child);
+    };
+    walk(tree);
+  };
+}

src/pages/papers/_PaperView.astro

@@ -1,9 +1,11 @@
 ---
 // 论文内置阅读视图（非路由共享件，_ 前缀不成页）：双语薄壳 papers/agensh.astro 与
-// en/papers/agensh.astro 共用。许可证红线：arXiv nonexclusive-dist 1.0 禁止第三方
-// 再分发——PDF 只经 iframe 指向 arXiv 原站，仓内不存任何 PDF 副本。
-// 微信内置浏览器内嵌 PDF 基本不可用：UA 检测在 head 前置（无闪烁），微信下不发起
-// iframe 请求，直接呈现兜底卡（含"右上角用浏览器打开"指引）。
+// en/papers/agensh.astro 共用。
+// 许可证红线：arXiv nonexclusive-dist 1.0 禁止第三方再分发——PDF 只由**访客浏览器直取
+// arXiv**（响应带 access-control-allow-origin: *），仓内不存任何 PDF 副本。
+// 渲染改用 pdf.js canvas 逐页画（iframe 方案实测 arXiv PDF 请求被浏览器 PDF 插件策略
+// ERR_ABORTED，无法内嵌全文）；pdfjs 只在 /papers/ 页动态 import，不进全站 bundle。
+// 微信内置浏览器：不发起 PDF 请求，直接兜底卡（含"右上角用浏览器打开"指引）。
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { t } from '../../i18n/ui';
 import type { Locale } from '../../lib/locale';
@@ -57,17 +59,26 @@ const p = PAPERS[paper];
       </a>
     </header>
 
-    <!-- iframe 无初始 src：脚本确认非微信后才挂载，微信内不产生无用请求 -->
-    <div class="paper-stage">
-      <iframe
-        id="paper-frame"
-        class="paper-frame"
-        data-src={p.pdf}
-        title={p.alt[locale]}
-        allow="fullscreen"
-      ></iframe>
+    <!-- 阅读工具条：页码 / 上一下一页 / 缩放 -->
+    <div class="paper-toolbar" id="paper-toolbar" hidden>
+      <span class="pt-page" id="paper-page-label">{t('paper_page_label', locale)} – / –</span>
+      <span class="pt-group">
+        <button type="button" class="pt-btn" id="paper-prev" aria-label={t('paper_prev_page', locale)}>‹</button>
+        <button type="button" class="pt-btn" id="paper-next" aria-label={t('paper_next_page', locale)}>›</button>
+      </span>
+      <span class="pt-group">
+        <button type="button" class="pt-btn" id="paper-zoom-out" aria-label={t('paper_zoom_out', locale)}>−</button>
+        <span class="pt-zoom" id="paper-zoom-label">100%</span>
+        <button type="button" class="pt-btn" id="paper-zoom-in" aria-label={t('paper_zoom_in', locale)}>+</button>
+      </span>
+      <span class="pt-status" id="paper-status">{t('paper_loading', locale)}</span>
+    </div>
 
-      <!-- 兜底卡：微信 UA（JS 加 is-wechat）或 iframe 加载超时后显形 -->
+    <div class="paper-stage" id="paper-stage">
+      <!-- canvas 逐页容器（pdf.js 渲染；脚本按页懒创建 canvas） -->
+      <div class="paper-canvas-wrap" id="paper-canvas-wrap" data-pdf={p.pdf} role="document" aria-label={p.alt[locale]}></div>
+
+      <!-- 兜底卡：微信 UA / 加载失败或超时 / 无 JS 时显形 -->
       <div class="paper-fallback" id="paper-fallback" hidden>
         <p class="paper-fallback-title">{t('paper_fallback_title', locale)}</p>
         <p class="paper-fallback-hint" data-wechat-only hidden>{t('paper_wechat_hint', locale)}</p>
@@ -88,34 +99,156 @@ const p = PAPERS[paper];
   </article>
 </BaseLayout>
 
-<script is:inline data-astro-rerun>
-  // data-astro-rerun：ClientRouter 软导航后内联脚本默认不重跑，不加则从别的页面切进
-  // 本页时 iframe 永不挂载（ThemeScript 同款坑，2026-10-25 已记录）
-  (function () {
-    var frame = document.getElementById('paper-frame');
-    if (!frame) return;
-    var fallback = document.getElementById('paper-fallback');
-    var wechat = /MicroMessenger/i.test(navigator.userAgent);
-    document.documentElement.classList.toggle('is-wechat', wechat);
+<script>
+  // pdf.js 客户端渲染：文档一次取回，页面 canvas 按 IntersectionObserver 懒渲染（长文不爆内存）。
+  // 软导航换页后按当前 DOM 重新接线（astro:page-load）；任何失败一律显兜底卡，不阻塞阅读。
+  const boot = async () => {
+    if (!/^\/(?:en\/)?papers\/[^/]+\/?$/.test(location.pathname)) return;
+    const wrap = document.getElementById('paper-canvas-wrap') as HTMLElement | null;
+    const toolbar = document.getElementById('paper-toolbar') as HTMLElement | null;
+    const fallback = document.getElementById('paper-fallback') as HTMLElement | null;
+    const statusEl = document.getElementById('paper-status') as HTMLElement | null;
+    const pageLabel = document.getElementById('paper-page-label') as HTMLElement | null;
+    const zoomLabel = document.getElementById('paper-zoom-label') as HTMLElement | null;
+    if (!wrap || !fallback || wrap.dataset.paperBooted === '1') return;
+    wrap.dataset.paperBooted = '1';
 
-    function showFallback(withWechatHint) {
-      if (!fallback) return;
+    const showFallback = (wechat = false) => {
       fallback.hidden = false;
-      var hint = fallback.querySelector('[data-wechat-only]');
-      if (hint) hint.hidden = !withWechatHint;
-    }
+      document.documentElement.classList.toggle('is-wechat', wechat);
+      const hint = fallback.querySelector('[data-wechat-only]') as HTMLElement | null;
+      if (hint) hint.hidden = !wechat;
+    };
+    const setStatus = (text: string) => {
+      if (!statusEl) return;
+      statusEl.textContent = text;
+      statusEl.hidden = text === '';
+    };
 
-    if (wechat) {
-      // 微信 webview 内嵌 PDF 基本不可用：不挂载 iframe，直接兜底 + 浏览器指引
+    // 微信内置浏览器：不发起 PDF 请求（渲染必然不可用，白等带宽）
+    if (/MicroMessenger/i.test(navigator.userAgent)) {
       showFallback(true);
       return;
     }
-    var settled = false;
-    frame.addEventListener('load', function () { settled = true; });
-    frame.src = frame.dataset.src;
-    // arXiv 现无 X-Frame-Options（实测 2026-11-01），超时兜底只作弱网/拦截保险
-    setTimeout(function () { if (!settled) showFallback(false); }, 9000);
-  })();
+
+    let doc: any = null;
+    let zoom = 1;
+    const pageEls: { el: HTMLDivElement; canvas: HTMLCanvasElement; page: number; rendered: boolean; ratio: number }[] = [];
+    let io: IntersectionObserver | null = null;
+    let renderedAny = false;
+
+    const fail = (err: unknown) => {
+      console.warn('[paper] 渲染失败，回落兜底卡', err);
+      showFallback(false);
+    };
+    // 12s 内连第一页都没画出来就兜底（弱网/被拦截）
+    const guard = window.setTimeout(() => { if (!renderedAny) showFallback(false); }, 12000);
+
+    try {
+      const pdfjs: any = await import('pdfjs-dist');
+      const workerUrl = (await import('pdfjs-dist/build/pdf.worker.min.mjs?url')).default;
+      pdfjs.GlobalWorkerOptions.workerSrc = workerUrl;
+      doc = await pdfjs.getDocument({ url: wrap.dataset.pdf }).promise;
+      window.clearTimeout(guard);
+      setStatus('');
+      if (toolbar) toolbar.hidden = false;
+
+      // 先建全部页占位（页高按第一页比例估算，避免滚动跳动），IO 到达再真正 render
+      const first = await doc.getPage(1);
+      const baseVp = first.getViewport({ scale: 1 });
+      const wrapWidth = wrap.clientWidth || 720;
+      const renderScale = () => (wrapWidth / baseVp.width) * zoom * (window.devicePixelRatio || 1);
+
+      for (let n = 1; n <= doc.numPages; n++) {
+        const el = document.createElement('div');
+        el.className = 'paper-page';
+        el.dataset.page = String(n);
+        const canvas = document.createElement('canvas');
+        el.appendChild(canvas);
+        wrap.appendChild(el);
+        pageEls.push({ el, canvas, page: n, rendered: false, ratio: baseVp.height / baseVp.width });
+        el.style.aspectRatio = `${baseVp.width} / ${baseVp.height}`;
+      }
+
+      const renderPage = async (entry: (typeof pageEls)[number]) => {
+        if (entry.rendered) return;
+        entry.rendered = true;
+        const page = await doc.getPage(entry.page);
+        const vp = page.getViewport({ scale: renderScale() });
+        const c = entry.canvas;
+        c.width = vp.width;
+        c.height = vp.height;
+        c.style.width = '100%';
+        c.style.height = 'auto';
+        await page.render({ canvasContext: c.getContext('2d')!, viewport: vp, canvas: c }).promise;
+        entry.el.style.aspectRatio = '';
+        if (!renderedAny) {
+          renderedAny = true;
+          setStatus('');
+        }
+      };
+
+      io = new IntersectionObserver(
+        (entries) => {
+          for (const e of entries) {
+            if (!e.isIntersecting) continue;
+            const entry = pageEls.find((p) => p.el === e.target);
+            if (entry) void renderPage(entry);
+          }
+        },
+        { rootMargin: '400px 0px' },
+      );
+      pageEls.forEach((p) => io!.observe(p.el));
+
+      // 页码跟随滚动（页中点越过视口 40% 即视为当前页）
+      const currentPage = () => {
+        const mid = window.scrollY + window.innerHeight * 0.4;
+        for (const p of pageEls) {
+          if (p.el.getBoundingClientRect().bottom + window.scrollY > mid) return p.page;
+        }
+        return pageEls.length;
+      };
+      const label = () => {
+        if (pageLabel) pageLabel.textContent = `${currentPage()} / ${doc.numPages}`;
+      };
+      addEventListener('scroll', label, { passive: true });
+      label();
+
+      const gotoPage = (n: number) => {
+        const target = pageEls[Math.max(0, Math.min(pageEls.length - 1, n - 1))];
+        target?.el.scrollIntoView({ block: 'start', behavior: 'smooth' });
+      };
+      document.getElementById('paper-prev')?.addEventListener('click', () => gotoPage(currentPage() - 1));
+      document.getElementById('paper-next')?.addEventListener('click', () => gotoPage(currentPage() + 1));
+
+      const rerenderVisible = async () => {
+        if (zoomLabel) zoomLabel.textContent = `${Math.round(zoom * 100)}%`;
+        // 仅重绘当前视口内的页（其余等 IO 重新触发）
+        for (const p of pageEls) {
+          const r = p.el.getBoundingClientRect();
+          if (r.bottom > -200 && r.top < window.innerHeight + 200) {
+            p.rendered = false;
+            await renderPage(p);
+          } else {
+            p.rendered = false;
+          }
+        }
+      };
+      document.getElementById('paper-zoom-in')?.addEventListener('click', () => {
+        zoom = Math.min(2.5, zoom + 0.25);
+        void rerenderVisible();
+      });
+      document.getElementById('paper-zoom-out')?.addEventListener('click', () => {
+        zoom = Math.max(0.6, zoom - 0.25);
+        void rerenderVisible();
+      });
+    } catch (err) {
+      window.clearTimeout(guard);
+      fail(err);
+    }
+  };
+
+  document.addEventListener('astro:page-load', () => void boot());
 </script>
 
 <style>
@@ -161,19 +294,62 @@ const p = PAPERS[paper];
     white-space: nowrap;
   }
   .paper-download:hover { border-color: var(--accent); color: var(--accent); }
+
+  /* 工具条：灰阶克制，mono 小字 */
+  .paper-toolbar {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-2) 0;
+    border-bottom: 1px solid var(--line);
+    font-family: var(--font-mono);
+    font-size: 12px;
+    color: var(--ink-3);
+    flex-wrap: wrap;
+  }
+  .paper-toolbar[hidden] { display: none; }
+  .pt-group { display: inline-flex; align-items: center; gap: 6px; }
+  .pt-btn {
+    font-family: var(--font-mono);
+    font-size: 14px;
+    line-height: 1;
+    width: 30px;
+    height: 30px;
+    border-radius: 8px;
+    border: 1px solid var(--line);
+    background: var(--bg-soft);
+    color: var(--ink-1);
+    cursor: pointer;
+  }
+  .pt-btn:hover { border-color: var(--accent); }
+  .pt-page { color: var(--ink-2); }
+  .pt-zoom { min-width: 3.2em; text-align: center; color: var(--ink-2); }
+  .pt-status { color: var(--ink-4); }
+
   .paper-stage {
     position: relative;
     flex: 1;
     min-height: 0;
   }
-  .paper-frame {
-    width: 100%;
+  /* canvas 页容器：纵向滚动，页间留缝，纸色底 */
+  .paper-canvas-wrap {
     height: 100%;
-    border: 0;
-    background: var(--surface-2, #f4f4f2);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding: var(--space-3) 0;
+    background: var(--bg-soft);
   }
-  /* 微信内不挂 iframe，避免空白框占位 */
-  :global(html.is-wechat) .paper-frame { display: none; }
+  .paper-canvas-wrap:empty { min-height: 12rem; }
+  .paper-page {
+    width: min(100%, calc(var(--measure) + 80px));
+    margin: 0 auto var(--space-3);
+    background: var(--bg);
+    border: 1px solid var(--line);
+    border-radius: 6px;
+    overflow: hidden;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  }
+  .paper-page canvas { display: block; width: 100%; }
   .paper-fallback {
     position: absolute;
     inset: 0;
@@ -184,9 +360,9 @@ const p = PAPERS[paper];
     gap: var(--space-2);
     text-align: center;
     padding: var(--space-3);
-    background: var(--surface-2, #f4f4f2);
+    background: var(--bg-soft);
     border: 1px dashed var(--line);
-    border-radius: var(--radius, 8px);
+    border-radius: 8px;
   }
   .paper-fallback[hidden] { display: none; }
   .paper-fallback-title { font-weight: 600; margin: 0; }

src/styles/global.css

@@ -146,8 +146,10 @@ pre code { background: none; border: none; padding: 0; font-size: inherit; }
   max-width: 100%;
   height: auto;
 }
-/* 图注约定：紧跟媒体的 *斜体独立段* 视为图注（写作指南 docs/写作指南.md） */
-.prose-reading p > em:only-child, .prose-tech p > em:only-child {
+/* 图注：**显式类驱动**（`<p class="fig-cap">说明</p>`）。此前按 `p > em:only-child` 自动命中，
+   把正文里任何独占成段的斜体都变成块级居中——用户实测的排版 bug（斜体单独一行并居中）由此而来。 */
+.prose-reading p.fig-cap, .prose-tech p.fig-cap,
+.prose-reading p.fig-cap em, .prose-tech p.fig-cap em {
   display: block;
   text-align: center;
   font-size: 0.85em;
@@ -155,7 +157,44 @@ pre code { background: none; border: none; padding: 0; font-size: inherit; }
   color: var(--ink-3);
   margin-top: -0.6em;
   margin-bottom: 1.2em;
+  font-style: normal;
 }
+/* 行内斜体基线：不换行、不居中（正常强调语义） */
+.prose-reading em, .prose-tech em,
+.prose-reading i, .prose-tech i {
+  display: inline;
+  font-style: italic;
+}
+/* ── 受限排版类（文章内通过 <span class> 使用；rehype 白名单只放行这些类名） ──
+   颜色一律走 tokens，亮暗双态都可读；禁任意 hex/内联样式（保持灰阶骨架）。 */
+.prose-reading .ink-1, .prose-tech .ink-1 { color: var(--ink-1); }
+.prose-reading .ink-2, .prose-tech .ink-2 { color: var(--ink-2); }
+.prose-reading .ink-3, .prose-tech .ink-3 { color: var(--ink-3); }
+.prose-reading .ink-muted, .prose-tech .ink-muted { color: var(--ink-4); }
+.prose-reading .ink-accent, .prose-tech .ink-accent { color: var(--accent); }
+.prose-reading .font-serif, .prose-tech .font-serif { font-family: var(--font-serif); }
+.prose-reading .font-kai, .prose-tech .font-kai { font-family: var(--font-kai); }
+.prose-reading .font-sans, .prose-tech .font-sans { font-family: var(--font-sans); }
+.prose-reading .font-mono, .prose-tech .font-mono { font-family: var(--font-mono); font-size: 0.92em; }
+/* 文学常用：首字下沉（书评开篇）与金句块（引文式的独立强调段） */
+.prose-reading p.drop-cap::first-letter, .prose-tech p.drop-cap::first-letter {
+  float: left;
+  font-family: var(--font-serif);
+  font-size: 3.1em;
+  line-height: 1;
+  padding-right: 0.08em;
+  margin-top: 0.05em;
+  color: var(--paper-ink);
+}
+.prose-reading .quote-line, .prose-tech .quote-line {
+  display: block;
+  font-family: var(--font-kai);
+  color: var(--paper-ink);
+  border-left: 2px solid var(--paper-line);
+  padding-left: 0.9em;
+  margin: 1.4em 0;
+}
+
 /* 视频与音频：原生标签，markdown raw HTML 直书（指南有模板） */
 .prose-reading video, .prose-tech video,
 .prose-reading audio, .prose-tech audio {

tests/e2e.mjs

@@ -91,9 +91,21 @@ ok('en 页 canonical 自指', !!enCanon && new URL(enCanon).pathname === new URL
 
 // ---------- 折叠批：首页限 6 篇 / 归档年折叠 / 书架年折叠 ----------
 await page.goto(BASE + '/', { waitUntil: 'networkidle' });
-const homeRows = await page.$$eval('.post-list .row', (as) => as.length);
-const homeMore = await page.locator('.more-row a[href="/archives/"]').count();
-ok('首页 ≤6 篇 + 全部文章入口', homeRows > 0 && homeRows <= 6 && homeMore === 1, `条数=${homeRows} 入口=${homeMore}`);
+const homeTracks = await page.evaluate(() =>
+  [...document.querySelectorAll('.track-sec')].map((sec) => ({
+    label: sec.getAttribute('aria-label'),
+    rows: sec.querySelectorAll('.row.tap').length,
+    more: sec.querySelectorAll('.more-link').length,
+  })),
+);
+ok(
+  '首页分轨 阅读/技术 各 ≤6 + 各自更多入口',
+  homeTracks.length === 2 &&
+    homeTracks.every((t) => t.rows > 0 && t.rows <= 6 && t.more === 1) &&
+    homeTracks[0].label === '阅读' &&
+    homeTracks[1].label === '技术',
+  JSON.stringify(homeTracks),
+);
 
 await page.goto(BASE + '/archives/', { waitUntil: 'networkidle' });
 const arch = await page.evaluate(() => {