|
1 | | -# 流程图 |
| 1 | +# 核心逻辑实现 |
2 | 2 |
|
3 | | -```mermaid |
4 | | -graph TD |
5 | | - A[页面加载] --> B{初始化} |
6 | | - B --> B1[初始化PJAX] |
7 | | - B --> B2[初始化翻译系统] |
8 | | - B --> B3[初始化深色模式] |
9 | | - B --> B4[初始化目录生成] |
10 | | - B --> B5[自定义PJAX事件监听] |
11 | | - A --> C[加载Markdown内容] |
12 | | - C --> D{解析Markdown} |
13 | | - D --> E[生成HTML内容] |
14 | | - E --> F[处理链接路径] |
15 | | - F --> G[插入DOM] |
16 | | - G --> H[启动加载动画] |
17 | | - H --> I[等待动画完成] |
18 | | - I --> J[更新页面状态] |
19 | | - J --> K[错误处理] |
20 | | - K -->|成功| J |
21 | | - K -->|失败| L[显示错误信息] |
22 | | - A --> M[用户交互] |
23 | | - M --> N{点击链接} |
24 | | - N --> O[触发PJAX请求] |
25 | | - O --> C |
26 | | -``` |
| 3 | +## 功能模块说明 |
27 | 4 |
|
28 | 5 | ```mermaid |
29 | 6 | classDiagram |
30 | | - class MarkdownRenderer{ |
31 | | - +string mdPath |
32 | | - +fetchMD() |
33 | | - +parseContent() |
34 | | - +generateOutline() |
35 | | - +updateDOM() |
| 7 | + class ContentLoader { |
| 8 | + +showMarkdown(mdPath, response) |
| 9 | + +getMarkdown() |
| 10 | + +handleError() |
| 11 | + +updateContent() |
36 | 12 | } |
37 | | - class PJAXHandler{ |
38 | | - +handleNavigation() |
39 | | - +animateTransition() |
| 13 | + class NavigationHandler { |
| 14 | + +initPJAX() |
| 15 | + +initCustomPJAXResponse() |
| 16 | + +initCustomPJAXEventListener() |
| 17 | + +customPushState() |
40 | 18 | } |
41 | | - class DarkMode{ |
42 | | - +toggleMode() |
| 19 | + class TranslationSystem { |
| 20 | + +initTranslate() |
| 21 | + +refreshTranslate() |
| 22 | + +infoTranslate() |
43 | 23 | } |
44 | | - class Translator{ |
45 | | - +translateContent() |
46 | | - +detectLanguage() |
| 24 | + class UIStateManager { |
| 25 | + +loadingState 计数器 |
| 26 | + +startLoad() |
| 27 | + +endLoad() |
| 28 | + +initDarkmode() |
47 | 29 | } |
48 | | - MarkdownRenderer --> PJAXHandler: 使用 |
49 | | - MarkdownRenderer --> DarkMode: 集成 |
50 | | - MarkdownRenderer --> Translator: 集成 |
| 30 | + class PathProcessor { |
| 31 | + +decodeMDPath() |
| 32 | + +formatMDPath() |
| 33 | + +getDirectory() |
| 34 | + +isRelativePath() |
| 35 | + } |
| 36 | + |
| 37 | + ContentLoader --> NavigationHandler : 使用PJAX导航 |
| 38 | + ContentLoader --> PathProcessor : 路径处理 |
| 39 | + ContentLoader --> TranslationSystem : 内容翻译 |
| 40 | + NavigationHandler --> ContentLoader : 触发加载 |
| 41 | + UIStateManager --> ContentLoader : 加载状态控制 |
| 42 | +``` |
| 43 | + |
| 44 | +## 核心流程 |
| 45 | + |
| 46 | +```mermaid |
| 47 | +sequenceDiagram |
| 48 | + participant 用户 |
| 49 | + participant 浏览器 |
| 50 | + participant ContentLoader |
| 51 | + participant NavigationHandler |
| 52 | + |
| 53 | + 用户->>浏览器: 访问页面 |
| 54 | + 浏览器->>ContentLoader: DOMContentLoaded |
| 55 | + ContentLoader->>PathProcessor: decodeMDPath(URL) |
| 56 | + alt 路径有效 |
| 57 | + ContentLoader->>ContentLoader: fetchMD(路径) |
| 58 | + ContentLoader->>ContentLoader: 解析 Markdown |
| 59 | + ContentLoader->>ContentLoader: 处理内部链接转换 |
| 60 | + ContentLoader->>UIStateManager: startLoad() |
| 61 | + ContentLoader->>DOM: updateContent() |
| 62 | + ContentLoader->>TranslationSystem: 触发翻译 |
| 63 | + ContentLoader->>UIStateManager: endLoad() |
| 64 | + else 路径无效 |
| 65 | + ContentLoader->>PathProcessor: 尝试默认文件(index.md/README.md) |
| 66 | + ContentLoader->>UIStateManager: handleError() |
| 67 | + end |
| 68 | + |
| 69 | + 用户->>NavigationHandler: 点击 .md 链接 |
| 70 | + NavigationHandler->>ContentLoader: 触发新内容加载 |
51 | 71 | ``` |
52 | 72 |
|
53 | | -## 核心流程说明 |
| 73 | +## 关键逻辑说明 |
| 74 | + |
| 75 | +### 1. 内容加载流程 (`showMarkdown`) |
| 76 | + |
| 77 | +- **路径解析**：通过 `decodeMDPath()` 解析URL参数 |
| 78 | +- **文件获取**：优先尝试 `index.md`，失败后回退 `README.md` |
| 79 | +- **链接转换**：将文档内 `.md` 相对路径转换为绝对路径 |
| 80 | +- **DOM更新**：使用 `updateContent()` 注入生成的HTML |
| 81 | +- **加载状态**：通过 `loadingState` 计数器管理进度条动画 |
| 82 | + |
| 83 | +### 2. PJAX导航系统 |
| 84 | + |
| 85 | +- **初始化**：`initPJAX()` 配置选择器和切换规则 |
| 86 | +- **自定义处理**：覆写`handleResponse` 实现 Markdown 渲染 |
| 87 | +- **事件委托**：拦截 .md 链接点击事件触发无刷新加载 |
| 88 | +- **状态管理**：`customPushState()` 维护浏览历史层级 |
| 89 | + |
| 90 | +### 3. 翻译系统集成 |
| 91 | + |
| 92 | +- **自动检测**：`setAutoDiscriminateLocalLanguage()` 设置语言 |
| 93 | +- **DOM注入**：`infoTranslate()` 插入语言切换提示条 |
| 94 | +- **动态刷新**：`refreshTranslate()` 处理动态内容翻译 |
| 95 | + |
| 96 | +### 4. 错误处理机制 |
| 97 | + |
| 98 | +- **分级捕获**：try/catch 块覆盖关键操作节点 |
| 99 | +- **友好提示**：`handleError()` 生成带操作按钮的错误界面 |
| 100 | +- **状态恢复**：错误后自动回退到可用导航状态 |
| 101 | + |
| 102 | +### 5. 动画与状态同步 |
54 | 103 |
|
55 | | -1. **初始化阶段**：加载所有依赖库并配置核心功能模块 |
56 | | -2. **内容加载**：通过fetch获取Markdown文件内容并解析 |
57 | | -3. **渲染流程**：生成HTML内容 -> 处理路径 -> 更新DOM -> 动画过渡 |
58 | | -4. **交互处理**：通过PJAX实现无刷新导航，触发新的加载流程 |
59 | | -5. **异常处理**：在关键节点捕获错误并显示友好提示 |
60 | | -6. **增强功能**：翻译系统与暗黑模式通过事件总线集成 |
| 104 | +- **CSS动画**：使用 `Animated` 类实现页面过渡效果 |
| 105 | +- **事件委托**：监听 `animationend` 事件清理DOM残留 |
| 106 | +- **滚动管理**：内容加载后自动滚动到顶部 |
0 commit comments