🔧 [ downloadbtn]短代码渲染问题修复

文件位置: wp-content/themes/lolimeow-shiroki/core/module/fun-shortcode.php · wp-content/themes/lolimeow-shiroki/core/module/fun-markdown.php · wp-content/themes/lolimeow-shiroki/core/module/fun-article.php

🔍 问题描述

当在文章中使用[ downloadbtn]短代码时，前端渲染会出现多余的>arm64（不支持32）文本，影响页面美观和用户体验。

🔧 修复内容

1. Markdown处理顺序优化：

– 将boxmoe_md_the_content函数的优先级从9调整为12 – 确保Markdown处理器在WordPress短代码处理（默认优先级11）之后执行 – 避免Markdown处理器错误处理短代码内容

2. 添加短代码到no_texturize_shortcodes过滤器：

– 将downloadbtn及其他相关短代码添加到no_texturize_shortcodes过滤器 – 防止WordPress的wptexturize函数错误处理短代码内容 – 确保短代码前后的特殊字符（如>）不会被错误转换为HTML实体

3. 修复boxmoe_external_link_redirect函数：

– 改进了a标签属性提取逻辑 – 使用正则表达式精确匹配a标签的属性部分 – 避免了属性提取过程中产生无效HTML – 确保外部链接跳转功能正常工作

📋 代码优化要点

1. 优先级调整：

// 原代码
   add_filter('the_content', 'boxmoe_md_the_content', 9);
   
   // 修改为
   add_filter('the_content', 'boxmoe_md_the_content', 12);
   

2. 短代码过滤器添加：

add_filter( 'no_texturize_shortcodes', function( $shortcodes ) {
       $shortcodes[] = 'precode';
       $shortcodes[] = 'downloadbtn';
       $shortcodes[] = 'linksbtn';
       // 其他短代码...
       return $shortcodes;
   });
   

3. 外部链接函数修复：

– 使用精确的正则表达式提取a标签属性 – 正确处理href属性前后的其他属性 – 确保生成的HTML格式正确

🔍 代码寻找

• 短代码定义：wp-content/themes/lolimeow-shiroki/core/module/fun-shortcode.php
• Markdown处理：wp-content/themes/lolimeow-shiroki/core/module/fun-markdown.php
• 外部链接处理：wp-content/themes/lolimeow-shiroki/core/module/fun-article.php

✅ 优化效果

• ✅ 修复了[ downloadbtn]短代码渲染时出现的多余文本问题
• ✅ 确保短代码在各种场景下都能正确渲染
• ✅ 保持了Markdown和短代码功能的完整性
• ✅ 修复了外部链接跳转功能
• ✅ 提高了代码的可维护性和稳定性

⏱️ 时间线悬停覆盖色圆角优化

文件位置: wp-content/themes/lolimeow-shiroki/assets/css/style.css

🔧 修复内容

1. 悬停覆盖色圆角优化：

– 将时间线事件缩略日期的悬停覆盖色从方形改为圆角样式 – 为.timeline-event-thumbnail类添加了border-radius属性 – 设置了20px的圆角半径，使悬停效果更加柔和美观 – 同时添加了浏览器兼容性前缀，确保在各种浏览器中都能正常显示

📋 代码优化要点

1. CSS样式优化：

– 为.timeline-event-thumbnail类添加了border-radius: 20px; – 添加了浏览器兼容性前缀-moz-border-radius和-webkit-border-radius – 确保样式在各种浏览器中都能正常生效

🔍 代码寻找

• 时间线样式：wp-content/themes/lolimeow-shiroki/assets/css/style.css
• 具体位置：.single-content .timeline-event-thumbnail类定义

✅ 优化效果

• ✅ 时间线悬停覆盖色从方形改为圆角样式
• ✅ 圆角半径为20px，效果柔和美观
• ✅ 支持浏览器兼容性前缀
• ✅ 保持了原有的悬停动画和颜色效果
• ✅ 与现代设计趋势保持一致

       

🎨 blockquote1和blockquote2边框样式优化

文件位置: wp-content/themes/lolimeow-shiroki/assets/css/style.css

🔧 优化内容

1. 边框圆角优化：

– 将

和

短代码的边框从方形改为圆角样式 – 为.quote blockquote和.animated-border-quote blockquote类添加了border-radius: 10px属性 – 使引用块的外观更加柔和美观，与主题的漫画风格保持一致

2. 悬停上移动画：

– 为

和

短代码添加了悬停上移动画效果 – 为.quote和.animated-border-quote类添加了transition: all 0.3s ease属性 – 添加了:hover { transform: translateY(-5px) }样式，使引用块在鼠标悬停时平滑向上移动 – 同时为内部的blockquote元素也添加了过渡效果，确保整个引用块的动画流畅自然

📋 代码优化要点

1. CSS样式优化：

– 为.single-content .quote类添加了transition: all 0.3s ease和悬停上移效果 – 为.animated-border-quote类添加了transition: all 0.3s ease和悬停上移效果 – 为两个引用块的blockquote元素添加了border-radius: 10px属性 – 确保样式在各种浏览器中都能正常生效

🔍 代码寻找

• 引用块样式：wp-content/themes/lolimeow-shiroki/assets/css/style.css
• 具体位置：.single-content .quote blockquote和.animated-border-quote blockquote类定义

✅ 优化效果

• ✅
  和
  短代码的边框从方形改为圆角样式
• ✅ 圆角半径为10px，外观柔和美观
• ✅ 添加了悬停上移动画效果，提升用户体验
• ✅ 动画过渡时间为0.3秒，效果流畅自然
• ✅ 与主题的漫画风格保持一致
• ✅ 适配浅色和深色模式

       

🎈 Alert短代码悬停动画与阴影效果优化

文件位置: wp-content/themes/lolimeow-shiroki/assets/css/style.css

🔧 优化内容

1. 悬停上移动画：

– 为所有

短代码添加了悬停上移动画效果 – 为.single-content .alert类添加了transition: all 0.3s ease属性 – 添加了:hover { transform: translateY(-5px) }样式，使alert在鼠标悬停时平滑向上移动 – 动画过渡时间为0.3秒，效果流畅自然

2. 阴影效果优化：

– 为亮色模式下的alert添加了半透明黑色阴影：box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) – 为暗色模式下的alert添加了半透明白色阴影：box-shadow: 0 8px 24px rgba(255, 255, 255, 0.15) – 确保阴影效果与当前主题模式保持一致，提升视觉层次感

📋 代码优化要点

1. CSS样式优化：

– 使用了.single-content .alert选择器，确保只对文章内容中的alert生效 – 为所有alert元素添加了position: relative和overflow: hidden属性，确保阴影效果正常显示 – 为亮色和暗色模式分别定义了不同的阴影颜色，提升了主题适配性 – 确保样式在各种浏览器中都能正常生效

🔍 代码寻找

• Alert样式：wp-content/themes/lolimeow-shiroki/assets/css/style.css
• 具体位置：.single-content .alert类定义及相关媒体查询

✅ 优化效果

• ✅ 所有
  短代码在悬停时平滑上移5px
• ✅ 亮色模式下显示半透明黑色阴影，增强视觉层次感
• ✅ 暗色模式下显示半透明白色阴影，适配主题风格
• ✅ 动画过渡时间为0.3秒，效果流畅自然
• ✅ 与主题的漫画风格保持一致
• ✅ 适配浅色和深色模式

       

🔗 友链页面优化

文件位置: wp-content/themes/lolimeow-shiroki/page/p-links.php · wp-content/themes/lolimeow-shiroki/assets/css/style.css · wp-content/themes/lolimeow-shiroki/functions.php

🔧 修复内容

1. 友链点击数显示修复：

– 修复了友链页面自动生成固定span数值的问题 – 将硬编码的0替换为动态显示实际点击计数的代码 – 使用了$link->link_clicked属性获取点击次数 – 添加了isset()检查，避免出现Undefined property: stdClass::$link_clicked警告

2. 点击数位置优化：

– 将点击数从卡片底部移到了友链名称的右侧 – 使用flex布局实现友链名称和点击数的两端对齐 – 为点击数添加了适当的间距和样式 – 确保点击数与友链名称在同一行显示

3. 悬停上移效果：

– 为友链卡片添加了悬停上移效果 – 当鼠标悬停在友链卡片上时，卡片向上移动5px – 使用了cubic-bezier(0.345,0.045,0.345,1)缓动函数 – 过渡时间为0.4秒，效果流畅自然

📋 代码优化要点

1. HTML结构优化：

– 将点击数放在h3标签内，与友链名称同级 – 使用了语义化的HTML结构 – 确保代码的可读性和可维护性

2. CSS样式优化：

– 使用flex布局实现点击数的定位 – 为友链卡片添加了transform过渡效果 – 优化了点击数的样式，包括字体大小、背景色和圆角 – 适配了浅色和深色模式

3. PHP代码优化：

– 添加了isset()检查，避免undefined property警告 – 使用了esc_html()函数确保输出安全 – 优化了代码的结构和可读性

🔍 代码寻找

• 友链页面模板：wp-content/themes/lolimeow-shiroki/page/p-links.php
• CSS样式：wp-content/themes/lolimeow-shiroki/assets/css/style.css
• 主题函数：wp-content/themes/lolimeow-shiroki/functions.php

✅ 优化效果

• ✅ 友链点击数显示实际的点击次数，不再是固定的0
• ✅ 解决了Undefined property: stdClass::$link_clicked警告
• ✅ 点击数显示在友链名称的右侧，布局更加合理
• ✅ 友链卡片悬停时向上移动5px，增强了交互体验
• ✅ 动画效果流畅自然，使用了合适的缓动函数
• ✅ 适配了浅色和深色模式
• ✅ 代码结构优化，可读性和可维护性提高

       

📋 小部件注册逻辑修复

文件位置: core/widgets/widget-set.php

• 问题描述：小部件文件名使用连字符（如 widget-random-posts.php），但类名使用下划线（如 widget_random_posts），导致小部件注册失败
• 修复逻辑：

– 修改 widget_ui_loader 函数，添加 $class_name = str_replace('-', '_', $widget); 将连字符转换为下划线 – 使用转换后的类名注册小部件：register_widget( 'widget_'.$class_name );

• 修复效果：解决了 “Class ‘widget_random-posts’ not found” 错误，小部件能够正确注册和使用

       

🖼️ 修复用户头像显示问题

🔧 导航栏与文章头头像不一致修复

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

• 问题描述：网站导航栏的用户头像被回退到默认头像，而文章头部的用户头像显示正常

• 修复逻辑：

– JavaScript头像获取优化：修改 getUserAvatarUrl 函数，优化头像获取顺序： 1. 优先使用传入的 userInfo 中的头像信息 2. 检查 localStorage 中是否有用户头像 3. 直接调用 PHP 函数 boxmoe_get_avatar_url 生成头像 URL，确保与文章头头像一致 4. 最后回退到默认头像 – 传递用户信息参数：更新 getUserAvatarUrl 调用，传递完整的 userInfo 对象 – AJAX返回头像字段：在 boxmoe_check_login_status 函数中，为 user_info 数组添加 user_avatar 字段，确保 AJAX 请求返回头像 URL

• 修复文件：

– assets/js/boxmoe.js：优化头像获取逻辑和调用 – core/module/fun-basis.php：在 AJAX 响应中添加用户头像字段

• 修复效果：导航栏头像与文章头头像保持一致，不再回退到默认头像

🎯 基础头像系统优化

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

• 修复内容：修复了网站导航栏和文章卡片中的用户头像显示问题，确保使用QQ邮箱注册的用户能够正确显示其QQ头像
• 修复逻辑：

– 统一了头像处理逻辑，boxmoe_get_avatar 函数直接调用 boxmoe_get_avatar_url，确保所有地方的头像逻辑完全一致 – 优化了QQ头像显示，QQ头像优先级高于WordPress默认头像 – 实现了动态QQ头像尺寸，根据实际需求自动匹配（40px-400px） – 改进了用户信息获取，支持多种类型的用户标识 – 保持了完整的头像回退机制：主题自定义头像 > QQ头像 > WordPress默认头像 > 本地默认头像

• 修复效果：导航栏和文章卡片中的用户头像正确显示QQ头像，与后台用户列表显示效果完全一致

       

🖼️ 文章封面图片下边距修复

文件位置: page/template/blog-list.php

• 问题描述：文章封面图片出现多余的下边距，影响整体布局美观

• 修复逻辑：移除了 figure 元素上的 mb-4 类，该类为 Bootstrap 类，会添加 margin-bottom: 1.5rem !important; 样式，导致图片下方出现不必要的间距

• 修复内容：

– 修改 blog-list.php 文件中第94行的 HTML 结构 – 将

<figure class="mb-4 zoom-img">

修改为

<figure class="zoom-img">

• 修复效果：文章封面图片紧密贴合容器，没有多余间距，整体布局更加紧凑和美观

       

🎭 文章卡片看板娘图片设置优化

文件位置: core/panel/settings/set-artice.php · core/panel/includes/class-options-interface.php · core/panel/js/media-uploader.js · assets/css/style.css

• 功能优化：优化了文章卡片看板娘图片的后台设置功能，提升用户体验和图片显示效果

• 核心改进：

– 设置类型调整：将设置类型从 upload 改为 text，允许直接输入自定义图片链接 – 功能按钮添加：新增三个操作按钮 – 🔄 替换：从媒体库选择图片 – ✅ 确认：显示顶部横幅提示，提示保存设置 – 🔄 重置：恢复默认图片 – 预览图优化： – 下移预览图位置，避免遮挡描述文字 – 预览图等比例显示，添加 object-fit: contain 样式，防止图片挤压变形 – 添加背景色，提升预览效果 – 描述增强：明确告知用户固定尺寸162x75px，超出将等比例缩小，避免设置其他尺寸 – 提示方式优化：确认按钮提示从弹窗改为顶部横幅，与后台其他操作保持一致 – 样式固定：将 list-one.post-list:before 和 list-three.post-list:before 的 background-size 固定为 162px 75px

• 技术实现：

– 修改 PHP 模板，调整设置项结构和输出顺序 – 优化 JavaScript 逻辑，实现按钮功能和预览图处理 – 保持原有卡片样式不变，仅优化设置界面

• 用户体验提升：

– 提供多种图片设置方式，灵活便捷 – 明确的尺寸提示，避免错误设置 – 直观的预览效果，所见即所得 – 统一的提示方式，提升后台操作一致性

       

📝 Markdown语法修复

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

• 问题描述：Markdown语法的标题1和代码块无法被正常解析渲染成与主题自带语法一样的样式

• 修复内容：

– 调整Markdown转换优先级：将 boxmoe_md_the_content 过滤器的优先级从12调整为1，确保Markdown转换在其他代码块处理之前执行 – 修复代码块解析：确保生成的HTML结构包含必要的 <code> 标签，与主题样式兼容 – 修复标题解析：添加 \s* 修饰符，允许标题前有空格，确保更灵活的Markdown语法支持 – 优化正则表达式：提高标题匹配的准确性，确保标题1能正确应用主题样式 – 确保样式兼容性：生成的HTML结构与主题自带语法保持一致，确保所有Markdown元素能正确应用主题样式

• 核心改进：

– 解决了与 boxmoe_prettify_esc_html 和 boxmoe_prettify_replace 过滤器的执行顺序冲突 – 确保Markdown生成的HTML结构能被后续的过滤器正确处理 – 修复了代码块生成的HTML结构，使其与主题自带语法保持一致 – 优化了标题解析的正则表达式，提高了匹配的准确性

• 修复效果：

– Markdown语法的标题1能正确渲染成与主题自带语法一样的样式 – 代码块能正确应用主题的代码块样式 – 解决了Markdown语法与主题样式的兼容性问题 – 确保了Markdown转换的稳定性和可靠性

       

🔗 外链模板修复与优化

🔗 外链跳转功能修复

文件位置: page/p-go.php · page/p-goto.php

• 功能描述：修复了外链模板无法解析链接并成功跳转的问题
• 核心修复：

– 移除了自定义URL处理中的 echo 语句，避免破坏HTML结构 – 修复了正则表达式匹配错误检查 – 修复了URL转义问题，确保链接能正确解析 – 修复了JavaScript倒计时函数，确保自动跳转正常工作

• 使用效果：

– 直跳版：页面加载后自动跳转到目标链接 – 提醒版：显示安全提示，倒计时后自动跳转，支持手动点击跳转

       

🔗 外链跳转UI优化

文件位置: page/p-goto.php

• 功能描述：将外链提醒版的页面UI修改为与登录页面一样的玻璃拟态风格
• 核心特性：

– 采用玻璃拟态设计，包含半透明背景和高斯模糊效果 – 支持暗色模式，自动适配系统主题 – 添加了主题切换功能 – 优化了按钮样式和交互效果 – 实现了现代化的卡片布局

• 使用效果：

– 页面视觉效果更统一、更现代 – 提升了用户体验和品牌一致性

       

🔗 直跳版模板重构

文件位置: page/p-go.php

• 功能描述：重构直跳版模板，采用template4.html样式，添加登录页面背景和高斯模糊磨砂质感遮盖层
• 核心特性：

– 采用了有趣的CSS动画效果 – 添加了全屏背景图片，支持自定义背景 – 实现了高斯模糊磨砂质感遮盖层 – 支持后台设置的倒计时秒数 – 响应式设计，适配不同屏幕尺寸

• 使用效果：

– 直跳版页面更加生动有趣 – 与提醒版保持了视觉风格的统一

       

⏱️ 倒计时功能优化

文件位置: core/panel/settings/set-msg.php · page/p-go.php · page/p-goto.php

• 功能描述：在后台设置中新增跳转倒计时秒数设置，并修改两个外链模板使用该设置值
• 核心特性：

– 后台可设置倒计时秒数，范围1-10秒 – 默认值为3秒 – 直跳版和提醒版均使用该设置值 – 设置项位于”外链跳转设置「二选一」”分组中

• 使用步骤：

– 后台 → 外观 → 盒子萌主题设置 → 通知设置 – 在”外链跳转设置「二选一」”分组中设置”跳转倒计时秒数” – 保存后，外链跳转页面将使用新的倒计时秒数

       

🖼️ 背景显示优化

文件位置: page/p-go.php · page/p-goto.php

• 功能描述：优化背景图显示效果，避免黑边，添加渐显动画
• 核心改进：

– 将背景图显示方式从cover改为100% 100%，避免黑边 – 添加了0.3秒的渐显动画，提升视觉体验 – 两个模板保持了视觉一致性

• 使用效果：

– 背景图完全填充页面，没有黑边 – 背景图以平滑的方式渐显 – 页面加载体验更流畅

       

⚙️ 设置项优化

文件位置: core/panel/settings/set-msg.php

• 功能描述：调整跳转倒计时秒数设置项的位置和类型
• 核心改进：

– 将秒数设置放在外链直跳版开关下方 – 将设置类型从number改为text，确保输入框能正确显示 – 使用small-text类名，保持与其他设置项的风格一致

• 使用效果：

– 设置项位置更合理 – 输入框能正确显示 – 保持了设置面板的整体美观