🖼️ 图片加载优化

文件位置: assets/js/boxmoe.js · assets/css/style.css · assets/css/shiroki-image-loader.css

🎯 优化目标

优化Banner和文章封面的图片加载体验，实现静默预加载、渐显动画效果，将闪烁光效果改为纯色背景，提升视觉体验和性能。

🔧 实现方法

1. 实现静默预加载系统：创建了ShirokiImageLoader类，实现并发控制、智能缓存和队列管理
2. 优化图片渐显动画：添加了从模糊到清晰、从小到大的平滑过渡效果
3. 简化加载逻辑：简化了Banner和文章封面的加载逻辑，确保图片正确显示
4. 将闪烁光改为纯色：移除了线性渐变动画，改为简洁的纯色背景

✏️ 具体修改内容

1. 创建ShirokiImageLoader类：

- 实现并发控制，限制最大并发加载数为6
- 智能缓存机制，缓存时间为5分钟
- 队列管理，避免网络拥塞
- 性能监控，仅在开发环境启用

1. 优化CSS样式：

- 将.shiroki-image-placeholder的线性渐变背景改为纯色var(--bs-light)
- 删除了shiroki-skeleton-loading和shiroki-shimmer动画
- 完美适配暗色模式
- 优化了动画过渡效果

1. 简化加载逻辑：

- 简化了initBannerImage函数，确保Banner图片正确显示
- 简化了initPostCoverImages函数，优化文章封面加载
- 确保图片初始可见，避免样式冲突

🎨 实现效果

• ✅ 图片完全预加载后优雅显示
• ✅ 从小到大的缩放动画，模糊到清晰的过渡
• ✅ 纯色背景占位符，不再有闪烁光效果
• ✅ 智能并发控制，不影响页面其他资源加载
• ✅ 完美适配暗色模式
• ✅ 减少了性能消耗

📝 技术要点

• 使用Intersection Observer实现懒加载
• 采用Promise和async/await处理异步加载
• 硬件加速，提升动画性能
• 开发环境与生产环境分离
• 完善的错误处理机制

🎯 Banner修复

文件位置: assets/js/boxmoe.js

🎯 修复目标

修复Banner图片丢失的问题，确保Banner图片能够正确显示，同时保留优雅的加载动画效果。

🔧 实现方法

1. 简化加载逻辑：移除了复杂的静默加载逻辑
2. 确保初始可见：确保Banner容器和图片初始可见
3. 优化事件处理：简化了事件监听和处理逻辑
4. 添加占位符：保持了优雅的占位符效果

✏️ 具体修改内容

1. 简化initBannerImage函数：

- 移除了复杂的静默加载逻辑
- 确保Banner容器和图片初始可见
- 简化了事件监听
- 保留了占位符效果

1. 优化CSS样式：

- 确保关键样式生效
- 避免样式冲突
- 保持动画效果

🎨 实现效果

• ✅ Banner图片能够正确显示
• ✅ 保留了优雅的加载动画
• ✅ 简化了代码逻辑
• ✅ 降低了出错概率

📝 技术要点

• 确保CSS样式优先级正确
• 简化JavaScript逻辑
• 完善的错误处理
• 兼容各种浏览器环境

🧹 开发环境清理

文件位置: functions.php · 相关测试文件

🎯 清理目标

移除开发环境的测试脚本和相关文件，保持代码简洁，减少文件数量。

🔧 实现方法

1. 移除测试脚本加载代码：从functions.php中删除了测试脚本的加载代码
2. 删除测试文件：删除了相关的测试和调试文件
3. 清理代码：确保生产环境代码干净整洁

✏️ 具体修改内容

1. 移除functions.php中的测试脚本加载代码：

- 删除了shiroki-image-test.js的加载代码
- 删除了banner-debug.js的加载代码
- 清理了相关注释和空行

1. 删除测试和调试文件：

- assets/js/shiroki-image-test.js
- assets/js/banner-debug.js
- assets/css/banner-fix.css
- banner-test.html

🎨 实现效果

• ✅ 移除了不必要的测试代码
• ✅ 减少了文件数量
• ✅ 保持了代码简洁性
• ✅ 便于后续维护

📝 技术要点

• 开发环境与生产环境分离
• 保持代码整洁
• 便于版本控制

🎨 闪烁光效果改为纯色

文件位置: assets/css/style.css · assets/css/shiroki-image-loader.css

🎯 优化目标

将图片加载时的闪烁光效果改为纯色背景，提升视觉体验，减少性能消耗。

🔧 实现方法

1. 修改CSS样式：将线性渐变背景改为纯色
2. 移除动画：删除了闪烁光动画
3. 适配暗色模式：确保在暗色模式下显示正确

✏️ 具体修改内容

1. 修改style.css文件：

- 将.shiroki-image-placeholder的线性渐变背景改为纯色var(--bs-light)
- 删除了shiroki-skeleton-loading动画
- 添加了暗色模式适配

1. 修改shiroki-image-loader.css文件：

- 将.shiroki-image-placeholder的线性渐变背景改为纯色var(--bs-light)
- 删除了shiroki-shimmer动画
- 保留了暗色模式适配

🎨 实现效果

• ✅ 背景为纯色，简洁干净
• ✅ 没有闪烁效果，视觉体验更好
• ✅ 减少了性能消耗
• ✅ 完美适配暗色模式

📝 技术要点

• 简化CSS样式
• 移除不必要的动画
• 提升性能
• 适配暗色模式

文章编辑页分类下拉框重复显示问题

🎯 修复目标

修复文章编辑页点击「添加分类」后出现两个下拉框的问题，确保WordPress核心分类添加功能正常工作，同时保持主题select美化功能的完整性。

🔧 实现方法

修改了 wp-content/themes/lolimeow-shiroki/assets/js/admin-select-ui.js 文件，优化了select元素美化脚本的排除规则。

✏️ 具体修改内容

1. 添加重复处理检查：

- 在 initBoxmoeSelect 函数中添加了检查机制，防止重复美化已经处理过的select元素
- 使用 $this.closest('.boxmoe-select-wrapper').length > 0 判断元素是否已经被美化

1. 优化分类添加区域排除规则：

- 新增了针对文章编辑页分类添加区域的select元素排除逻辑
- 使用 $this.closest('.category-add').length > 0 排除添加分类区域的select
- 使用 $this.closest('#category-adder').length > 0 排除链接分类添加区域的select

1. 增强代码可读性：

- 优化了注释，将排除规则按功能分组
- 添加了清晰的注释说明每个排除规则的作用

🎨 实现效果

• ✅ 文章编辑页点击「添加分类」后不再出现两个下拉框
• ✅ 保持了WordPress核心分类添加功能的原生样式和行为
• ✅ 主题select美化功能仍然正常工作，美化其他select元素
• ✅ 修复了链接分类添加区域的同样问题
• ✅ 代码更加健壮，防止重复处理

📝 技术要点

• 问题根源：主题select美化脚本在AJAX完成后重新初始化所有select元素，导致动态生成的分类下拉框被重复美化
• 解决方案：在美化脚本中添加排除规则，避免处理WordPress核心功能的select元素
• 实现机制：使用jQuery的closest方法检查元素是否位于特定区域内
• 兼容性：确保修复不会影响其他功能，保持主题的完整性

✉️ SMTP设置迁移到盒子萌主题设置子菜单

文件位置: core/module/fun-smtp.php

🎯 修复目标

将SMTP设置从独立的顶级菜单迁移到盒子萌主题设置的子菜单中，并确保它显示在页面小部件下面，优化后台菜单结构。

🔧 实现方法

1. 修改菜单注册函数：将add_menu_page替换为add_submenu_page
2. 设置正确的父菜单slug：使用boxmoe_options作为父菜单slug
3. 调整注册优先级：确保SMTP设置在页面小部件之后注册
4. 删除无效位置参数：移除不再起作用的位置参数

✏️ 具体修改内容

1. 将顶级菜单改为子菜单：

- 删除了使用add_menu_page注册SMTP设置的代码
- 改为使用add_submenu_page将SMTP设置注册为盒子萌主题设置的子菜单
- 设置父菜单slug为boxmoe_options

1. 调整注册优先级：

- 将admin_menu钩子的优先级从默认值（10）提高到11
- 确保SMTP设置在页面小部件（优先级10）之后注册
- 解决了WordPress 5.3+版本中位置参数失效的问题

1. 优化菜单显示顺序：

- 利用注册顺序控制子菜单显示位置
- 确保SMTP设置显示在页面小部件下面
- 保持菜单结构的合理性和易用性

🎨 实现效果

• ✅ SMTP设置从独立顶级菜单迁移到盒子萌主题设置子菜单
• ✅ SMTP设置正确显示在页面小部件下面
• ✅ 后台菜单结构更加清晰和集中
• ✅ 保持了原有SMTP设置的所有功能
• ✅ 优化了用户在后台的操作体验

📝 技术要点

• 问题根源：WordPress 5.3+版本中，add_submenu_page的位置参数已经不再起作用
• 解决方案：通过调整admin_menu钩子的优先级来控制子菜单的注册顺序
• 实现机制：利用注册顺序决定子菜单的显示顺序
• 兼容性：确保修复兼容所有WordPress版本

👤 修复导航会员注册链接开关功能

文件位置: header.php · core/widgets/widget-currentuser.php · core/module/fun-basis.php · assets/js/boxmoe.js

🎯 修复目标

1. 修复当【开启导航会员注册链接】没开启时，在前端显示用户模块（包括登录/注册模块）的问题
2. 修复当【开启导航会员注册链接】开启时，移动端的用户图标点击没用出现下拉框的问题

🔧 实现方法

修复1：开关关闭时前端显示用户模块问题

1. 添加条件判断：在header.php中为移动端用户按钮添加开关检查
2. 小部件优化：在当前用户信息小部件中添加开关检查
3. 确保开关功能一致：移动端和桌面端都遵守开关设置

修复2：移动端用户图标点击不出现下拉框问题

1. 添加点击事件处理：在renderLoginUI函数中为移动端用户按钮添加完整的点击事件处理逻辑
2. 实现下拉菜单控制：添加下拉菜单的显示/隐藏切换功能
3. 优化用户体验：添加点击外部关闭下拉菜单的功能
4. 修复代码问题：修复重复声明变量的问题

✏️ 具体修改内容

修复1：开关关闭时前端显示用户模块问题

1. 修改header.php：

- 为移动端用户按钮添加条件判断，只有当开关开启时才显示
- 代码位置：header.php:113-117

1. 修改widget-currentuser.php：

- 为当前用户信息小部件添加开关检查，只有当开关开启时才显示
- 代码位置：widget-currentuser.php:26-29

修复2：移动端用户图标点击不出现下拉框问题

1. 修改fun-basis.php：

- 将导航会员注册链接开关状态添加到ajax_object中，让JavaScript能够访问该设置
- 代码位置：fun-basis.php:182

1. 修改boxmoe.js：

- 在renderLoginUI函数中，为移动端用户按钮添加点击事件处理逻辑
- 实现下拉菜单的显示/隐藏切换功能
- 添加点击外部关闭下拉菜单的功能
- 设置初始状态为隐藏
- 修复重复声明signInLinkSwitch变量的问题

🎨 实现效果

修复1：开关关闭时前端显示用户模块问题

• ✅ 当【开启导航会员注册链接】开关关闭时，前端不显示任何用户模块
• ✅ 移动端和桌面端都遵守开关设置
• ✅ 当前用户信息小部件也只在开关开启时显示

修复2：移动端用户图标点击不出现下拉框问题

• ✅ 当【开启导航会员注册链接】开关开启时，移动端用户图标点击可以正常显示下拉框
• ✅ 下拉菜单可以正常显示/隐藏切换
• ✅ 点击外部可以关闭下拉菜单
• ✅ 初始状态为隐藏，符合用户体验

📝 技术要点

1. 开关状态管理：通过get_boxmoe函数获取开关状态，并在前端和小部件中使用
2. JavaScript与PHP交互：通过wp_localize_script将开关状态传递给JavaScript
3. 事件处理：使用addEventListener为DOM元素添加点击事件监听器
4. 下拉菜单控制：通过修改CSS样式（display属性）来控制下拉菜单的显示/隐藏
5. 代码优化：修复重复声明变量的问题，确保代码质量

🏞️ 修复桌面端用户模块图片显示问题

文件位置: assets/js/boxmoe.js

🎯 修复目标

修复桌面端用户模块中up-new-iocn.png图片刷新后闪烁并消失的问题

🔧 实现方法

1. 分析问题原因：JavaScript动态生成桌面端用户登录/注册按钮时，没有包含new-tag图片，导致原始图片被替换掉
2. 添加图片元素：在动态生成的HTML中添加new-tag图片元素
3. 确保路径正确：使用已定义的themeUrl变量获取正确的图片路径

✏️ 具体修改内容

1. 修改boxmoe.js：

- 在动态生成的桌面端用户登录/注册按钮HTML中添加new-tag图片
- 代码位置：boxmoe.js:1656
- 添加内容：

🎨 实现效果

• ✅ 桌面端用户模块中的up-new-iocn.png图片正常显示
• ✅ 刷新页面后图片不会消失
• ✅ 图片显示位置和样式与设计一致
• ✅ 保持了与原始HTML结构的兼容性

📝 技术要点

1. 动态HTML生成：了解JavaScript动态生成HTML的过程和影响
2. DOM操作：掌握使用JavaScript创建和修改DOM元素的方法
3. 变量作用域：正确使用已定义的变量获取资源路径
4. 代码一致性：确保动态生成的HTML与原始HTML结构保持一致

👤 修复置顶文章显示与重复问题

文件位置: core/module/fun-article.php · page/template/blog-list.php · assets/js/boxmoe.js

🎯 修复目标

修复【文章列表分页模式】为无限加载时，不显示置顶文章和出现重复文章的问题，确保置顶文章只在第一页显示，不会在后续请求中重复出现。

🔧 实现方法

采用了三层防御机制来解决问题：

1. PHP查询层面修复：优化 boxmoe_custom_post_order 函数，精确控制 post__not_in 参数
2. 模板层面修复：添加已显示文章ID检查，防止模板渲染时显示重复文章
3. JavaScript无限加载层面修复：在无限加载逻辑中添加重复文章检查

✏️ 具体修改内容

1. PHP查询层面修复 (fun-article.php):

- 修改了 boxmoe_custom_post_order 函数，确保置顶文章在第一页显示
- 在分页请求中，使用 post__not_in 参数排除所有置顶文章
- 确保置顶文章只在第一页显示，不会在后续请求中重复出现

1. 模板层面修复 (blog-list.php):

- 添加了 $displayed_post_ids 数组，用于记录已显示的文章ID
- 在文章循环中，检查当前文章是否已经显示过，如果是则跳过
- 确保模板渲染时不会显示重复文章

1. JavaScript无限加载层面修复 (boxmoe.js):

- 添加了 displayedPostIds 集合，用于记录已显示的文章ID
- 在加载新文章前，从已显示的文章链接中提取文章ID
- 在添加新文章到页面前，检查文章是否已经显示过
- 从文章链接中提取文章ID，用于检查是否重复
- 如果没有添加新文章，结束加载过程

🎨 实现效果

• ✅ 置顶文章会正确显示在第一页
• ✅ 后续的无限加载请求不会包含重复文章
• ✅ 完美兼容分类筛选功能
• ✅ 具有三层防御机制，确保不会出现重复文章
• ✅ 提高了无限加载的效率，避免了无效请求

📝 技术要点

• WordPress会自动将 post__not_in 中未排除的置顶文章显示在查询结果的最前面
• 通过精确控制 post__not_in 参数，确保置顶文章只在第一页显示
• 在模板和JavaScript中添加重复文章检查，形成三层防御
• 使用Set数据结构提高重复检查的效率
• 确保在各种情况下，包括首页没有分类筛选、归档页和搜索页，置顶文章都能被正确处理