### 📄 修复文章卡片悬停效果失效问题

#### 问题描述
因为添加了文章卡片加载缩放显示，导致悬停上移效果失效了。具体表现为：
- 单排、一排三个布局（`.list-three` 和 `.layout-three`）的文章卡片
- 添加了滚动缩放动画后，悬停时的上移效果不再生效

#### 问题原因
1. **JS动画脚本**在卡片完全可见后设置了内联样式 `transform: scale(1)`（`shiroki-post-card-animation.js:69`）
2. **CSS悬停效果**定义了：
- `.list-three.post-list:hover {transform:translateY(-10px);}`（`style.css:1989`）
- `.layout-three .post-list:hover {transform: translateY(-10px);}`（`layout-three.css:34`）
3. 由于**内联样式优先级高于CSS样式**，导致悬停效果无法覆盖JS设置的内联样式

#### 解决方案
修改 `assets/js/shiroki-post-card-animation.js` 文件第69行：

**修改前：**
```javascript
card.style.transform = 'scale(1)';
```

**修改后：**
```javascript
card.style.transform = '';
```

通过将 `transform` 设置为空字符串，移除了内联样式，让CSS的悬停效果能够正常工作。

#### 修复效果
1. **缩放加载动画正常**：文章卡片在进入视口时仍然会从小到大的缩放动画效果
2. **悬停上移效果恢复**：当鼠标悬停在文章卡片上时，卡片会向上移动10px
3. **所有布局兼容**：无论是 `.list-three` 还是 `.layout-three` 布局的文章卡片，两种效果都能正常工作
4. **无限加载支持**：新加载的文章卡片也能正常应用这两种效果

#### 涉及文件
- `assets/js/shiroki-post-card-animation.js`（第69行）

### 📄 优化标题语法的样式
- **开发内容**：
- 将标题下划线改为圆角线条，并上移8px
- 实现悬停时下划线从两端向中间逐渐收起的动画效果
- 为标题添加悬停轻微放大动画
- **涉及文件**：
- `wp-content/themes/lolimeow-shiroki/assets/css/style.css`（第3066-3074行）
- **技术实现**：
- 使用 `::after` 伪元素创建独立的下划线元素
- 通过 `border-radius` 实现圆角线条效果
- 利用 `transform: scaleX()` 和 `transform-origin` 实现从中间向两侧收起的动画
- 添加 `transition` 实现平滑过渡效果
- 使用 `transform: scale()` 实现标题悬停放大效果

### 🎨 修复头像显示白色四边形占位图问题

**问题描述**：
- 刷新页面时，文章卡片、侧边栏和底部栏的作者头像会显示白色四边形占位图
- 头像加载完成后占位图才消失，影响用户体验
- 主要发生在使用菱形 `clip-path` 效果的头像上

**根本原因**：
- 头像使用 `lazy` 类进行懒加载，初始状态为 `opacity: 0`，`transform: scale(0.8)`
- 存在 `.shiroki-image-placeholder` 占位符样式
- 只有导航栏头像有懒加载例外处理，其他头像没有

**解决方案**：

1. **为所有头像添加懒加载例外样式**：确保头像在加载时保持可见
- `opacity: 1`，`transform: scale(1)`，`background: transparent`

2. **覆盖的头像类型**：
- 文章卡片头像（单排布局、三列布局）
- 侧边栏用户信息小部件头像
- 底部栏用户信息小部件头像
- 侧边栏和底部栏最新评论小部件头像
- 评论头像
- 单篇文章页面头像

3. **禁用图片占位符**：
- 禁用所有头像元素的 `.shiroki-image-placeholder`，避免白色遮罩层淡出效果

**修改的文件**：
- `assets/css/style.css` - 添加各种头像的懒加载例外样式
- `assets/css/layout-single.css` - 添加单排布局头像的懒加载例外样式
- `assets/css/layout-three.css` - 添加三列布局头像的懒加载例外样式
- `assets/css/shiroki-image-loader.css` - 添加所有头像的三种模式（普通、高性能、移动端）懒加载例外样式，禁用头像占位符

**技术细节**：
```css
/* 文章卡片头像懒加载占位图保持可见 */
.post-list-avatar img.lazy,
.post-list-avatar-img.lazy,
.list-one .avatar.lazy,
.list-three .avatar.lazy {
opacity: 1;
transform: scale(1);
background: transparent;
}

/* 侧边栏和底部栏用户信息小部件头像懒加载占位图保持可见 */
.blog-sidebar .widget-profile .profile-avatar img.lazy,
.footer-widgets .widget-profile .profile-avatar img.lazy,
.footer-bar .widget-profile .profile-avatar img.lazy {
opacity: 1;
transform: scale(1);
background: transparent;
}

/* 禁用头像元素的图片占位符 */
.single-meta .shiroki-image-placeholder,
.post-list-avatar .shiroki-image-placeholder,
.comment-avatar .shiroki-image-placeholder,
.blog-sidebar .widget-profile .profile-avatar .shiroki-image-placeholder {
display: none !important;
opacity: 0 !important;
}
```

### 🌸 优化重复请求资源的问题

**问题描述**：
- 懒加载图片时，每个图片都会先请求一次 `loading.gif`，导致大量重复请求
- 懒加载函数被多个触发源同时调用，导致同一图片在加载过程中被多次请求
- 图片加载状态管理不完善，可能导致重复请求

**解决方案**：

1. **根本解决**：将 `loading.gif` 替换为 Base64 编码的 1x1 透明 GIF，完全避免 HTTP 请求
- 修改 `boxmoe_lazy_load_images()` 函数，返回 Base64 占位符

2. **防止重复加载**：添加加载状态标记，确保每张图片只被加载一次
- 在 `loadImage` 函数中添加 `loading` 类标记
- 检查图片是否正在加载，避免重复请求
- 加载完成后移除 `loading` 类

3. **完善状态管理**：确保在各种情况下都能正确管理图片加载状态
- 图片加载成功时移除 `loading` 类
- 图片加载失败时移除 `loading` 类
- 图片不需要加载时移除 `loading` 类
- 在 `revealImage` 方法中移除 `loading` 类

**修改的文件**：
- `core/module/fun-basis.php` - 使用 Base64 占位符替代 `loading.gif`
- `assets/js/boxmoe.js` - 添加加载状态管理，防止重复请求

**技术细节**：
```php
// 旧代码
$src = boxmoe_theme_url().'/assets/images/loading.gif';

// 新代码
$src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
```

```javascript
// 添加加载状态检查
if (img.classList.contains('loaded') || img.classList.contains('loading')) {
return;
}
img.classList.add('loading');
```

**优化效果**：
- 完全消除了 `loading.gif` 的重复请求
- 减少了不必要的网络请求，提高页面加载速度
- 避免了图片重复加载，降低服务器负载
- 改善了用户体验，减少了页面加载时的闪烁

### 🎉 优化语法样式

#### 链接图标样式优化
- **文件**：`wp-content/themes/lolimeow-shiroki/assets/js/shiroki-link-icon-shiroki.js`
- **修改内容**：
- 将链接图标颜色从蓝色(`#0072ff`)改为灰色半透明(`rgba(128, 128, 128, 0.5)`)
- 添加图标悬停效果：鼠标悬停时从灰色半透明平滑过渡为蓝色
- 增强过渡动画，同时包含颜色和旋转效果

#### 短代码样式优化
- **文件**：`wp-content/themes/lolimeow-shiroki/assets/css/style.css`
- **修改内容**：
- 移除 `

#### 交互体验增强
- 所有修改均保持原有功能不变，仅增强视觉效果和交互体验
- 悬停动画采用统一的时间曲线，确保页面动画一致性
- 优化了短代码元素的视觉层次感，提升用户浏览体验

### 🕊️ 评论区新增颜表情
- **修改文件**：`wp-content/themes/lolimeow-shiroki/assets/js/comments.js`
- **新增颜文字**：Ciallo～(∠・ω< )⌒☆、ԅ(¯﹃¯ԅ)、（¯﹃¯）、(ノへ￣、)、d=====(￣▽￣*)b、[]~(￣▽￣)~*、○|￣|_、Σ( ° △ °|||)︴、o((⊙﹏⊙))o.、✧(≖ ◡ ≖✿)、(￣_,￣ )、￣へ￣ - **位置**：添加到评论区自定义颜文字列表中 - **功能**：用户在评论时可通过表情面板的"颜文字"标签页使用该表情         ### 🚀 更改外观中的菜单名称 #### 开发内容 1. **将后台外观菜单中的"菜单"改为"导航栏设置"** - 修改文件：`core/module/fun-admin.php` - 实现方式：通过修改菜单名称和翻译文本，将"菜单"显示为"导航栏" 2. **将导航栏设置从外观子菜单移到盒子萌主题设置的子菜单中** - 修改文件：`core/module/fun-submenu.php` - 实现方式：移除外观菜单中的"导航栏设置"子菜单，将其添加为盒子萌主题设置的子菜单 #### 开发效果 - WordPress后台外观菜单中的"菜单"选项不再显示 - 盒子萌主题设置子菜单中新增"导航栏设置"选项 - 保持了主题设置的集中管理，方便用户使用 #### 修改详情 - 在 `fun-admin.php` 中，修改了菜单名称翻译和显示逻辑 - 在 `fun-submenu.php` 中，添加了移除和重新添加子菜单的代码 - 确保所有相关文件中的菜单名称保持一致 ### 🎈 将页面小部件更名为右侧/底部栏卡片 - 在 `fun-admin.php` 中，通过 `boxmoe_rename_widgets_and_menu()` 和 `boxmoe_rename_widgets_and_menu_label()` 函数修改了后台菜单中"小部件"的名称为"右侧/底部栏卡片" - 在 `fun-submenu.php` 中，将小部件子菜单的标题从"Widgets"修改为"右侧/底部栏卡片"，并作为主题设置的子菜单 - 确保所有相关文件中的菜单名称保持一致，提升用户体验         ### 👤 修改移动端的卡片作者显示位置 **修改文件**：`wp-content/themes/lolimeow-shiroki/assets/css/style.css` **修改内容**： 1. **超小屏幕下三列布局优化**（第1264-1269行）： - 将 `.list-three .post-meta` 的 `flex-direction` 从 `column` 改为 `row` - 调整 `align-items` 为 `center` - 优化 `gap` 间距，从 5px 调整为 8px 2. **调整超小屏幕下post-meta-info布局**（第1300-1303行）： - 将 `.list-three .post-meta-info` 的 `width:100%` 改为 `flex:1; min-width:0;` - 使其在 flex 布局中占据剩余空间，确保头像和元信息正确排列 **修改效果**： - 在移动端（特别是超小屏幕，max-width:576px）上，文章卡片的作者头像现在显示在 `post-meta-info` 的左边 - 形成水平排列的布局，提升了移动端的视觉效果和空间利用率 - 保持了垂直居中对齐，使整体布局更加美观         ### 🔠 调整移动端的暗色/亮色模式的文本 #### 问题描述 - 移动端暗色/亮色模式切换按钮在小屏幕上显示过宽 - 文本可能会出现换行问题 - 整体布局不够紧凑，影响用户体验 #### 解决方案 1. **优化基础样式** - 为主题切换容器添加 `white-space: nowrap;` 防止元素换行 - 优化按钮布局，调整间距并添加垂直居中对齐 - 为按钮添加文本溢出处理，确保文本不会换行 2. **移动端响应式优化** - 添加 `@media (max-width: 767px)` 媒体查询 - 减小容器边距和内边距 - 减小按钮间距、内边距和字体大小 - 设置合适的按钮最小宽度，确保文本完整显示 - 为"跟随系统"选项设置稍大的最小宽度 3. **超小屏幕适配** - 添加 `@media (max-width: 375px)` 媒体查询 - 进一步减小容器最大宽度 - 再次优化按钮大小和字体，确保在超小屏幕上正常显示 4. **暗色模式适配** - 为暗色模式下的主题切换按钮添加适当的背景色和边框颜色 - 调整文本颜色，确保在暗色背景下的可读性 #### 具体修改 - **文件**: `assets/css/style.css` - **修改内容**: - 优化 `.boxmoe_header .lighting` 样式 - 优化 `.boxmoe_header .lighting ul` 布局 - 优化 `.boxmoe_header .lighting li` 样式 - 添加移动端和超小屏幕的媒体查询 - 添加暗色模式下的样式适配 #### 效果 - 移动端主题切换按钮在各种屏幕尺寸上都能紧凑显示 - 文本不再出现换行问题 - 整体布局更加美观，提升用户体验 - 暗色模式下显示效果良好         ### 🦈 媒体库支持更多文件格式 **实现功能**：扩展WordPress媒体库支持的文件格式，包括图片、视频、音频、文档、程序、代码等多种类型。 **支持的文件格式分类**： **🖼️ 图片格式**：WebP、AVIF、BMP、TIFF、PSD、AI、EPS、RAW、DNG、HEIC、HEIF等 **📹 视频格式**：MP4、WebM、OGG、AVI、WMV、MOV、FLV、MKV、MPG、MPEG、M4V、3GP等 **🎵 音频格式**：MP3、WAV、OGG、FLAC、M4A、WMA、AAC等 **📁 文档格式**：Word（doc、docx）、Excel（xls、xlsx）、PowerPoint（ppt、pptx）、PDF、TXT、RTF、MD、JSON、XML、YAML、CSV等 **🖥️ 程序格式**：ZIP、RAR、7Z、TAR、GZ、BZ2、EXE、DLL、MSI、DEB、RPM、DMG、ISO、IMG等 **🔧 代码文件格式**：PHP、JS、JSX、TS、TSX、CSS、SCSS、SASS、LESS、HTML、PY、JAVA、C、CPP、CS、GO、RUST、SWIFT、KOTLIN、LUA、RUBY、PERL、SHELL、POWERSHELL等 **🎮 游戏相关格式**：Unity3D、Blender、OBJ、FBX、GLTF、GLB、3DS、3DS Max等 **📱 移动设备相关格式**：APK、IPA、APP、DYLIB等 **实现方法**：在 `wp-content/themes/lolimeow-shiroki/functions.php` 文件中添加 `boxmoe_extend_media_library_formats` 函数，通过 `upload_mimes` 过滤器扩展支持的文件格式。 **验证结果**：代码验证通过，无语法错误，媒体库现在可以上传和管理上述所有格式的文件。         ### 🔒 修复页面密码页面能直接访问 **问题描述**：页面设置密码保护后，用户无需输入密码就能直接访问页面内容，密码保护功能失效。 **问题原因**： 1. 主题的Markdown过滤器会尝试对密码保护表单进行Markdown转换，导致表单被破坏 2. 自定义页面模板直接输出内容，没有检查页面是否受密码保护 **实现方法**： 1. **修复Markdown过滤器**（`core/module/fun-markdown.php`）： - 在 `boxmoe_md_the_content` 函数中添加密码保护表单检测 - 在 `boxmoe_markdown_to_html` 函数中添加类似检测 - 确保密码保护表单不会被Markdown转换处理 2. **为自定义页面模板添加密码保护检查**： - `page-friendlink-shiroki.php`：在文件开头添加密码保护检查 - `p-links.php`：在文件开头添加密码保护检查 - `page-friendlink.php`：在文件开头添加密码保护检查 - 检查逻辑：使用 `post_password_required()` 函数，如需要密码则显示密码表单 3. **优化密码保护表单文本**（`functions.php`）： - 修改 `custom_password_protected_form` 函数 - 根据post类型显示不同的文本： - 页面类型：标题"该页面受密码保护"，输入框提示"请输入密码查看本页面" - 文章类型：标题"该文章受密码保护"，输入框提示"请输入密码查看本文内容" **验证结果**：代码验证通过，无语法错误。现在页面设置密码保护后，用户必须输入正确的密码才能访问页面内容，密码保护功能正常工作。同时，页面和文章显示不同的密码保护表单文本，提升了用户体验。         ### 🌸 自定义后台主题UI色 #### 配色方案调整 - **原始配色**：粉色系渐变 - **新配色**：半透明黑色渐变灰白色 - **渐变方案**： - 黑色渐变：`rgba(0, 0, 0, 0.7) → rgba(102, 102, 102, 0.8)` - 灰色渐变：`rgba(245, 245, 245, 0.95) → rgba(208, 208, 208, 0.85)` #### CSS变量系统搭建 - **创建变量文件**：`assets/css/admin/admin-shiroki.css` - **定义变量类型**： - 粉色系：`--shiroki-pink-light`, `--shiroki-pink-medium`, `--shiroki-pink-dark`, `--shiroki-pink-deep` - 灰色系：`--shiroki-gray-light`, `--shiroki-gray-medium`, `--shiroki-gray-dark` - 黑色系：`--shiroki-black-light`, `--shiroki-black-medium`, `--shiroki-black-dark` - 白色系：`--shiroki-white` - 渐变定义：`--shiroki-gradient-pink`, `--shiroki-gradient-gray`, `--shiroki-gradient-black`等 - 阴影：`--shiroki-shadow-pink`, `--shiroki-shadow-black` #### 文件修改清单 ##### 变量文件 - **文件**：`assets/css/admin/admin-shiroki.css` - **功能**：定义所有CSS变量，实现配色集中管理 ###### 后台样式文件 - **文件**：`assets/css/admin-flat-rounded.css` - **修改**： - 引入变量文件：`@import url('admin/admin-shiroki.css');` - 替换所有硬编码颜色为CSS变量 - 调整顶部管理栏、侧边栏、按钮、表格等样式 - 同步媒体按钮区域与Markdown工具栏背景色 ###### Markdown编辑器样式 - **文件**：`assets/css/markdown-editor.css` - **修改**： - 引入变量文件：`@import url('admin/admin-shiroki.css');` - 替换所有硬编码颜色为CSS变量 - 调整工具栏、按钮、预览区域等样式 ###### 视觉一致性优化 - **同步区域**： - Markdown工具栏 (`boxmoe-md-toolbar`) - 媒体按钮区域 (`#wp-content-media-buttons`) - 短代码选择器 (`boxmoe-md-shortcodes`) - **统一样式**：使用相同的半透明灰色渐变背景 ##### 技术亮点 - **模块化**：通过CSS变量实现配色集中管理 - **可维护性**：修改配色只需更新变量文件 - **一致性**：确保整个后台界面视觉统一 - **响应式**：半透明渐变适配不同背景