fix-backdrop-filter

docs: 补充评论系统完整实现细节
docs: 细化 Argon 主题培训文档
2026-03-03 14:58:17 +08:00 · 2026-02-02 00:05:46 +08:00 · 2026-01-31 18:49:02 +08:00 · 2026-01-27 23:49:32 +08:00 · 2026-01-27 23:43:55 +08:00 · 2026-01-27 23:36:45 +08:00
11 changed files with 39107 additions and 1291 deletions
--- a/.history/style_20260302002620.css
+++ b/.history/style_20260302002620.css
--- a/.history/style_20260302002714.css
+++ b/.history/style_20260302002714.css
--- a/.kiro/specs/loading-animation-cleanup/design.md
+++ b/.kiro/specs/loading-animation-cleanup/design.md
@@ -0,0 +1,369 @@
+# 加载动画系统清理与文本效果修复 - 设计文档
+
+## 1. 架构概述
+
+本次优化分为两个独立模块：
+1. **加载动画清理模块**：移除旧代码，统一使用 `PageLoader`
+2. **文本效果修复模块**：为文本特效添加文章容器选择器支持
+
+## 2. 加载动画清理设计
+
+### 2.1 问题分析
+
+**旧代码位置**：`argontheme.js` 第 4970-5040 行
+
+**旧代码特征**：
+- 使用 `article-loading-overlay` ID
+- 手动创建 DOM 元素和骨架屏 HTML
+- 使用 `setInterval` 模拟进度
+- 监听 `window.load` 事件
+- PJAX 事件处理中重复创建相同元素
+
+**新系统特征**：
+- 使用 `PageLoader` 模块（IIFE 封装）
+- 统一的 `loading-*` 类名前缀
+- SVG 圆环进度指示器
+- 智能进度算法（缓动函数）
+- 延迟显示和最小显示时间控制
+
+### 2.2 清理策略
+
+#### 2.2.1 页面初始加载
+**旧代码**（需移除）：
+```javascript
+// 第 4970-4995 行
+var bar = document.getElementById('page-loading-bar');
+// ... 创建 article-loading-overlay ...
+window.addEventListener('load', function() { ... });
+```
+
+**新方案**：
+- 在 `DOMContentLoaded` 时调用 `PageLoader.show()`
+- 在 `window.load` 时调用 `PageLoader.hide()`
+- 已在现有代码中实现，无需修改
+
+#### 2.2.2 PJAX 加载动画
+**旧代码**（需移除）：
+```javascript
+// 第 4997-5033 行
+function initPjaxAnimations() {
+    jQuery(document).on('pjax:start', function() {
+        // ... 创建 article-loading-overlay ...
+    });
+    jQuery(document).on('pjax:end', function() {
+        // ... 移除 overlay ...
+    });
+}
+```
+
+**新方案**：
+- `pjax:start` 时调用 `PageLoader.show()`
+- `pjax:end` 时调用 `PageLoader.hide()`
+- 需要新增此部分代码
+
+### 2.3 实现步骤
+
+1. **定位旧代码**：确认第 4970-5040 行的完整范围
+2. **移除旧代码**：删除整个旧的加载动画实现
+3. **添加 PJAX 支持**：在 `PageLoader` 模块后添加 PJAX 事件监听
+4. **测试验证**：确保页面加载和 PJAX 导航都正常
+
+### 2.4 新增 PJAX 集成代码
+
+```javascript
+// PJAX 加载动画集成
+if (typeof jQuery !== 'undefined') {
+	jQuery(document).on('pjax:start', function() {
+		PageLoader.show();
+	});
+	
+	jQuery(document).on('pjax:end', function() {
+		PageLoader.hide();
+		// 重新初始化页面动画
+		setTimeout(function() {
+			initImageLoadAnimation();
+			initScrollAnimations();
+			initSmoothScroll();
+		}, 100);
+	});
+}
+```
+
+## 3. 文本效果修复设计
+
+### 3.1 问题分析
+
+**当前样式选择器**：
+```css
+.color-curtain { ... }
+.text-blur { ... }
+.huhua { ... }
+```
+
+**问题**：
+- 缺少文章容器选择器（`article .entry-content`、`.article-content`）
+- 在某些文章布局中可能不生效
+
+### 3.2 修复策略
+
+参考黑幕样式的修复方式，为每个文本效果添加文章容器选择器。
+
+#### 3.2.1 彩色黑幕（color-curtain）
+
+**当前样式**：
+```css
+.color-curtain, .color-curtain a, a .color-curtain, .color-curtain a.new {
+    background-color: var(--curtain-bg, #252525) !important;
+    color: var(--curtain-bg, #252525) !important;
+    /* ... */
+}
+```
+
+**修复方案**：
+```css
+/* 基础样式 */
+.color-curtain,
+article .entry-content .color-curtain,
+.article-content .color-curtain {
+    background-color: var(--curtain-bg, #252525) !important;
+    color: var(--curtain-bg, #252525) !important;
+    /* ... */
+}
+
+/* 链接样式 */
+.color-curtain a,
+article .entry-content .color-curtain a,
+.article-content .color-curtain a {
+    color: inherit !important;
+    /* ... */
+}
+
+/* 悬停样式 */
+.color-curtain:hover,
+article .entry-content .color-curtain:hover,
+.article-content .color-curtain:hover {
+    color: var(--curtain-fg, #fff) !important;
+}
+```
+
+**夜间模式优化**：
+```css
+html.darkmode .color-curtain,
+html.darkmode article .entry-content .color-curtain,
+html.darkmode .article-content .color-curtain {
+    --curtain-bg: #1a1a1a;
+    --curtain-fg: #e0e0e0;
+}
+```
+
+#### 3.2.2 模糊文本（text-blur）
+
+**当前样式**：
+```css
+.text-blur, .text-blur a, a .text-blur, .text-blur a.new {
+    filter: blur(2px) !important;
+    /* ... */
+}
+```
+
+**修复方案**：
+```css
+.text-blur,
+article .entry-content .text-blur,
+.article-content .text-blur {
+    filter: blur(2px) !important;
+    transition: filter var(--text-blur-transition-time, .2s) ease;
+    display: inline-block;
+}
+
+.text-blur:hover,
+article .entry-content .text-blur:hover,
+.article-content .text-blur:hover {
+    filter: none !important;
+}
+```
+
+#### 3.2.3 划掉文本（huhua）
+
+**当前样式**：
+```css
+.huhua {
+    color: #9ea3a9 !important;
+    text-decoration: line-through !important;
+    /* ... */
+}
+```
+
+**修复方案**：
+```css
+.huhua,
+article .entry-content .huhua,
+.article-content .huhua {
+    color: #9ea3a9 !important;
+    text-decoration: line-through !important;
+    text-shadow: none !important;
+    transition: color .2s ease;
+}
+
+.huhua:hover,
+article .entry-content .huhua:hover,
+.article-content .huhua:hover {
+    color: #7f858b !important;
+}
+```
+
+**夜间模式优化**：
+```css
+html.darkmode .huhua,
+html.darkmode article .entry-content .huhua,
+html.darkmode .article-content .huhua {
+    color: #6a7075 !important;
+}
+
+html.darkmode .huhua:hover,
+html.darkmode article .entry-content .huhua:hover,
+html.darkmode .article-content .huhua:hover {
+    color: #555a5f !important;
+}
+```
+
+### 3.3 代码组织
+
+在 `style.css` 中重新组织文本效果样式：
+
+```
+/* ==========================================================================
+   文章文本特效（Text Effects in Articles）
+   ========================================================================== */
+
+/* ---------- 彩色黑幕（Color Curtain） ---------- */
+/* 基础样式 */
+/* 链接样式 */
+/* 悬停样式 */
+/* 夜间模式 */
+
+/* ---------- 模糊文本（Text Blur） ---------- */
+/* 基础样式 */
+/* 悬停样式 */
+
+/* ---------- 划掉文本（Strikethrough） ---------- */
+/* 基础样式 */
+/* 悬停样式 */
+/* 夜间模式 */
+```
+
+## 4. 正确性属性（Correctness Properties）
+
+### 4.1 加载动画属性
+
+**Property 1.1**: 页面加载时必须显示加载动画
+- **验证方式**：刷新页面，观察是否出现 SVG 圆环进度指示器
+- **预期行为**：`DOMContentLoaded` 后显示，`window.load` 后隐藏
+
+**Property 1.2**: PJAX 导航时必须显示加载动画
+- **验证方式**：点击文章链接，观察是否出现加载动画
+- **预期行为**：`pjax:start` 后显示，`pjax:end` 后隐藏
+
+**Property 1.3**: 不存在旧的 `article-loading-overlay` 元素
+- **验证方式**：检查 DOM 树和控制台
+- **预期行为**：只有 `loading-overlay` 元素，无 `article-loading-overlay`
+
+### 4.2 文本效果属性
+
+**Property 2.1**: 文本效果在文章中可见
+- **验证方式**：在文章中添加 `<span class="color-curtain">测试</span>`
+- **预期行为**：文本被彩色背景遮盖
+
+**Property 2.2**: 悬停时文本效果正确响应
+- **验证方式**：鼠标悬停在文本效果上
+- **预期行为**：
+  - `color-curtain`：显示文本内容
+  - `text-blur`：取消模糊
+  - `huhua`：颜色变深
+
+**Property 2.3**: 夜间模式下颜色正确
+- **验证方式**：切换到夜间模式，检查文本效果颜色
+- **预期行为**：使用夜间模式专用颜色变量
+
+## 5. 测试策略
+
+### 5.1 单元测试（手动）
+
+1. **页面初始加载**
+   - 刷新页面
+   - 观察加载动画是否正常显示和隐藏
+   - 检查控制台是否有错误
+
+2. **PJAX 导航**
+   - 点击文章链接
+   - 观察加载动画是否正常显示和隐藏
+   - 检查页面内容是否正确更新
+
+3. **文本效果显示**
+   - 在文章编辑器中添加测试内容：
+     ```html
+     <span class="color-curtain">彩色黑幕测试</span>
+     <span class="text-blur">模糊文本测试</span>
+     <span class="huhua">划掉文本测试</span>
+     ```
+   - 发布文章并查看效果
+
+4. **文本效果交互**
+   - 鼠标悬停在每个文本效果上
+   - 验证交互行为是否正确
+
+5. **夜间模式**
+   - 切换到夜间模式
+   - 重复步骤 3 和 4
+
+### 5.2 回归测试
+
+- 验证其他页面功能未受影响
+- 验证移动端响应式布局正常
+- 验证浏览器兼容性（Chrome、Firefox、Safari、Edge）
+
+## 6. 风险评估
+
+### 6.1 高风险
+- **PJAX 功能失效**：移除旧代码可能影响 PJAX 导航
+  - **缓解措施**：仔细测试 PJAX 导航，确保新代码正确集成
+
+### 6.2 中风险
+- **样式冲突**：新增选择器可能与现有样式冲突
+  - **缓解措施**：使用 `!important` 确保优先级，参考黑幕样式的成功经验
+
+### 6.3 低风险
+- **性能影响**：新增选择器可能轻微影响 CSS 性能
+  - **缓解措施**：选择器数量有限，影响可忽略
+
+## 7. 实施计划
+
+### Phase 1: 清理旧加载动画代码
+1. 备份 `argontheme.js`
+2. 移除第 4970-5040 行旧代码
+3. 添加 PJAX 集成代码
+4. 测试页面加载和 PJAX 导航
+
+### Phase 2: 修复文本效果样式
+1. 备份 `style.css`
+2. 重构 `color-curtain` 样式
+3. 重构 `text-blur` 样式
+4. 重构 `huhua` 样式
+5. 添加夜间模式优化
+6. 测试所有文本效果
+
+### Phase 3: 验证和提交
+1. 完整回归测试
+2. 检查代码规范
+3. 编写详细的 Git commit 信息
+4. 提交代码
+
+## 8. 成功标准
+
+- ✅ 旧加载动画代码完全移除
+- ✅ 页面加载和 PJAX 导航动画正常工作
+- ✅ 所有文本效果在文章中正常显示和交互
+- ✅ 夜间模式下颜色正确
+- ✅ 无控制台错误或警告
+- ✅ 代码遵循项目规范
+- ✅ Git commit 信息详细清晰
--- a/.kiro/specs/loading-animation-cleanup/requirements.md
+++ b/.kiro/specs/loading-animation-cleanup/requirements.md
@@ -0,0 +1,69 @@
+# 加载动画系统清理与文本效果修复
+
+## 1. 概述
+
+清理旧的加载动画代码，统一使用新的 `PageLoader` 系统，并修复文章中文本特效样式不显示的问题。
+
+## 2. 背景
+
+在之前的优化中：
+- 创建了全新的 `PageLoader` 模块（SVG 圆环进度、智能进度算法、骨架屏）
+- 移除了向后兼容函数 `showLoadingOverlay()` 和 `hideLoadingOverlay()`
+- 修复了黑幕（`.heimu`）样式在文章中不显示的问题
+
+但仍存在以下问题：
+1. `argontheme.js` 第 4970-5040 行存在旧的加载动画代码，使用旧的 `article-loading-overlay` ID
+2. 其他文本效果（`color-curtain`、`text-blur`、`huhua`）可能在文章中不显示
+3. 代码冗余，维护困难
+
+## 3. 用户故事
+
+### 3.1 作为开发者
+我希望代码库中只有一套加载动画系统，这样：
+- 代码更易维护
+- 避免新旧系统冲突
+- 减少代码体积
+
+### 3.2 作为用户
+我希望在文章中使用的所有文本特效都能正常显示，包括：
+- 彩色黑幕（`color-curtain`）
+- 模糊文本（`text-blur`）
+- 划掉文本（`huhua`）
+
+## 4. 验收标准
+
+### 4.1 清理旧加载动画代码
+- [ ] 移除 `argontheme.js` 中第 4970-5040 行的旧加载动画代码
+- [ ] 确保所有加载动画调用都使用新的 `PageLoader` 系统
+- [ ] PJAX 加载动画正常工作
+- [ ] 页面初始加载动画正常工作
+
+### 4.2 修复文本效果样式
+- [ ] `color-curtain` 在文章中正常显示和交互
+- [ ] `text-blur` 在文章中正常显示和交互
+- [ ] `huhua` 在文章中正常显示和交互
+- [ ] 夜间模式下所有文本效果颜色正确
+
+### 4.3 代码质量
+- [ ] 遵循项目代码规范（Tab 缩进、单引号、严格相等）
+- [ ] 添加清晰的注释
+- [ ] 无控制台错误或警告
+
+## 5. 技术约束
+
+- 必须保持与现有 `PageLoader` 系统的兼容性
+- 不能破坏 PJAX 功能
+- 样式修复需要参考黑幕样式的修复方式（添加 `article .entry-content` 和 `.article-content` 选择器）
+- 遵循 Argon 主题代码规范
+
+## 6. 非功能性需求
+
+- 加载动画性能不能下降
+- 文本效果不能影响页面渲染性能
+- 代码体积应该减少（移除冗余代码）
+
+## 7. 排除范围
+
+- 不涉及其他页面元素的样式修复
+- 不涉及新功能开发
+- 不涉及其他 JavaScript 模块的重构
--- a/.kiro/specs/loading-animation-cleanup/tasks.md
+++ b/.kiro/specs/loading-animation-cleanup/tasks.md
@@ -0,0 +1,123 @@
+# 加载动画系统清理与文本效果修复 - 任务列表
+
+## 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 代码示例
+  - 提供效果预览截图
--- a/404.php
+++ b/404.php
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html <?php language_attributes(); ?>>
 <head>
-	<meta charset="<?php bloginfo('charset'); ?>">
+	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<script>
 		// 备用字体加载
--- a/argontheme.js
+++ b/argontheme.js
@@ -44,6 +44,31 @@ if (typeof jQuery !== 'undefined') {
                return x === 1 ? 1 : 1 - Math.pow(2, -10 * x);
            };
        }
+
+        if (!$.fn._argonInit) {
+            $.fn._argonInit = $.fn.init;
+            $.fn.init = function(selector, context, root) {
+                // 修复空选择器、特殊字符和中文标点导致的语法错误
+                if (typeof selector === 'string') {
+                    let trimmed = selector.trim();
+                    // 检查是否为空或只有 # 符号
+                    if (trimmed === '' || trimmed === '#') {
+                        return new $.fn._argonInit();
+                    }
+                    // 检查是否包含中文标点（可能导致语法错误）
+                    if (/[；，。：！？]/.test(trimmed)) {
+                        console.warn('[Argon] Invalid selector with Chinese punctuation:', selector);
+                        return new $.fn._argonInit();
+                    }
+                    // 检查 ID 选择器是否有效（#后面必须有内容）
+                    if (/^#\s*$/.test(trimmed)) {
+                        return new $.fn._argonInit();
+                    }
+                }
+                return $.fn._argonInit.call(this, selector, context, root);
+            };
+            $.fn.init.prototype = $.fn;
+        }
        
        // 确保 zoomify 插件存在
        if (typeof $.fn.zoomify === 'undefined') {
@@ -2336,17 +2361,34 @@ $(document).on("submit" , ".post-password-form" , function(){

 /*URL 和# 根据 ID 定位*/
 function gotoHash(hash, durtion, easing = 'easeOutExpo'){
-	if (hash.length == 0){
+	if (!hash || hash === "#"){
 		return;
 	}
-	if ($(hash).length == 0){
+	var target = null;
+	var decodedId = "";
+	try {
+		decodedId = decodeURIComponent(hash.slice(1));
+	} catch (err) {
+		decodedId = hash.slice(1);
+	}
+	if (decodedId) {
+		target = document.getElementById(decodedId);
+	}
+	if (!target) {
+		try {
+			target = document.querySelector(hash);
+		} catch (err) {
+			return;
+		}
+	}
+	if (!target){
 		return;
 	}
 	if (durtion == null){
 		durtion = 200;
 	}
 	$("body,html").stop().animate({
-		scrollTop: $(hash).offset().top - 80
+		scrollTop: $(target).offset().top - 80
 	}, durtion, easing);
 }
 function getHash(url){
@@ -2565,6 +2607,16 @@ function loadImageOptimized(img, effect) {
 		requestAnimationFrame(function() {
 			img.src = src;
 			img.removeAttribute('data-src');
+			let srcset = img.getAttribute('data-srcset');
+			if (srcset) {
+				img.setAttribute('srcset', srcset);
+				img.removeAttribute('data-srcset');
+			}
+			let sizes = img.getAttribute('data-sizes');
+			if (sizes) {
+				img.setAttribute('sizes', sizes);
+				img.removeAttribute('data-sizes');
+			}
 			img.classList.remove('lazyload');
 			
 			// 移除所有lazyload-style-* 类
@@ -2579,6 +2631,16 @@ function loadImageOptimized(img, effect) {
 		requestAnimationFrame(function() {
 			img.src = src;
 			img.removeAttribute('data-src');
+			let srcset = img.getAttribute('data-srcset');
+			if (srcset) {
+				img.setAttribute('srcset', srcset);
+				img.removeAttribute('data-srcset');
+			}
+			let sizes = img.getAttribute('data-sizes');
+			if (sizes) {
+				img.setAttribute('sizes', sizes);
+				img.removeAttribute('data-sizes');
+			}
 			img.classList.remove('lazyload');
 			img.className = img.className.replace(/\blazyload-style-\d+\b/g, '').trim();
 			
@@ -2688,6 +2750,16 @@ function loadAllImagesImmediately() {
 		if (src) {
 			img.src = src;
 			img.removeAttribute('data-src');
+			let srcset = img.getAttribute('data-srcset');
+			if (srcset) {
+				img.setAttribute('srcset', srcset);
+				img.removeAttribute('data-srcset');
+			}
+			let sizes = img.getAttribute('data-sizes');
+			if (sizes) {
+				img.setAttribute('sizes', sizes);
+				img.removeAttribute('data-sizes');
+			}
 			img.classList.remove('lazyload');
 			img.className = img.className.replace(/\blazyload-style-\d+\b/g, '').trim();
 		}
@@ -3085,6 +3157,9 @@ function executeInlineScripts(container) {
 	
 	// 需求 4.3: 按照脚本在 DOM 中的顺序执行
 	scripts.forEach((script, index) => {
+		if (script.getAttribute('data-pjax-executed') === 'true') {
+			return;
+		}
 		// 需求 4.2: 只执行内联脚本（没有 src 属性的脚本）
 		if (!script.src) {
 			// 跳过空脚本
@@ -3098,6 +3173,7 @@ function executeInlineScripts(container) {
 			// 需求 4.4: 错误隔离 - 单个脚本失败不影响其他脚本
 			const success = executeScript(script);
 			if (success) {
+				script.setAttribute('data-pjax-executed', 'true');
 				successCount++;
 			} else {
 				failedCount++;
@@ -3118,9 +3194,299 @@ function executeInlineScripts(container) {
 	return result;
 }

+var pjaxContainerSelectors = ['#primary', '#leftbar_part1_menu', '#leftbar_part2_inner', '.page-information-card-container', '#rightbar', '#wpadminbar'];
+var pjaxContainers = pjaxContainerSelectors.filter(function(selector) {
+	return document.querySelector(selector);
+});
+
+// ==========================================================================
+// 现代化页面加载系统
+// ==========================================================================
+
+/**
+ * 页面加载管理器 - 提供智能加载动画和进度追踪
+ */
+const PageLoader = (function() {
+	// 配置常量
+	const CONFIG = {
+		OVERLAY_ID: 'page-loader',
+		MIN_DISPLAY_TIME: 400,        // 最小显示时间（避免闪烁）
+		FADE_DURATION: 350,            // 淡出动画时长
+		PROGRESS_STEP: 0.1,            // 进度条步进
+		PROGRESS_INTERVAL: 200,        // 进度更新间隔
+		SKELETON_DELAY: 150            // 骨架屏延迟显示
+	};
+	
+	// 状态管理
+	let state = {
+		element: null,
+		isVisible: false,
+		startTime: 0,
+		progress: 0,
+		progressTimer: null,
+		hideTimer: null,
+		skeletonTimer: null
+	};
+	
+	/**
+	 * 创建加载动画 HTML
+	 */
+	function createHTML() {
+		return `
+			<div class="page-loader-backdrop"></div>
+			<div class="page-loader-content">
+				<!-- 进度环 -->
+				<div class="loader-ring-container">
+					<svg class="loader-ring" viewBox="0 0 100 100">
+						<circle class="loader-ring-bg" cx="50" cy="50" r="45"></circle>
+						<circle class="loader-ring-progress" cx="50" cy="50" r="45"></circle>
+					</svg>
+					<div class="loader-icon">
+						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+							<path d="M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83"/>
+						</svg>
+					</div>
+				</div>
+				
+				<!-- 加载文字 -->
+				<div class="loader-text">
+					<div class="loader-title">加载中</div>
+					<div class="loader-subtitle">正在为您准备内容</div>
+				</div>
+				
+				<!-- 骨架屏（延迟显示） -->
+				<div class="loader-skeleton">
+					<div class="skeleton-card">
+						<div class="skeleton-image"></div>
+						<div class="skeleton-content">
+							<div class="skeleton-title"></div>
+							<div class="skeleton-line"></div>
+							<div class="skeleton-line short"></div>
+						</div>
+					</div>
+				</div>
+			</div>
+		`;
+	}
+	
+	/**
+	 * 创建加载器元素
+	 */
+	function createElement() {
+		const el = document.createElement('div');
+		el.id = CONFIG.OVERLAY_ID;
+		el.className = 'page-loader';
+		el.innerHTML = createHTML();
+		return el;
+	}
+	
+	/**
+	 * 获取或创建元素
+	 */
+	function getElement() {
+		if (!state.element) {
+			state.element = document.getElementById(CONFIG.OVERLAY_ID);
+			if (!state.element) {
+				state.element = createElement();
+				document.body.appendChild(state.element);
+			}
+		}
+		return state.element;
+	}
+	
+	/**
+	 * 更新进度环
+	 */
+	function updateProgress(progress) {
+		const el = state.element;
+		if (!el) return;
+		
+		const circle = el.querySelector('.loader-ring-progress');
+		if (circle) {
+			const circumference = 2 * Math.PI * 45;
+			const offset = circumference - (progress / 100) * circumference;
+			circle.style.strokeDashoffset = offset;
+		}
+		
+		state.progress = progress;
+	}
+	
+	/**
+	 * 自动递增进度
+	 */
+	function startProgressAnimation() {
+		stopProgressAnimation();
+		
+		state.progress = 0;
+		updateProgress(0);
+		
+		state.progressTimer = setInterval(function() {
+			if (state.progress < 90) {
+				// 使用缓动函数，越接近 90% 越慢
+				const increment = CONFIG.PROGRESS_STEP * (1 - state.progress / 100);
+				state.progress = Math.min(90, state.progress + increment * 10);
+				updateProgress(state.progress);
+			}
+		}, CONFIG.PROGRESS_INTERVAL);
+	}
+	
+	/**
+	 * 停止进度动画
+	 */
+	function stopProgressAnimation() {
+		if (state.progressTimer) {
+			clearInterval(state.progressTimer);
+			state.progressTimer = null;
+		}
+	}
+	
+	/**
+	 * 完成进度到 100%
+	 */
+	function completeProgress() {
+		stopProgressAnimation();
+		updateProgress(100);
+	}
+	
+	/**
+	 * 显示加载器
+	 */
+	function show() {
+		// 清理之前的定时器
+		if (state.hideTimer) {
+			clearTimeout(state.hideTimer);
+			state.hideTimer = null;
+		}
+		if (state.skeletonTimer) {
+			clearTimeout(state.skeletonTimer);
+			state.skeletonTimer = null;
+		}
+		
+		const el = getElement();
+		state.startTime = Date.now();
+		state.isVisible = true;
+		
+		// 移除隐藏类，添加显示类
+		el.classList.remove('is-hiding');
+		void el.offsetWidth; // 强制重排
+		el.classList.add('is-visible');
+		
+		// 启动进度动画
+		startProgressAnimation();
+		
+		// 延迟显示骨架屏（避免快速加载时闪烁）
+		state.skeletonTimer = setTimeout(function() {
+			if (state.isVisible && el) {
+				el.classList.add('show-skeleton');
+			}
+		}, CONFIG.SKELETON_DELAY);
+	}
+	
+	/**
+	 * 隐藏加载器
+	 */
+	function hide() {
+		if (!state.isVisible) return;
+		
+		const el = state.element;
+		if (!el) return;
+		
+		// 完成进度
+		completeProgress();
+		
+		// 计算已显示时间
+		const elapsedTime = Date.now() - state.startTime;
+		const remainingTime = Math.max(0, CONFIG.MIN_DISPLAY_TIME - elapsedTime);
+		
+		// 确保最小显示时间后再隐藏
+		state.hideTimer = setTimeout(function() {
+			el.classList.add('is-hiding');
+			el.classList.remove('show-skeleton');
+			
+			// 动画结束后清理
+			setTimeout(function() {
+				el.classList.remove('is-visible', 'is-hiding');
+				state.isVisible = false;
+				stopProgressAnimation();
+			}, CONFIG.FADE_DURATION);
+		}, remainingTime);
+	}
+	
+	/**
+	 * 设置进度（手动控制）
+	 */
+	function setProgress(progress) {
+		progress = Math.max(0, Math.min(100, progress));
+		stopProgressAnimation();
+		updateProgress(progress);
+	}
+	
+	/**
+	 * 销毁加载器
+	 */
+	function destroy() {
+		stopProgressAnimation();
+		
+		if (state.hideTimer) {
+			clearTimeout(state.hideTimer);
+			state.hideTimer = null;
+		}
+		if (state.skeletonTimer) {
+			clearTimeout(state.skeletonTimer);
+			state.skeletonTimer = null;
+		}
+		
+		if (state.element && state.element.parentNode) {
+			state.element.parentNode.removeChild(state.element);
+		}
+		
+		state.element = null;
+		state.isVisible = false;
+	}
+	
+	// 公开 API
+	return {
+		show: show,
+		hide: hide,
+		setProgress: setProgress,
+		destroy: destroy
+	};
+})();
+
+/**
+ * 向后兼容的函数
+ */
+function showLoadingOverlay() {
+	PageLoader.show();
+}
+
+function hideLoadingOverlay() {
+	PageLoader.hide();
+}
+function startPageTransition() {
+	document.documentElement.classList.add('page-transition-enter');
+	pjaxContainers.forEach(function(selector) {
+		var c = document.querySelector(selector);
+		if (c) c.classList.add('page-transition-content');
+	});
+}
+function activatePageTransition() {
+	requestAnimationFrame(function() {
+		document.documentElement.classList.add('page-transition-active');
+	});
+}
+function endPageTransition() {
+	document.documentElement.classList.remove('page-transition-active');
+	document.documentElement.classList.remove('page-transition-enter');
+	pjaxContainers.forEach(function(selector) {
+		var c = document.querySelector(selector);
+		if (c) c.classList.remove('page-transition-content');
+	});
+}
+
 $.pjax.defaults.timeout = 10000;
-$.pjax.defaults.container = ['#primary', '#leftbar_part1_menu', '#leftbar_part2_inner', '.page-information-card-container', '#rightbar', '#wpadminbar'];
-$.pjax.defaults.fragment = ['#primary', '#leftbar_part1_menu', '#leftbar_part2_inner', '.page-information-card-container', '#rightbar', '#wpadminbar'];
+$.pjax.defaults.container = pjaxContainers;
+$.pjax.defaults.fragment = pjaxContainers;

 /*
 * PJAX 事件处理优化说明：
@@ -3134,15 +3500,17 @@ $.pjax.defaults.fragment = ['#primary', '#leftbar_part1_menu', '#leftbar_part2_i
 * - pjax:complete: 需求 1.5, 1.6 (模块初始化和错误隔离)
 * - pjax:end: 需求 1.7 (特定任务处理)
 */
-$(document).pjax("a[href]:not([no-pjax]):not(.no-pjax):not([target='_blank']):not([download]):not(.reference-link):not(.reference-list-backlink)")
+if (argonConfig.disable_pjax != true && argonConfig.disable_pjax != 'true') {
+$(document).pjax(
+	"a[href]:not([no-pjax]):not(.no-pjax):not([target='_blank']):not([download]):not(.reference-link):not(.reference-list-backlink):not([href^='#'])",
+	pjaxContainers.length ? pjaxContainers[0] : '#primary',
+	{ fragment: (pjaxContainers.length ? pjaxContainers : ['#primary']), timeout: $.pjax.defaults.timeout }
+)
 .on('pjax:click', function(e, f, g){
-	if (argonConfig.disable_pjax == true){
-		e.preventDefault();
-		return;
-	}
 	NProgress.remove();
 	NProgress.start();
 	pjaxLoading = true;
+	showLoadingOverlay();
 }).on('pjax:afterGetContainers', function(e, f, g) {
 	pjaxScrollTop = 0;
 	if ($("html").hasClass("banner-as-cover")){
@@ -3152,6 +3520,7 @@ $(document).pjax("a[href]:not([no-pjax]):not(.no-pjax):not([target='_blank']):no
 	}
 }).on('pjax:send', function() {
 	NProgress.set(0.618);
+	startPageTransition();
 }).on('pjax:beforeReplace', function(e, dom) {
 	// ========== 需求 1.1-1.4: 清理旧页面的所有资源 ==========
 	// 调用统一的资源清理管理器
@@ -3175,10 +3544,21 @@ $(document).pjax("a[href]:not([no-pjax]):not(.no-pjax):not([target='_blank']):no
 	// ========== 需求 1.5, 1.6: 重新初始化所有功能模块 ==========
 	pjaxLoading = false;
 	NProgress.inc();
+	startPageTransition();
+	activatePageTransition();
+	setTimeout(function() {
+		hideLoadingOverlay();
+		endPageTransition();
+	}, 320);
 	
 	// ========== 需求 4.1-4.5: 执行新页面中的内联脚本 ==========
 	try {
-		executeInlineScripts(document);
+		pjaxContainers.forEach(function(selector) {
+			var container = document.querySelector(selector);
+			if (container) {
+				executeInlineScripts(container);
+			}
+		});
 	} catch (err) {
 		ArgonDebug.error('executeInlineScripts failed:', err);
 	}
@@ -3240,6 +3620,10 @@ $(document).pjax("a[href]:not([no-pjax]):not(.no-pjax):not([target='_blank']):no
 	}

 	NProgress.done();
+}).on('pjax:error', function() {
+	hideLoadingOverlay();
+	endPageTransition();
+	pjaxLoading = false;
 }).on('pjax:end', function() {
 	// ========== 需求 1.7: 执行特定任务 ==========
 	
@@ -3255,6 +3639,7 @@ $(document).pjax("a[href]:not([no-pjax]):not(.no-pjax):not([target='_blank']):no
 	// GT4: PJAX 后确保评论页验证码已初始化
 	resetGT4Captcha();
 });
+}

 window.addEventListener('hashchange', function() {
 	handleHashNavigation();
@@ -3270,7 +3655,14 @@ if (document.readyState === 'loading') {
 /*Reference 跳转*/
 $(document).on("click", ".reference-link , .reference-list-backlink" , function(e){
 	e.preventDefault();
-	$target = $($(this).attr("href"));
+	var href = $(this).attr("href");
+	if (!href || href === "#" ) { return; }
+	var $target;
+	try {
+		$target = $(href);
+	} catch (err) {
+		return;
+	}
 	$("body,html").animate({
 		scrollTop: $target.offset().top - document.body.clientHeight / 2 - 75
 	}, 500, 'easeOutExpo')
@@ -3283,7 +3675,7 @@ $(document).on("click", ".reference-link , .reference-list-backlink" , function(
 	}, 1);
 });

-/*Tags Dialog pjax 加载后自动关闭/
+/*Tags Dialog pjax 加载后自动关闭 */
 $(document).on("click" , "#blog_tags .tag" , function(){
 	$("#blog_tags button.close").trigger("click");
 });
@@ -4591,10 +4983,29 @@ void 0;
            if (progress >= 90) { clearInterval(interval); progress = 90; }
            bar.style.width = progress + '%';
        }, 100);
+        var overlay = document.getElementById('article-loading-overlay');
+        if (!overlay) {
+            overlay = document.createElement('div');
+            overlay.id = 'article-loading-overlay';
+            var inner = document.createElement('div');
+            inner.className = 'overlay-content';
+            inner.innerHTML = '<div class="overlay-title"></div><div class="overlay-thumb"></div><div class="overlay-row" style="width:85%"></div><div class="overlay-row" style="width:70%"></div><div class="overlay-row" style="width:90%"></div><div class="overlay-grid"><div class="overlay-grid-item"></div><div class="overlay-grid-item"></div></div><div class="center-spinner"><div class="loading-spinner"></div><div class="overlay-row" style="width:120px;height:14px;margin:0"></div></div>';
+            overlay.appendChild(inner);
+            document.body.appendChild(overlay);
+        }
+        overlay.classList.remove('is-hiding');
+        requestAnimationFrame(function() {
+            overlay.classList.add('is-visible');
+        });
        window.addEventListener('load', function() {
            clearInterval(interval);
            bar.style.width = '100%';
            setTimeout(function() { bar.style.opacity = '0'; setTimeout(function() { bar.remove(); }, 300); }, 200);
+            if (overlay) {
+                overlay.classList.remove('is-visible');
+                overlay.classList.add('is-hiding');
+                setTimeout(function() { if (overlay && overlay.parentNode) overlay.parentNode.removeChild(overlay); }, 360);
+            }
        });
    }

@@ -4607,12 +5018,32 @@ void 0;
            if (!bar) { bar = document.createElement('div'); bar.id = 'page-loading-bar'; document.body.appendChild(bar); }
            bar.style.opacity = '1'; bar.style.width = '30%';
            setTimeout(function() { bar.style.width = '60%'; }, 200);
+            var overlay = document.getElementById('article-loading-overlay');
+            if (!overlay) {
+                overlay = document.createElement('div');
+                overlay.id = 'article-loading-overlay';
+                var inner = document.createElement('div');
+                inner.className = 'overlay-content';
+                inner.innerHTML = '<div class="overlay-title"></div><div class="overlay-thumb"></div><div class="overlay-row" style="width:85%"></div><div class="overlay-row" style="width:70%"></div><div class="overlay-row" style="width:90%"></div><div class="overlay-grid"><div class="overlay-grid-item"></div><div class="overlay-grid-item"></div></div><div class="center-spinner"><div class="loading-spinner"></div><div class="overlay-row" style="width:120px;height:14px;margin:0"></div></div>';
+                overlay.appendChild(inner);
+                document.body.appendChild(overlay);
+            }
+            overlay.classList.remove('is-hiding');
+            requestAnimationFrame(function() {
+                overlay.classList.add('is-visible');
+            });
        });
        jQuery(document).on('pjax:end', function() {
            jQuery('#primary').removeClass('pjax-loading');
            var bar = document.getElementById('page-loading-bar');
            if (bar) { bar.style.width = '100%'; setTimeout(function() { bar.style.opacity = '0'; setTimeout(function() { bar.remove(); }, 300); }, 200); }
            setTimeout(function() { initImageLoadAnimation(); initScrollAnimations(); initSmoothScroll(); }, 100);
+            var overlay = document.getElementById('article-loading-overlay');
+            if (overlay) {
+                overlay.classList.remove('is-visible');
+                overlay.classList.add('is-hiding');
+                setTimeout(function() { if (overlay && overlay.parentNode) overlay.parentNode.removeChild(overlay); }, 360);
+            }
        });
    }

--- a/feedback.php
+++ b/feedback.php
@@ -543,7 +543,7 @@ $status_labels = ['pending' => __('未查看', 'argon'), 'viewed' => __('已查
 $feedback_card_blur = intval(get_option('argon_card_blur', '20'));
 $feedback_card_saturate = intval(get_option('argon_card_saturate', '180'));
 $feedback_card_opacity = get_option('argon_post_background_opacity', '0.7');
-if ($feedback_card_opacity == '' || $feedback_card_opacity == '1') {
+if ($feedback_card_opacity == '') {
 	$feedback_card_opacity = '0.7';
 }
 ?>
@@ -582,7 +582,7 @@ html.darkmode .feedback-subtitle { color: #aaa; }

 /* 管理员统计 */
 .feedback-admin-stats { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
-.feedback-admin-stat { flex: 1; min-width: 120px; padding: 20px; background-color: rgba(255, 255, 255, <?php echo $feedback_card_opacity; ?>); backdrop-filter: blur(<?php echo $feedback_card_blur; ?>px) saturate(<?php echo $feedback_card_saturate; ?>%); -webkit-backdrop-filter: blur(<?php echo $feedback_card_blur; ?>px) saturate(<?php echo $feedback_card_saturate; ?>%); border-radius: var(--card-radius); text-align: center; border: 1px solid var(--color-border); transition: all var(--animation-fast) var(--ease-standard); }
+.feedback-admin-stat { flex: 1; min-width: 120px; padding: 20px; background-color: rgba(255, 255, 255, var(--card-opacity)); backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate)); -webkit-backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate)); border-radius: var(--card-radius); text-align: center; border: 1px solid var(--color-border); transition: all var(--animation-fast) var(--ease-standard); }
 .feedback-admin-stat:hover { transform: translateY(-2px); border-color: rgba(var(--themecolor-rgbstr), 0.3); box-shadow: 0 4px 12px rgba(var(--themecolor-rgbstr), 0.15); }
 .feedback-admin-stat .stat-value { font-size: 32px; font-weight: 600; color: var(--themecolor); line-height: 1.2; }
 .feedback-admin-stat .stat-label { font-size: 13px; color: #888; margin-top: 6px; }
@@ -590,7 +590,7 @@ html.darkmode .feedback-subtitle { color: #aaa; }
 .feedback-admin-stat.pending .stat-value { color: #d97706; }
 .feedback-admin-stat.resolved { border-color: rgba(5, 150, 105, 0.3); }
 .feedback-admin-stat.resolved .stat-value { color: #059669; }
-html.darkmode .feedback-admin-stat { background-color: rgba(66, 66, 66, <?php echo $feedback_card_opacity; ?>); }
+html.darkmode .feedback-admin-stat { background-color: rgba(66, 66, 66, var(--card-opacity)); }
 html.darkmode .feedback-admin-stat .stat-label { color: #aaa; }

 /* 表单样式 */
--- a/functions.php
+++ b/functions.php
@@ -19,6 +19,31 @@ function argon_prevent_mobile_cache() {
 }
 add_action('send_headers', 'argon_prevent_mobile_cache');

+/**
+ * 强制全站前台使用 UTF-8 字符集，修复乱码
+ */
+function argon_force_utf8_charset() {
+	$is_ajax = (defined('DOING_AJAX') && DOING_AJAX) || (function_exists('wp_doing_ajax') && wp_doing_ajax());
+	$is_rest = defined('REST_REQUEST') && REST_REQUEST;
+
+	if (is_admin() || $is_ajax || $is_rest || is_feed() || is_trackback() || is_robots()) {
+		return;
+	}
+
+	if (!headers_sent()) {
+		header('Content-Type: text/html; charset=UTF-8', true);
+	}
+}
+add_action('send_headers', 'argon_force_utf8_charset', 1);
+
+/**
+ * 固定 WordPress 前台字符集为 UTF-8，避免配置异常导致的编码错误
+ */
+function argon_force_blog_charset_utf8($value) {
+	return 'UTF-8';
+}
+add_filter('pre_option_blog_charset', 'argon_force_blog_charset_utf8');
+
 if (version_compare( $GLOBALS['wp_version'], '4.4-alpha', '<' )) {
 	echo "<div style='background: #5e72e4;color: #fff;font-size: 30px;padding: 50px 30px;position: fixed;width: 100%;left: 0;right: 0;bottom: 0;z-index: 2147483647;'>" . __("Argon 主题不支持 Wordpress 4.4 以下版本，请更新 Wordpress", 'argon') . "</div>";
 }
@@ -3553,6 +3578,14 @@ function argon_lazyload($content){
 					return $matches[0];
 				}
 				$original_src = $src_match[1];
+				$original_srcset = null;
+				$original_sizes = null;
+				if (preg_match('/\bsrcset\s*=\s*["\']([^"\']*)["\']/', $attrs, $srcset_match)) {
+					$original_srcset = $srcset_match[1];
+				}
+				if (preg_match('/\bsizes\s*=\s*["\']([^"\']*)["\']/', $attrs, $sizes_match)) {
+					$original_sizes = $sizes_match[1];
+				}
 				
 				// 跳过已经是 base64 的图片
 				if (strpos($original_src, 'data:image') === 0) {
@@ -3566,6 +3599,22 @@ function argon_lazyload($content){
 					$attrs
 				);
 				
+				if ($original_srcset !== null) {
+					$new_attrs = preg_replace(
+						'/\bsrcset\s*=\s*["\'][^"\']*["\']/',
+						'data-srcset="' . esc_attr($original_srcset) . '"',
+						$new_attrs
+					);
+				}
+				
+				if ($original_sizes !== null) {
+					$new_attrs = preg_replace(
+						'/\bsizes\s*=\s*["\'][^"\']*["\']/',
+						'data-sizes="' . esc_attr($original_sizes) . '"',
+						$new_attrs
+					);
+				}
+				
 				// 添加 lazyload 类
 				if (preg_match('/\bclass\s*=\s*["\']([^"\']*)["\']/', $new_attrs, $class_match)) {
 					$new_class = $class_match[1] . ' lazyload' . $style_class;
@@ -12951,7 +13000,7 @@ function argon_show_feedback_result_page($comment, $result, $type) {
 	<!DOCTYPE html>
 	<html <?php language_attributes(); ?>>
 	<head>
-		<meta charset="<?php bloginfo('charset'); ?>">
+		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<title>反馈处理结果 - <?php echo esc_html($site_name); ?></title>
 		<style>
--- a/header.php
+++ b/header.php
@@ -166,7 +166,7 @@

 <head>

-	<meta charset="<?php bloginfo( 'charset' ); ?>">
+	<meta charset="UTF-8">

 	<?php if (get_option('argon_enable_mobile_scale') != 'true'){ ?>

@@ -726,18 +726,33 @@
 $card_opacity = get_option('argon_post_background_opacity', '0.7');
 $card_blur = get_option('argon_card_blur', '20');
 $card_saturate = get_option('argon_card_saturate', '180');
+$bg_opacity = get_option('argon_page_background_opacity', '1');

-// 如果透明度为空或为1，使用推荐默认值
-if ($card_opacity == '' || $card_opacity == '1') {
+// 顶栏模糊度为卡片模糊度的 60%（12px / 20px = 0.6）
+$toolbar_blur = round($card_blur * 0.6);
+
+// 如果透明度为空，使用推荐默认值
+if ($card_opacity == '') {
 	$card_opacity = '0.7';
 }
+if ($bg_opacity == '') {
+	$bg_opacity = '1';
+}
 ?>

 <style id="theme_card_effect_css">
 	:root {
+		--bg-opacity: <?php echo $bg_opacity; ?>;
 		--card-opacity: <?php echo $card_opacity; ?>;
 		--card-blur: <?php echo $card_blur; ?>px;
 		--card-saturate: <?php echo $card_saturate; ?>%;
+		--toolbar-blur: <?php echo $toolbar_blur; ?>px;
+		--page-background-opacity: <?php echo $bg_opacity; ?>;
+		--banner-mask-height: 120px;
+		--banner-mask-opacity-top: 0.25;
+		--banner-mask-opacity-mid: 0.15;
+		--banner-mask-stop-mid: 35%;
+		--banner-title-shadow: 0 5px 15px rgba(0, 0, 0, .2);
 	}
 </style>

@@ -1168,11 +1183,7 @@ if ($card_opacity == '' || $card_opacity == '1') {
 			background-size: cover;

 			background-repeat: no-repeat;
-
-			opacity: <?php echo (get_option('argon_page_background_opacity') == '' ? '1' : get_option('argon_page_background_opacity')); ?>;
-
-			transition: opacity .5s ease;
-
+			opacity: var(--page-background-opacity);
 		}

 		html.darkmode #content:before{
@@ -1217,7 +1228,7 @@ if ($card_opacity == '' || $card_opacity == '1') {

 			html.darkmode #content:after {

-				opacity: <?php echo (get_option('argon_page_background_opacity') == '' ? '1' : get_option('argon_page_background_opacity')); ?>;
+				opacity: var(--page-background-opacity);

 			}

@@ -1235,8 +1246,8 @@ if ($card_opacity == '' || $card_opacity == '1') {
 		$card_blur_inline = intval(get_option('argon_card_blur', '20'));
 		$card_saturate_inline = intval(get_option('argon_card_saturate', '180'));
 		
-		// 如果透明度为空或为1，使用推荐默认值
-		if ($post_bg_opacity_inline == '' || $post_bg_opacity_inline == '1') {
+		// 如果透明度为空，使用推荐默认值
+		if ($post_bg_opacity_inline == '') {
 			$post_bg_opacity_inline = '0.7';
 		}
 		?>
@@ -1245,15 +1256,13 @@ if ($card_opacity == '' || $card_opacity == '1') {
 		#post_comment.card,
 		.post-navigation.card,
 		.related-posts.card,
-		.card.bg-white {
-			background-color: rgba(255, 255, 255, <?php echo $post_bg_opacity_inline; ?>) !important;
-			backdrop-filter: blur(<?php echo $card_blur_inline; ?>px) saturate(<?php echo $card_saturate_inline; ?>%);
-			-webkit-backdrop-filter: blur(<?php echo $card_blur_inline; ?>px) saturate(<?php echo $card_saturate_inline; ?>%);
+		.card.bg-white,
+		.card {
+			background-color: rgba(255, 255, 255, var(--card-opacity)) !important;
+			backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate)) !important;
+			-webkit-backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate)) !important;
 			background-clip: padding-box;
-			-webkit-transform: translateZ(0);
-			transform: translateZ(0);
 			position: relative;
-			z-index: 0;
 		}
 		article.post.card .post-content {
 			background-color: transparent;
@@ -1264,13 +1273,13 @@ if ($card_opacity == '' || $card_opacity == '1') {
 		html.darkmode .post-navigation.card,
 		html.darkmode .related-posts.card,
 		html.darkmode .card.bg-white {
-			background-color: rgba(66, 66, 66, <?php echo $post_bg_opacity_inline; ?>) !important;
+			background-color: rgba(66, 66, 66, var(--card-opacity)) !important;
 		}
 		#leftbar .card,
 		#leftbar_part1,
 		#leftbar_part2 {
-			backdrop-filter: blur(<?php echo $card_blur_inline; ?>px) saturate(<?php echo $card_saturate_inline; ?>%);
-			-webkit-backdrop-filter: blur(<?php echo $card_blur_inline; ?>px) saturate(<?php echo $card_saturate_inline; ?>%);
+			backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate)) !important;
+			-webkit-backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate)) !important;
 		}

 	</style>
@@ -1285,8 +1294,8 @@ $post_bg_opacity_standalone = get_option('argon_post_background_opacity', '0.7')

 // 只有在没有背景图片时才输出毛玻璃样式（有背景图片时上面已经输出了）
 if (apply_filters('argon_page_background_url', get_option('argon_page_background_url')) == ''): 
-	// 如果透明度为空或为1，使用推荐默认值
-	if ($post_bg_opacity_standalone == '' || $post_bg_opacity_standalone == '1') {
+	// 如果透明度为空，使用推荐默认值
+	if ($post_bg_opacity_standalone == '') {
 		$post_bg_opacity_standalone = '0.7';
 	}
 ?>
@@ -1297,15 +1306,13 @@ if (apply_filters('argon_page_background_url', get_option('argon_page_background
 	#post_comment.card,
 	.post-navigation.card,
 	.related-posts.card,
-	.card.bg-white {
-		background-color: rgba(255, 255, 255, <?php echo $post_bg_opacity_standalone; ?>) !important;
-		backdrop-filter: blur(<?php echo $card_blur_standalone; ?>px) saturate(<?php echo $card_saturate_standalone; ?>%);
-		-webkit-backdrop-filter: blur(<?php echo $card_blur_standalone; ?>px) saturate(<?php echo $card_saturate_standalone; ?>%);
+	.card.bg-white,
+	.card {
+		background-color: rgba(255, 255, 255, var(--card-opacity)) !important;
+		backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate)) !important;
+		-webkit-backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate)) !important;
 		background-clip: padding-box;
-		-webkit-transform: translateZ(0);
-		transform: translateZ(0);
 		position: relative;
-		z-index: 0;
 	}
 	article.post.card .post-content {
 		background-color: transparent;
@@ -1316,13 +1323,13 @@ if (apply_filters('argon_page_background_url', get_option('argon_page_background
 	html.darkmode .post-navigation.card,
 	html.darkmode .related-posts.card,
 	html.darkmode .card.bg-white {
-		background-color: rgba(66, 66, 66, <?php echo $post_bg_opacity_standalone; ?>) !important;
+		background-color: rgba(66, 66, 66, var(--card-opacity)) !important;
 	}
 	#leftbar .card,
 	#leftbar_part1,
 	#leftbar_part2 {
-		backdrop-filter: blur(<?php echo $card_blur_standalone; ?>px) saturate(<?php echo $card_saturate_standalone; ?>%);
-		-webkit-backdrop-filter: blur(<?php echo $card_blur_standalone; ?>px) saturate(<?php echo $card_saturate_standalone; ?>%);
+		backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate)) !important;
+		-webkit-backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate)) !important;
 	}
 </style>
 <?php endif; ?>
@@ -1344,9 +1351,9 @@ if (apply_filters('argon_page_background_url', get_option('argon_page_background

 			top: 0;

-			height: 120px;
+			height: var(--banner-mask-height);

-			background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0) 100%);
+			background: linear-gradient(180deg, rgba(0,0,0,var(--banner-mask-opacity-top)) 0%, rgba(0,0,0,var(--banner-mask-opacity-mid)) var(--banner-mask-stop-mid), rgba(0,0,0,0) 100%);

 			display: block;

@@ -1356,7 +1363,7 @@ if (apply_filters('argon_page_background_url', get_option('argon_page_background

 		.banner-title {

-			text-shadow: 0 5px 15px rgba(0, 0, 0, .2);
+			text-shadow: var(--banner-title-shadow);

 		}

--- a/style.css
+++ b/style.css
Author	SHA1	Message	Date
nanhaoluo	5c0abfd5da	fix-backdrop-filter	2026-03-03 14:58:17 +08:00
nanhaoluo	e34bfe5047	docs: 补充评论系统完整实现细节	2026-02-02 00:05:46 +08:00
nanhaoluo	5c362b1075	docs: 细化 Argon 主题培训文档 - 补充全局配置对象的详细说明和实际代码示例 - 细化 CSS 变量系统，包含主题色、动画、卡片样式等完整变量 - 扩展夜间模式章节，详细说明四种切换方案和 AMOLED 模式 - 重写 PJAX 章节，补充完整的事件流程和重新初始化逻辑 - 细化瀑布流布局，包含完整算法、响应式适配和性能优化 - 新增主题初始化流程章节，详细说明服务器端和客户端初始化过程 - 补充资源加载策略和强制刷新机制的实现细节 - 所有代码示例均来自实际项目文件，确保准确性	2026-01-31 18:49:02 +08:00
nanhaoluo	c9cebf0c14	fix: 为所有卡片添加毛玻璃效果 - 修改 .card 基础样式，添加 backdrop-filter 支持 - 使用 rgba 背景色配合 var(--card-opacity) 实现透明度控制 - 所有卡片（文章、评论、侧边栏等）现在都会应用毛玻璃模糊和饱和度效果 - 夜间模式下使用深色半透明背景	2026-01-27 23:49:32 +08:00
nanhaoluo	a12af3c4df	fix: 从后台设置读取透明度和毛玻璃效果参数 - 在 header.php 中读取后台设置的透明度和毛玻璃参数 - 输出 CSS 变量：--bg-opacity、--card-opacity、--card-blur、--card-saturate、--toolbar-blur - 顶栏模糊度自动计算为卡片模糊度的 60% - 移除 style.css 中的硬编码默认值，完全由后台设置控制 - 确保毛玻璃效果（backdrop-filter）正常工作	2026-01-27 23:43:55 +08:00
nanhaoluo	731f573b2c	feat: 统一透明度与毛玻璃效果的 CSS 变量控制 - 新增 CSS 变量：--bg-opacity (0.90)、--card-opacity (0.60)、--card-blur (20px)、--card-saturate (180%)、--toolbar-blur (12px) - 顶栏毛玻璃效果：使用 var(--toolbar-blur) 和 var(--card-blur) 控制 - 卡片透明度：使用 var(--card-opacity) 统一控制所有卡片背景透明度 - 毛玻璃模糊：使用 var(--card-blur) 统一控制模糊半径 - 毛玻璃饱和度：使用 var(--card-saturate) 统一控制色彩饱和度 - 背景透明度：使用 var(--bg-opacity) 控制页面背景和下拉菜单等元素 - 移动端适配：自动计算适合移动端的模糊值（如 calc(var(--card-blur) / 3)） - 统一替换所有硬编码的 blur() 值为变量驱动 - 支持通过后台设置动态调整所有透明度和毛玻璃效果	2026-01-27 23:36:45 +08:00
nanhaoluo	549fec6a53	fix: 移除向后兼容代码并修复黑幕样式 - 移除 showLoadingOverlay 和 hideLoadingOverlay 向后兼容函数 - 直接使用 PageLoader.show() 和 PageLoader.hide() - 重构黑幕样式，添加文章内容选择器支持 - 优化夜间模式黑幕颜色（#1a1a1a） - 添加 article .entry-content 和 .article-content 选择器 - 确保黑幕在所有文章容器中正常显示 - 改进代码结构和注释	2026-01-27 16:56:32 +08:00
nanhaoluo	1eb5d85eaf	feat: 全新设计的现代化页面加载系统设计亮点： - SVG 圆环进度指示器，实时显示加载进度 - 智能进度算法：自动递增 + 缓动效果 - 中心旋转图标 + 脉冲动画 - 延迟显示骨架屏（避免快速加载时闪烁） - 最小显示时间控制（400ms）防止闪烁加载逻辑优化： - 智能进度管理：0-90% 自动递增，完成时跳转 100% - 缓动函数：越接近完成速度越慢，更自然 - 定时器管理：防止内存泄漏和状态冲突 - 骨架屏延迟 150ms 显示，快速加载不显示视觉设计： - 渐变背景 + 毛玻璃效果 - 弹性入场动画（scale + translateY） - 流畅的光影扫过效果 - 完整的响应式适配 - 支持无障碍访问（prefers-reduced-motion）	2026-01-27 16:52:11 +08:00
nanhaoluo	73103ea853	refactor: 重构加载动画代码，提升可维护性 JavaScript 重构： - 创建 LoadingOverlay 模块化管理器（IIFE 模式） - 封装元素创建、显示、隐藏和销毁逻辑 - 添加定时器管理，防止内存泄漏 - 提供向后兼容的函数接口 - 使用常量管理配置项（ID、类名、动画时长） - 改进代码注释和 JSDoc 文档 CSS 重构： - 统一类名前缀为 loading-*，语义更清晰 - 移除 ID 选择器依赖，改用类选择器 - 分离关注点：基础旋转器、进度条、遮罩层、骨架屏 - 添加结构化注释，便于定位和修改 - 优化选择器层级，提升性能 - 独立动画关键帧定义代码改进： - 减少重复代码，提高复用性 - 更好的错误处理和边界情况处理 - 支持多次调用不会重复创建元素 - 清晰的模块边界和职责划分	2026-01-27 16:46:13 +08:00
nanhaoluo	67d1465014	feat: 全面优化加载动画视觉效果 - 重新设计骨架屏布局：卡片式设计，包含缩略图、头像、标题、文本和标签 - 添加光影流动效果（shimmer）增强视觉吸引力 - 优化旋转器设计：双环结构 + 弹跳点动画 - 改进文字提示：更友好的加载文案 - 增强动画效果：缩放 + 位移的入场动画 - 完善响应式设计：适配平板和手机屏幕 - 优化夜间模式：更深的背景和更柔和的阴影 - 提升整体视觉层次感和现代感	2026-01-27 16:41:53 +08:00
nanhaoluo	7f79a14e3e	fix: 修复 jQuery 选择器语法错误并优化加载动画 - 增强 jQuery 选择器验证，防止空选择器和中文标点导致的语法错误 - 修复 'Syntax error, unrecognized expression' 报错 - 优化加载动画：动态创建 overlay 元素，无需在 HTML 中预定义 - 改进加载动画显示逻辑，添加骨架屏和加载提示文字 - 添加详细的函数注释说明	2026-01-27 16:35:36 +08:00