承接前两轮修复:路由重跑(79978aa)、正文更新(f86cb48)后,翻页时文章正文
正确切换了,但可运行代码块(CodeRunner)消失——容器 div 还在,CodeMirror
编辑器没挂载。
根因:上下篇切换(/post/rust → /post/go)时 PostContent 组件被复用(仅重渲染,
非重新挂载)。其内部 CodeRunner 用片段索引作 key(runner-{i}),而两篇文章的
代码块索引恰好相同(都是 1/3/5),keyed diff 按相同 key 复用 CodeRunner 实例。
复用的实例保留 use_hook/use_effect 状态:挂载 use_effect 的「防重复 init」守卫
(editor_handle.is_some())阻止 CodeMirror 挂载到新的(已替换的)DOM 容器,
而旧 CodeMirror 还绑定在被销毁的 rust DOM 上。同时 PostContent 自身的 use_effect
(__initPostContent 复制按钮 / 灯箱初始化)也不重跑,新文章交互脚本不初始化。
曾尝试直接给 PostContent 加 key=post.slug,无效:Dioxus 的 key diff
(diff_keyed_children)只在「兄弟节点列表」里生效,对单个非列表元素的 key
变化走 diff_non_keyed 路径、按位置复用,不触发 remount(经 use_hook 探针确认:
翻页后 CodeRunner 函数体执行了但 use_hook 从未重新执行)。
修复:把 PostContent 包进单元素 keyed 列表(for + iter::once + key=slug),
使其进入 keyed diff 路径——slug 变化时旧实例移除、新实例创建,连带 CodeRunner
重新挂载、交互脚本重新初始化。
验证(headless chromium,rust↔go 各含3个代码块):
- 修复前:翻页后容器在、CodeMirror 挂载数=0(红灯)
- 修复后:CodeMirror 挂载数=3,骨架屏清零;prev/next 双向 + SSR 首屏均正常
Yggdrasil
基于 Dioxus 0.7 的全栈博客系统,Rust 单一代码库同时编译为 WASM 前端和原生服务端。
技术栈
- 框架: Dioxus 0.7 (fullstack)
- 数据库: PostgreSQL + tokio-postgres
- 样式: Tailwind CSS v4
- 密码: Argon2
- 会话: UUID token + cookie
功能
- 邮箱注册 / 登录(单管理员模式,首次注册后关闭)
- 会话管理与自动过期清理
- 暗色 / 亮色主题切换
- 后台文章撰写(Tiptap Markdown 编辑器)
- 文章归档与标签浏览
开发
依赖 Rust 1.95+、wasm32 目标、dx CLI、tailwindcss CLI v4 和 PostgreSQL。
# 配置数据库
DATABASE_URL=postgres://postgres:postgres@localhost:5432/yggdrasil
# 运行迁移(自动创建数据库并按顺序执行 migrations/ 下所有 SQL)
./migrate.sh
# 启动开发服务器
make dev
构建
make build
生产部署
生产环境必须前置反向代理(nginx/Caddy)做 TLS 终结,并设置 APP_BASE_URL、
COOKIE_SECURE=true、TRUSTED_PROXY_COUNT=1。详见 部署指南。
Description
Languages
Rust
77.7%
TypeScript
17%
CSS
3.2%
Dockerfile
0.9%
Makefile
0.6%
Other
0.6%