😥 修复文章列表在无限加载模式下，出现封面闪烁
问题分析：
在文章列表分页模式的无限加载过程中，封面图会出现闪烁现象。主要原因是：
- 无限加载时，
initLazyLoad()函数会重新初始化所有图片，包括已经加载过的图片 - 已加载图片的样式被重置，导致重新应用加载动画
- 图片状态管理不当，导致重复加载
修复方案：
优化 initLazyLoad() 函数
- 添加了容器参数，使其可以只处理特定容器内的图片
- 增加了图片状态检查，避免重复处理已加载的图片
- 修复了变量名冲突问题
// 修改前
function initLazyLoad() {
const lazyImages = document.querySelectorAll('img.lazy');
// ...
}
// 修改后
function initLazyLoad(container = document) {
const lazyImages = container.querySelectorAll('img.lazy');
const loadImage = async (img) => {
// 如果图片已经加载过，直接返回
if (img.classList.contains('loaded')) {
return;
}
// ...
};
}
改进无限加载逻辑
- 修改无限加载代码，只对新添加的文章应用懒加载
- 为新文章中的图片设置正确的初始状态，防止闪烁
- 添加了立即加载可见图片的逻辑，提升用户体验
// 获取新添加的文章元素
const addedPosts = postsContainer.querySelectorAll('.row.g-4 > div');
const lastPosts = Array.from(addedPosts).slice(-addedPostsCount);
// 为新文章中的图片设置初始状态，防止闪烁
lastPosts.forEach(post => {
const images = post.querySelectorAll('img.lazy');
images.forEach(img => {
// 确保新图片有正确的初始状态
if (!img.classList.contains('loaded')) {
img.style.opacity = '0';
img.style.transform = 'scale(0.8)';
}
});
});
// 使用修改后的initLazyLoad函数，只处理新文章中的图片
lastPosts.forEach(post => {
if (typeof initLazyLoad === 'function') {
initLazyLoad(post);
}
});
优化CSS样式
- 添加了
will-change属性，提升动画性能 - 改进了图片占位符样式，提供更平滑的过渡效果
- 优化了无限加载新文章的动画效果
/* 图片懒加载优化 - 防止无限加载时闪烁 */
img.lazy {opacity:0;transform: scale(0.8);transition: all 0.6s cubic-bezier(0.5, 0, 0.3, 1);will-change: opacity, transform;}
img.lazy.loaded {opacity:1;transform: scale(1);}
/* 无限加载新文章动画优化 */
.blog-post .row.g-4 > div {
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
will-change: opacity, transform;
}
/* 图片占位符样式 */
.shiroki-image-placeholder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(2px);
z-index: 1;
opacity: 1;
transition: opacity 0.3s ease-out;
}
增强 ShirokiImageLoader 类
- 改进了
revealImage()方法，避免重复处理已加载的图片 - 确保图片有正确的显示状态
// 渐显图片 - 优化无限加载时的显示效果
revealImage(imgElement) {
// 如果图片已经加载过，不再重复处理
if (imgElement.classList.contains('loaded')) {
return;
}
// 添加加载完成的类
imgElement.classList.add('loaded');
// 确保图片有正确的显示状态
imgElement.style.opacity = '1';
imgElement.style.transform = 'scale(1)';
// 移除占位符
const placeholder = imgElement.parentElement.querySelector('.shiroki-image-placeholder');
if (placeholder) {
setTimeout(() => {
placeholder.classList.add('loaded');
setTimeout(() => placeholder.remove(), 300);
}, 100);
}
}
修复效果：
通过以上修改，确保了：
- 只有新加载的图片才会应用懒加载逻辑
- 已加载的图片状态不会被重置
- 图片加载过程更加平滑，没有闪烁现象
现在，在文章列表分页模式的无限加载过程中，封面图将平滑地显示，不再出现闪烁问题。
修改文件：
wp-content/themes/lolimeow-shiroki/assets/js/boxmoe.jswp-content/themes/lolimeow-shiroki/assets/css/style.css
🧑🏻💻 代码行数因为字体原因，从20开始换行的bug
🐛 问题描述
代码块的行号在显示到20行及以上时，由于字体原因和固定宽度限制，行号会发生换行，影响代码阅读体验。
🎯 解决方案
- 增加行号宽度：将行号宽度从25px增加到35px，确保能容纳两位数行号
- 使用等宽字体：为行号添加
font-family: monospace，确保数字宽度一致 - 防止换行：添加
white-space: nowrap属性，禁止行号换行 - 调整相关样式：同步调整行的左边距和容器阴影宽度
- 动态适配：添加JavaScript动态计算功能，根据代码块行数自动调整行号宽度
📝 修改文件
CSS文件修改：
wp-content/themes/lolimeow-shiroki/assets/css/style.css
- 增加行号宽度至35px
- 添加white-space: nowrap防止换行
- 使用等宽字体确保对齐
- 增加行左边距至50px
- 调整行号容器阴影宽度至43px/44px
- 同步更新暗色模式设置
JavaScript文件增强：
wp-content/themes/lolimeow-shiroki/assets/js/fix-prettify-line-numbers.js
- 添加adjustLineNumberWidth()动态调整函数
- 根据最大行号计算所需位数
- 动态设置合适的行号宽度
- 确保在页面加载和PR.prettyPrint调用后执行
✨ 修复效果
- 行号不会因为位数增加而换行
- 自动适应不同长度的代码块
- 在亮色和暗色模式下都能正确显示
- 保持良好的对齐和可读性
📋 技术细节
- 采用CSS计数器方案生成行号
- 使用动态样式表实现自适应宽度
- 结合JavaScript和CSS共同优化显示效果
- 确保与现有代码块样式兼容
🗒️ 恢复原主题侧边栏滚动的固定效果
功能描述: 网站的侧边栏滚动固定效果，确保侧边栏在页面中间固定，直到滑到页面底部才会显示最后一个侧边栏展示。
实现方式:
- CSS 样式修改:
- 在 style.css 中添加了 .blog-sidebar .position-sticky.top 样式
- 设置 position: sticky 和 top: 2% 实现固定效果
- 添加 height: fit-content 确保侧边栏高度自适应
- 优化移动端响应式样式，确保在小屏幕设备上正常显示
- JavaScript 功能实现:
- 创建新文件 shiroki-sidebar-sticky.js 实现智能滚动控制
- 检测页面滚动位置和侧边栏、页脚的位置关系
- 智能切换固定和相对定位，避免遮挡页脚
- 使用防抖函数优化性能，减少计算频率
- 添加页面可见性变化监听，确保页面切换时重新计算
- 脚本加载:
- 在 functions.php 中添加 shiroki_enqueue_sidebar_sticky_script 函数
- 确保只在使用双栏布局时加载此脚本
- 设置适当的依赖和优先级
效果特点:
- 平滑过渡：侧边栏在固定和取消固定之间切换时有平滑的过渡效果
- 智能定位：侧边栏会在页面中间固定，直到滚动到页面底部才会停止固定
- 性能优化：使用防抖函数和状态标志减少不必要的DOM操作
- 兼容性好：支持各种屏幕尺寸，在移动设备上自动禁用固定效果
相关文件:
wp-content/themes/lolimeow-shiroki/assets/css/style.csswp-content/themes/lolimeow-shiroki/assets/js/shiroki-sidebar-sticky.jswp-content/themes/lolimeow-shiroki/functions.php
🫂 修复友链卡片的背景图显示不完整问题
问题描述：
友链卡片的背景图只显示了70%的宽度，没有完全覆盖整个友链卡片，导致两侧有留白现象。
问题分析：
通过检查CSS样式文件，发现友链卡片的背景图片设置在 .post-single .bookmark ul li .profile .imgbox img 样式中，其中 width: 70% 导致背景图只占卡片宽度的70%。
解决方案：
修改CSS样式文件，将背景图的宽度从70%调整为100%，使其完全覆盖整个友链卡片。
修改内容：
/* 修改前 */
.post-single .bookmark ul li .profile .imgbox img {width:70%;height:100%;object-fit:cover;border-radius:15px;user-select:none;pointer-events:none;}
/* 修改后 */
.post-single .bookmark ul li .profile .imgbox img {width:100%;height:100%;object-fit:cover;border-radius:15px;user-select:none;pointer-events:none;}
相关文件：
wp-content/themes/lolimeow-shiroki/assets/css/style.css(第3420行)
修改效果：
- 友链卡片背景图现在完全覆盖整个卡片区域
- 保持了原有的圆角和其他视觉效果
- 提升了整体视觉一致性
💊 更改药丸模块色系，将10、11、12、13、14、15、16更改为渐变色
🎯 开发目标：将药丸模块的10-16号样式更改为渐变色效果
🔧 实现步骤：
- 定位药丸模块实现位置：
wp-content/themes/lolimeow-shiroki/core/module/fun-shortcode.php - 在CSS文件中添加渐变色样式：
wp-content/themes/lolimeow-shiroki/assets/css/style.css
🎨 渐变色配置：
- 9号：从蓝色(#0d6efd)到粉色(#ff69b4)的渐变
- 10号：从浅灰(#6c757d)到深灰(#495057)的渐变
- 11号：从浅青色(#7dd3fc)到深蓝色(#1e3a8a)的渐变
- 12号：从碧绿色(#10b981)到浅灰色(#e9ecef)的渐变
- 13号：从浅灰色(#e9ecef)到深红色(#991b1b)的渐变
- 14号：从橙色(#fb923c)到浅黄色(#fef3c7)的渐变
- 15号：从青色(#0dcaf0)到浅灰色(#e9ecef)的渐变
- 16号：从深黑色(#212529)到蓝色(#0d6efd)的渐变
💻 代码实现：
/* 🌈 药丸模块渐变色-9至16号 */
.badge.text-bg-primary.bg-gradient {
background: linear-gradient(135deg, #0d6efd, #ff69b4) !important; /* ◀️ 蓝色到粉色渐变 */
}
.badge.text-bg-secondary.bg-gradient {
background: linear-gradient(135deg, #6c757d, #495057) !important; /* ◀️ 灰色渐变 */
}
.badge.text-bg-info.bg-gradient {
background: linear-gradient(135deg, #7dd3fc, #1e3a8a) !important; /* ◀️ 浅青到深蓝渐变 */
}
.badge.text-bg-success.bg-gradient {
background: linear-gradient(135deg, #10b981, #e9ecef) !important; /* ◀️ 碧绿到浅灰渐变 */
}
.badge.text-bg-danger.bg-gradient {
background: linear-gradient(135deg, #e9ecef, #991b1b) !important; /* ◀️ 浅灰到深红渐变 */
}
.badge.text-bg-warning.bg-gradient {
background: linear-gradient(135deg, #fb923c, #fef3c7) !important; /* ◀️ 橙色到浅黄渐变 */
}
.badge.text-bg-light.bg-gradient {
background: linear-gradient(135deg, #0dcaf0, #e9ecef) !important; /* ◀️ 青色到浅灰渐变 */
}
.badge.text-bg-dark.bg-gradient {
background: linear-gradient(135deg, #212529, #0d6efd) !important; /* ◀️ 深色到蓝色渐变 */
}
📝 使用方法：
在WordPress编辑器中使用短代码：
内容
🚀 修复导航栏无法展示三级及以上导航
问题描述：导航栏只能显示到三级导航，四级及以上导航无法展示。
修复方案：
- 修改导航菜单深度设置（core/module/fun-basis.php）：
- 将 depth 参数从 3 增加到 10，允许 WordPress 渲染更多级别的导航菜单
- 文件路径：core/module/fun-basis.php 第 456 行
- 修改前：'depth' => 3,
- 修改后：'depth' => 10,
- 检查相关代码：
- 导航菜单 walker 类（fun-navwalker.php）已支持多级导航，使用 dropdown-submenu 类标识
- CSS 样式（style.css）已支持多级导航，使用 .dropdown-submenu 选择器设置样式
- JavaScript 代码（boxmoe.js）已支持多级导航，使用 .dropdown-submenu 选择器处理点击事件
修复效果：四级及以上的导航菜单现在可以正常显示，在桌面设备上鼠标悬停显示，在移动设备上点击展开。
👤 修复导航栏的用户信息容器有个扁圆色块
问题描述
- 每次刷新页面时，用户信息容器会出现一个扁圆透明色块
- 从其他标签页回到页面时，用户信息容器上会出现一个扁圆色块盖住用户信息，然后色块渐隐
修复方案
- CSS优化（
assets/css/style.css）
- 添加transform: translateZ(0)和will-change: transform, backdrop-filter强制硬件加速
- 添加contain: layout style paint限制渲染范围
- 为用户头像和信息添加position: relative; z-index: 2确保内容始终在背景之上
- JavaScript处理（
assets/js/boxmoe.js）
- 监听visibilitychange事件，页面从隐藏变为可见时强制重绘
- 监听focus事件，页面获得焦点时触发重绘
- 监听load事件，确保初始渲染正确
- 临时修改transform和backdrop-filter属性，然后恢复，强制浏览器重新计算效果
修复效果
- 页面刷新时用户信息容器正常显示，不会出现扁圆透明色块
- 从其他标签页回到页面时，用户信息容器正常显示，不会出现色块盖住用户信息的问题
👤 修复桌面端悬停用户信息容器不显示下拉框选项
问题描述
- 悬停用户信息容器时，下拉框选项不显示
- 移走就隐藏下拉框，导致用户无法点击下拉框选项
- 下拉框的图标与文本挨得太近
修复方案
- CSS优化（
assets/css/style.css）
- 移除isolation: isolate和contain: layout style paint属性，避免创建新的堆叠上下文
- 为导航栏右侧部分添加overflow: visible; position: relative; z-index: 10确保下拉菜单不被裁剪
- 为用户信息容器添加overflow: visible; z-index: 5
- 设置下拉菜单默认状态为display: none; opacity: 0; visibility: hidden
- 添加transition: opacity 0.3s ease, visibility 0.3s ease实现平滑过渡
- 调整下拉菜单项图标右边距从2px到8px
- 增加菜单项内边距从8px到10px，提供更大的点击区域
- 添加菜单项悬停效果：背景色变为主题色的浅色版本，文字变为主题色
- JavaScript事件处理（
assets/js/boxmoe.js）
- 添加mouseenter和mouseleave事件监听器
- 使用100ms延迟隐藏，确保鼠标移动时不会立即隐藏菜单
- 使用matches(':hover')检查鼠标位置，避免误隐藏
- 添加下拉菜单自身的悬停保持显示规则
修复效果
- 悬停用户信息容器时，下拉框选项正常显示
- 鼠标从用户信息容器移动到下拉菜单时保持显示，用户可以正常点击选项
- 下拉框的图标与文本距离合适，视觉上更加舒适
- 菜单项有明显的悬停反馈和更大的点击区域
🛰️ 修复下拉框要靠页面右边显示
问题描述
- 下拉框左对齐显示，不符合页面右侧的用户信息容器位置
修复方案
- CSS定位修改（
assets/css/style.css）
- 修改下拉菜单定位从left: 0; right: auto到left: 100%; transform: translateX(-100%)
- 确保下拉菜单的右边缘与父容器的右边缘完全对齐
- 为下拉菜单的伪元素桥接区域添加transform: translateX(0)确保正确对齐
修复效果
- 下拉框从用户信息容器的右侧边缘开始显示
- 菜单项（会员中心、后台管理、注销登录）右对齐
- 整体布局更加紧凑和美观
🎈 修复本地测试正常，但是上传到服务器就无法显示下拉框菜单
问题描述
- 本地测试正常，但上传到服务器后下拉框菜单无法显示
- 可能是服务器环境差异导致的JavaScript执行问题
修复方案
- JavaScript优化（
assets/js/boxmoe.js）
- 改进DOM加载时机，检查document.readyState，确保在正确的时机初始化
- 为所有关键操作添加try-catch错误处理
- 使用传统函数语法替代箭头函数，提高浏览器兼容性
- 检查元素方法是否存在再调用，避免使用可能不支持的特性
- 添加详细的console.log和console.error日志，便于服务器调试
- 创建可复用的辅助函数：isElementHovered(element)和hideDropdownMenu(menu)
- 错误处理完善
- 所有可能失败的操作都有try-catch保护
- 错误不会导致整个脚本停止执行
- 提供详细的错误日志便于调试
修复效果
- 在服务器环境中能够正常初始化
- 即使部分功能失败也不会影响整体功能
- 提供详细的错误日志便于调试
- 兼容更多浏览器和服务器环境
😥 修复JavaScript错误：Cannot assign to read only property '__bannerAnimationInitialized'
问题描述
- 运行时出现错误：
Cannot assign to read only property '__bannerAnimationInitialized' - 代码在第3792行使用
Object.defineProperty创建了一个只读属性 - 但在第4011行的
stop方法中试图给这个属性赋值
修复方案
- 属性定义修改（
assets/js/boxmoe.js）
- 修改__bannerAnimationInitialized属性定义
- 将writable: false改为writable: true，使属性可修改
- 将configurable: false改为configurable: true，使属性可配置
修复效果
__bannerAnimationInitialized属性可以被正常修改和重置- 动画系统可以正常启动和停止
- 页面切换时不会出现JavaScript错误
- 整体功能更加稳定
评论（2）