# 加载动画系统清理与文本效果修复 - 任务列表

## 1. 准备工作
- [ ] 1.1 备份 `argontheme.js` 到 `tmp/` 目录
- [ ] 1.2 备份 `style.css` 到 `tmp/` 目录
- [ ] 1.3 确认 `PageLoader` 模块正常工作

## 2. 清理旧加载动画代码
- [ ] 2.1 定位并移除 `argontheme.js` 第 4970-5040 行的旧代码
  - 移除页面初始加载的旧实现
  - 移除 `initPjaxAnimations()` 函数
  - 移除相关的 `article-loading-overlay` 创建代码
- [ ] 2.2 添加 PJAX 集成代码
  - 在 `PageLoader` 模块后添加 PJAX 事件监听
  - `pjax:start` 时调用 `PageLoader.show()`
  - `pjax:end` 时调用 `PageLoader.hide()` 并重新初始化动画
- [ ] 2.3 测试页面加载动画
  - 刷新页面，验证加载动画正常显示和隐藏
  - 检查控制台无错误
- [ ] 2.4 测试 PJAX 导航动画
  - 点击文章链接，验证加载动画正常显示和隐藏
  - 验证页面内容正确更新
  - 检查控制台无错误

## 3. 修复彩色黑幕样式
- [ ] 3.1 重构 `.color-curtain` 基础样式
  - 添加 `article .entry-content .color-curtain` 选择器
  - 添加 `.article-content .color-curtain` 选择器
  - 保持原有样式属性
- [ ] 3.2 重构 `.color-curtain` 链接样式
  - 添加文章容器选择器支持
  - 确保链接继承父元素样式
- [ ] 3.3 重构 `.color-curtain` 悬停样式
  - 添加文章容器选择器支持
  - 确保悬停时正确显示文本
- [ ] 3.4 添加夜间模式优化
  - 设置 `--curtain-bg: #1a1a1a`
  - 设置 `--curtain-fg: #e0e0e0`
- [ ] 3.5 测试彩色黑幕效果
  - 在文章中添加测试内容
  - 验证默认状态和悬停状态
  - 验证夜间模式颜色

## 4. 修复模糊文本样式
- [ ] 4.1 重构 `.text-blur` 基础样式
  - 添加 `article .entry-content .text-blur` 选择器
  - 添加 `.article-content .text-blur` 选择器
  - 保持 `filter: blur(2px)` 效果
- [ ] 4.2 重构 `.text-blur` 链接样式
  - 添加文章容器选择器支持
  - 确保链接也应用模糊效果
- [ ] 4.3 重构 `.text-blur` 悬停样式
  - 添加文章容器选择器支持
  - 确保悬停时取消模糊
- [ ] 4.4 测试模糊文本效果
  - 在文章中添加测试内容
  - 验证默认模糊和悬停清晰
  - 验证夜间模式正常

## 5. 修复划掉文本样式
- [ ] 5.1 重构 `.huhua` 基础样式
  - 添加 `article .entry-content .huhua` 选择器
  - 添加 `.article-content .huhua` 选择器
  - 保持 `text-decoration: line-through` 效果
- [ ] 5.2 重构 `.huhua` 链接样式
  - 添加文章容器选择器支持
  - 确保链接继承样式
- [ ] 5.3 重构 `.huhua` 悬停样式
  - 添加文章容器选择器支持
  - 确保悬停时颜色变深
- [ ] 5.4 添加夜间模式优化
  - 设置基础颜色 `#6a7075`
  - 设置悬停颜色 `#555a5f`
- [ ] 5.5 测试划掉文本效果
  - 在文章中添加测试内容
  - 验证默认状态和悬停状态
  - 验证夜间模式颜色

## 6. 代码优化和注释
- [ ] 6.1 在 `style.css` 中添加结构化注释
  - 添加 "文章文本特效" 大区块注释
  - 为每个效果添加小区块注释
  - 为关键样式添加说明注释
- [ ] 6.2 检查代码规范
  - 验证 Tab 缩进正确
  - 验证属性独占一行
  - 验证属性之间无多余空行
  - 验证 JavaScript 使用 `let`/`const`

## 7. 测试和验证
- [ ] 7.1 完整功能测试
  - 测试页面初始加载
  - 测试 PJAX 导航
  - 测试所有文本效果（日间模式）
  - 测试所有文本效果（夜间模式）
- [ ] 7.2 回归测试
  - 验证其他页面功能正常
  - 验证移动端响应式布局
  - 验证浏览器兼容性
- [ ] 7.3 性能检查
  - 检查页面加载时间
  - 检查控制台无警告
  - 检查 DOM 元素数量合理

## 8. 提交代码
- [ ] 8.1 编写详细的 Git commit 信息
  - 标题：`refactor: 清理旧加载动画代码并修复文本效果样式`
  - 详细说明：
    - 移除 argontheme.js 第 4970-5040 行旧代码
    - 添加 PJAX 集成到 PageLoader 系统
    - 为 color-curtain、text-blur、huhua 添加文章容器选择器
    - 优化夜间模式颜色
    - 添加结构化注释
- [ ] 8.2 提交代码到 Git
- [ ] 8.3 验证提交成功

## 9. 文档更新（可选）
- [ ]* 9.1 更新 `doc/argon-theme-training.md`
  - 记录新的加载动画系统架构
  - 记录文本效果的使用方法
- [ ]* 9.2 创建文本效果使用示例
  - 提供 HTML 代码示例
  - 提供效果预览截图