124 lines
4.4 KiB
Markdown
124 lines
4.4 KiB
Markdown
|
# 加载动画系统清理与文本效果修复 - 任务列表
|
||
|
|
|
||
|
|
## 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 代码示例
|
||
|
|
- 提供效果预览截图
|