feat: 全面重构个人博客系统 - Dioxus 0.7 + SSG + 暗色模式 by travellerse · Pull Request #1 · travellerse/travellerse.github.io

travellerse · 2026-02-08T15:07:09Z

全面重构个人博客系统

概述

这是一次完整的 Dioxus 博客系统重构，涵盖编译系统、文章引擎、UI 组件、样式系统和部署流程等全方位优化。整个重构遵循 IKB Art Edition 设计系统，保留零圆角与 Klein Blue (#002FA7) 的设计基因。

核心改进

1. 编译系统与文章发现 (`build.rs`)

✅ 自动扫描 posts/ 目录，通过 include_str!() 编译时嵌入
✅ 消除手动注册文章的繁琐流程
✅ 支持增量编译，posts/ 变化自动触发重新构建

2. 博客文章引擎完全重构 (`src/blog.rs`)

✅ 中英文双模式阅读时间计算（CJK 300 字/分钟 + Latin 200 词/分钟）
✅ TOC 提取与标题 ID 注入，支持文章目录导航
✅ 完整搜索索引系统，权重匹配（标题 10 分、标签 5 分、摘要 2 分）
✅ Syntect 语法高亮集成，支持 Rust、Python、JavaScript 等主流语言
✅ 迁移至 std::sync::LazyLock，移除 once_cell 依赖
✅ 11 个单元测试覆盖所有核心功能

3. 新增功能组件

✅ Seo 组件：Open Graph、Twitter Card、文章元数据自动注入
✅ SearchModal 组件：全屏搜索界面、全文搜索、实时过滤、ESC 关闭
✅ ThemeToggle 组件：暗亮色模式切换，localStorage 持久化
✅ 主题初始化策略：localStorage → prefers-color-scheme → 默认亮色

4. 样式系统与暗色模式

✅ 完整的 .dark 类选择器支持，页面可强制切换
✅ CSS 变量双主题（亮色/暗色）
✅ 代码块优化：新增语言标签栏、统一背景色、改进视觉层次
✅ Prose 排版完全重构，所有颜色映射 CSS 变量
✅ Tailwind CSS v4 配置优化，@custom-variant dark 支持

5. 全局路由与布局体系

✅ 404 页面移入 NavbarLayout，保留导航+页脚
✅ 全局 SEO 元数据注入
✅ 导航栏集成搜索与主题切换
✅ 移动端汉堡菜单支持

6. 所有视图页面重构

✅ 首页：全局 SEO 组件
✅ 文章页：TOC 侧边栏、SEO 元数据、上下篇导航
✅ 归档页：按年份分组、SEO 优化
✅ 标签页：动态 SEO、权重显示
✅ 404 页面：优雅降级，保留导航

7. CI/CD 与部署

✅ GitHub Actions 完整重构：Node.js + pnpm + Rust 的完整工具链
✅ Tailwind CSS 编译集成
✅ 路径触发器优化：posts/、assets/、build.rs、package.json
✅ 缓存策略优化：registry + git + target 统一管理
✅ 自动生成 robots.txt

8. 代码质量

✅ Clippy 零警告（-D warnings）
✅ 从 once_cell::Lazy 迁移至 std::sync::LazyLock
✅ 所有 PartialEq derive 补充 Eq
✅ 语法高亮改为默认功能（非可选 feature）

技术栈

组件	版本	用途
Dioxus	0.7	前端框架
Tailwind CSS	4.1	样式框架
pulldown-cmark	0.12	Markdown 解析
syntect	5.2	语法高亮
gray_matter	0.2	YAML 前置元数据
chrono	0.4	日期处理
web-sys	0.3	浏览器 API

提交历史（10 个原子提交）

Commit	类型	描述
`d019dbe`	build	实现自动文章发现编译系统
`215be84`	refactor(blog)	完整重构文章引擎与缓存系统
`64c9201`	feat	新增 SEO、搜索和主题切换组件
`5d2ac70`	style	实现完整暗色模式与设计系统重构
`4fb769f`	refactor	配置统一与全局路由体系重构
`f114bee`	refactor(views)	全量視圖頁面重構
`e903bf5`	ci	完整重构 GitHub Actions 部署流程
`151e6b1`	chore	项目工程配置优化
`87e764f`	chore	Cargo 依赖锁定更新
`4a24ef2`	refactor	语法高亮改为默认功能并改进代码块样式

验证状态

✅ cargo check          — 编译通过
✅ cargo test          — 11/11 测试通过
✅ cargo clippy        — 零警告（-D warnings）
✅ pnpm build:css      — Tailwind 构建成功
✅ cargo check --target wasm32-unknown-unknown — WASM 编译通过

破坏性变更

⚠️ Breaking Change：

移除 syntax-highlighting feature，语法高亮改为默认功能
CI/CD 脚本中移除 --features syntax-highlighting

后续改进方向

相关 Issue：#refactor
关联分支：refactor/blog-comprehensive-redesign → dev

- 新建 build.rs 自动扫描 posts/ 目录 - 通过 include_str!() 在编译时嵌入 Markdown 文章 - 生成 posts_manifest.rs 消除手动注册需要 - 支持增量编译，posts/ 变化自动触发重新构建

- 使用 build.rs 生成的 posts_manifest 替代硬编码文章列表 - 实现中英文双模式阅读时间计算（CJK 300字/分钟 + Latin 200词/分钟） - 新增 TOC 提取与标题 ID 注入，支持文章目录导航 - 完整搜索索引系统，支持权重匹配（标题10分、标签5分、摘要2分） - 从 once_cell::Lazy 迁移到 std::sync::LazyLock - 新增 Post/PostSummary/SearchEntry/TocEntry/ArchiveYear 数据结构 - 完全重写 Markdown → HTML 转换管线，集成 syntect 语法高亮 - 新增 11 个单元测试覆盖阅读时间、标题转换、搜索、提取 TOC

- Seo 组件：注入 Open Graph、Twitter Card、文章元数据 - SearchModal 组件：全屏搜索界面，全文搜索、实时过滤、ESC 关闭 - SearchButton 组件：导航栏搜索入口 + Ctrl/Cmd+K 快捷键 - ThemeToggle 组件：暗亮色模式切换，localStorage 持久化 - 主题初始化策略：localStorage > prefers-color-scheme > 默认亮色 - 导出新组件模块，更新 components/mod.rs

- 添加 .dark 类选择器支持，支持页面强制暗色模式 - tokens.css 完整重写，CSS 变量支持亮色/暗色双主题 - 新增代码块样式变量（--code-bg、--code-text 等） - prose.css 重构：所有颜色替换为 CSS 变量，支持任务列表、脚注样式 - main.css 新增全局暗色模式支持、平滑滚动、.search-open 隐藏溢出 - tailwind.css v4 配置：@custom-variant dark 支持类选择器 - 新增 ikb-hover 过渡动画，同时过渡 border-color - 保留 IKB Art Edition 零圆角与 Klein Blue (#002FA7) 设计基因

- config.rs：统一导航标签为中文（Tags → 标签） - main.rs：路由改进，404 页面移入 NavbarLayout 保留导航+页脚 - main.rs：全局 SEO 元数据注入（og:site_name、og:type） - main.rs：Route 枚举补充文档注释 - Dioxus.toml：移除 style 配置避免 Tailwind 二次加载 - navbar.rs：集成 SearchButton 与 ThemeToggle - navbar.rs：支持移动端汉堡菜单 - navbar_layout.rs：全局搜索模态框集成，Ctrl/Cmd+K 快捷键 - markdown.rs：移除 Tailwind prose-* 修饰符（CSS 优先） - hero.rs 和 footer.rs：添加过期色彩过渡动画

- home.rs：添加全局 SEO 组件 - blog.rs：新增 TOC 侧边栏（sticky 布局，h2-h4 链接），SEO 元数据 - blog.rs：移除变量遮蔽，"返回博客" 导向归档页 - archives.rs：新增 SEO，移除不必要回链 - tag_index.rs：新增 SEO，清理导入 - tagpage.rs：新增动态 SEO，标签作为标题前缀 - page_not_found.rs：新增 SEO，移入光栅布局内保留导航

- 新增 Node.js 22 + pnpm 9 环境，支持 Tailwind CSS 编译 - 新增 pnpm install && pnpm build:css 构建步骤 - dx bundle 添加 --features syntax-highlighting 支持 - 路径触发器优化：新增 posts/、assets/、build.rs、package.json - Rust 编译缓存优化：registry + git + target 统一管理 - 自动擂成 robots.txt（含 sitemap 引用） - 改进构建输出日志验证 - 步骤可读性提升

- package.json：完善 pnpm 脚本（build:css、dev、build） - pnpm-lock.yaml：更新依赖锁定文件 - .gitignore：补充构建产物与缓存目录

- 移除 syntax-highlighting 可选 feature，syntect 改为默认依赖 - 删除 markdown_to_html 无高亮版本，简化条件编译 - 代码块新增标题栏，显示语言标签（大写，等宽字体） - 优化代码块容器样式，改进视觉层次与可读性 - 更新 CI/CD 和 npm 脚本，移除 --features 参数 - 保持 IKB 零圆角设计基因 Breaking Change: 不再支持无语法高亮构建

travellerse added 10 commits February 8, 2026 22:53

build: 实现自动文章发现编译系统

d019dbe

- 新建 build.rs 自动扫描 posts/ 目录 - 通过 include_str!() 在编译时嵌入 Markdown 文章 - 生成 posts_manifest.rs 消除手动注册需要 - 支持增量编译，posts/ 变化自动触发重新构建

chore: 项目工程配置优化

151e6b1

- package.json：完善 pnpm 脚本（build:css、dev、build） - pnpm-lock.yaml：更新依赖锁定文件 - .gitignore：补充构建产物与缓存目录

chore: Cargo 依赖锁定更新

87e764f

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: 全面重构个人博客系统 - Dioxus 0.7 + SSG + 暗色模式#1

feat: 全面重构个人博客系统 - Dioxus 0.7 + SSG + 暗色模式#1
travellerse wants to merge 10 commits intodevfrom
refactor/blog-comprehensive-redesign

travellerse commented Feb 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

travellerse commented Feb 8, 2026

全面重构个人博客系统

概述

核心改进

1. 编译系统与文章发现 (build.rs)

2. 博客文章引擎完全重构 (src/blog.rs)

3. 新增功能组件

4. 样式系统与暗色模式

5. 全局路由与布局体系

6. 所有视图页面重构

7. CI/CD 与部署

8. 代码质量

技术栈

提交历史（10 个原子提交）

验证状态

破坏性变更

后续改进方向

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

1. 编译系统与文章发现 (`build.rs`)

2. 博客文章引擎完全重构 (`src/blog.rs`)