🔄 文章模式为无限加载时，滚动50%加载文章
开发内容
优化无限加载功能的触发条件，提升用户体验，让用户更早看到更多文章内容。
修改详情
- 触发条件优化（
assets/js/boxmoe.js）
- 原触发条件：滚动到距离页面底部200px时加载
- 新触发条件：滚动到页面50%位置时加载
- 修改位置：第3578-3589行
技术实现
// 📜 滚动事件监听
function handleScroll() {
if (isLoading || !hasMorePosts) return;
const scrollPosition = window.scrollY + window.innerHeight;
const documentHeight = document.documentElement.scrollHeight;
// 🔄 当滚动到页面50%时加载更多
if (scrollPosition >= documentHeight * 0.5) {
loadMorePosts();
}
}
修改效果
- 用户滚动到页面50%时即可自动加载剩余文章卡片
- 无需滚动到看到页脚区域才触发加载
- 提供更好的用户体验，更早展示更多内容
- 减少用户等待时间，提升浏览效率
文件修改
assets/js/boxmoe.js：修改无限加载触发条件
📄 更新表格语法在前端渲染的样式
🎨 样式特性
- 圆角卡片式设计：16px圆角，紫色边框和阴影
- 表头样式：紫色渐变背景（
#667eea→#764ba2），白色加粗文字 - 斑马纹效果：奇数行透明，偶数行透明浅色
- 横向滚动：支持超宽表格左右滑动查看
- 悬停效果：鼠标悬停时阴影加深，行背景变色
☀️ 亮色模式
- 表格背景：
rgba(255, 255, 255, 0.95) - 边框：
#f3e8ff - 阴影：
rgba(139, 61, 255, 0.15) - 偶数行背景：
rgba(139, 61, 255, 0.05) - 悬停背景：
rgba(139, 61, 255, 0.1)
🌆 暗色模式
- 表格背景：
rgba(30, 30, 30, 0.95) - 边框：
rgba(255, 255, 255, 0.2) - 阴影：
rgba(0, 0, 0, 0.3) - 偶数行背景：
rgba(102, 126, 234, 0.15) - 悬停背景：
rgba(102, 126, 234, 0.25)
📊 响应式设计
- 表格外层包裹
.md-table-wrapper容器 - 设置
overflow-x: auto支持横向滚动 - 表格宽度
auto+min-width: 100%，根据内容自动扩展 - 表头和单元格设置
white-space: nowrap，防止内容换行
🐛 修复第二个表格无法渲染样式的问题
问题描述：
- 文章内容区域成功渲染了第一个表格语法
- 第二个表格没有成功渲染显示样式
问题根源：
在 fun-article.php 文件中有一个 boxmoe_table_replace 函数，它会破坏我们通过 Markdown 生成的表格结构。
执行顺序冲突：
boxmoe_md_the_content在优先级 2 执行，生成...
boxmoe_table_replace在默认优先级 10 执行，会将所有
替换为
，破坏了我们的表格结构
修复方案：
修改boxmoe_table_replace函数，让它先识别并保护已经由 Markdown 生成的表格，然后再处理其他表格：function boxmoe_table_replace($text){ // 🔧 跳过已经由Markdown生成的表格，避免破坏样式 $md_tables = []; $text = preg_replace_callback('/<div class="md-table-wrapper">.*?<\/div>/s', function($matches) use (&$md_tables) { $key = '__MD_TABLE_PLACEHOLDER_' . count($md_tables) . '__'; $md_tables[$key] = $matches[0]; return $key; }, $text); // 处理其他表格 $replace = array( '<table>' => '<div class="table-responsive"><table class="table" >','</table>' => '</table></div>' ); $text = str_replace(array_keys($replace), $replace, $text); // 恢复Markdown表格 foreach ($md_tables as $key => $original) { $text = str_replace($key, $original, $text); } return $text; }文件修改
assets/css/shiroki-md-card.css：添加表格样式（圆角卡片、斑马纹、横向滚动、亮暗色模式）core/module/fun-markdown.php：为表格添加包裹层core/module/fun-article.php：修复boxmoe_table_replace函数，避免破坏 Markdown 表格结构
🫂 原主题的友链模板支持按分类显示及新增提交友链按钮
🎯 p-links.php分类筛选功能开发
功能需求：
- 主题自带的友情链接模板
p-links.php - 当在编辑页面选择友链链接模板后，在编辑区域填写分类名称
- 该友链链接页只显示分类名称下的所有链接
实现方案：
- 获取页面内容中的分类名称
- 检查内容中是否指定了分类名称
- 如果指定了分类名称，只显示该分类下的链接
- 如果没有指定分类名称，保持原有逻辑显示所有链接
核心代码逻辑：
// 🎯 获取页面内容中的分类名称 $post_content = get_the_content(); $category_name = ''; // 检查内容中是否指定了分类名称 if (!empty($post_content)) { // 应用内容过滤器，确保获取格式化后的内容 $post_content = apply_filters('the_content', $post_content); // 🔧 多种方法尝试提取分类名称 // 方法1: 尝试从内容中提取第一行非空文本 $lines = explode("\n", $post_content); foreach ($lines as $line) { $line = trim(strip_tags($line)); if (!empty($line)) { $category_name = $line; break; } } // 方法2: 如果方法1失败，尝试使用正则表达式提取可能的分类名称 if (empty($category_name)) { // 尝试匹配段落标签中的内容 if (preg_match('/<p[^>]*>(.*?)<\/p>/i', $post_content, $matches)) { $potential_name = trim(strip_tags($matches[1])); if (!empty($potential_name)) { $category_name = $potential_name; } } } // 方法3: 如果前两种方法都失败，尝试提取整个内容的第一段 if (empty($category_name)) { $paragraphs = preg_split('/\n\s*\n/', $post_content); if (!empty($paragraphs)) { $first_paragraph = trim(strip_tags($paragraphs[0])); if (!empty($first_paragraph)) { $category_name = $first_paragraph; } } } } // 获取所有链接分类 $link_cats = get_terms('link_category'); // 如果指定了分类名称，只显示该分类下的链接 if (!empty($category_name)) { $target_category = null; foreach ($link_cats as $cat) { // 使用不区分大小写的比较，并去除首尾空格 if (strcasecmp(trim($cat->name), trim($category_name)) === 0) { $target_category = $cat; break; } } if ($target_category) { // 获取指定分类下的链接 $links = get_bookmarks(array( 'category' => $target_category->term_id, 'orderby' => 'rating', 'order' => 'DESC' )); if ($links) { // 显示该分类下的链接 } else { echo '<p>该分类下暂无链接</p>'; } } else { echo '<p>未找到名为「' . esc_html($category_name) . '」的链接分类</p>'; } } else { // 📂 未指定分类名称，显示所有分类和链接（原有逻辑） }功能特点：
- 多种提取方法：使用三种不同的方法提取分类名称，适应不同的内容格式
- 不区分大小写：使用
strcasecmp()进行不区分大小写的比较 - 空格处理：使用
trim()去除名称前后的空格 - 调试功能：添加了调试信息输出（可通过URL参数
debug=1查看） - 向后兼容：未指定分类时保持原有逻辑显示所有链接
使用方法：
- 在WordPress后台编辑友情链接页面
- 在页面内容区域输入要显示的分类名称（只需输入分类名称，如"技术博客"）
- 保存页面后，友情链接页面将只显示该分类下的链接
修改文件：
h:\shiroki-wordpress\shiroki\shiroki\app\public\wp-content\themes\lolimeow-shiroki\page\p-links.php
调试功能：
- 访问友情链接页面时，在URL后添加
?debug=1参数 - 例如：
http://yoursite.com/links?debug=1 - 将显示详细的调试信息，包括原始内容、提取的分类名称和所有可用的链接分类
🎯 修复page-friendlink-shiroki.php变量名冲突问题
问题描述：
- 在
page-friendlink-shiroki.php文件中，$link_categories变量被重复使用 - 第372行：
$link_categories用于获取所有链接分类列表 - 第412行：同一变量名被用于获取单个链接的分类，覆盖了之前的所有分类列表
- 导致第462行遍历所有分类时，无法正确生成所有分类的内容区域
修复方案：
- 将单个链接的分类变量从
$link_categories改为$link_cats - 更新所有使用该变量的地方（第412-413行、第433-440行）
修复文件：
h:\shiroki-wordpress\shiroki\shiroki\app\public\wp-content\themes\lolimeow-shiroki\page\page-friendlink-shiroki.php
修复效果：
- 修复后，友链分类切换功能恢复正常
- 页面能够正确生成所有链接分类的内容区域
- 点击"全部友链"、"导航"、"收藏"等分类标签时，能够正常显示对应分类下的链接
🎯 在p-links.php中新增提交友链按钮功能
功能需求：
- 在友情链接页面（
p-links.php）中添加"提交友链"按钮 - 当存在使用
page-friendlink.php模板的页面时显示该按钮 - 点击按钮跳转到友链申请页面
实现方案：
- 检测友链申请页面是否存在
- 如果存在，显示提交友链按钮
- 按钮点击后跳转到友链申请页面
检测逻辑优化：
- 初始方案：通过模板文件名检测（
meta_key: '_wp_page_template', meta_value: 'page-friendlink.php'） - 修正方案：通过页面标题检测（
title: '提交友链-YIKAN出品'） - 参考
page-friendlink-shiroki.php的实现方式，确保检测逻辑一致
修改文件：
h:\shiroki-wordpress\shiroki\shiroki\app\public\wp-content\themes\lolimeow-shiroki\page\p-links.php
代码实现：
// 🔍 检查友链申请页面是否存在 - 通过页面标题检查 $pages_by_title = get_pages([ 'title' => '提交友链-YIKAN出品', 'number' => 1 ]); // 🎯 如果存在友链申请页面，显示提交友链按钮 if (!empty($pages_by_title)) { $friendlink_url = get_permalink($pages_by_title[0]->ID); ?> <div style="text-align: center; margin: 20px 0;"> <a href="<?php echo esc_url($friendlink_url); ?>" style="display: inline-flex; align-items: center; gap: 8px; padding: 12px 30px; background: linear-gradient(45deg, #ff6b9d, #fecfef); color: #fff; border-radius: 25px; text-decoration: none; font-weight: 500; transition: all 0.3s ease; border: none; cursor: pointer; box-shadow: 0 4px 15px rgba(255, 107, 157, 0.3);"> <span>📝</span> <span>提交友链</span> <span>→</span> </a> </div> <?php }功能特点：
- 智能检测：只有当网站中存在友链申请页面时才显示按钮
- 样式统一：按钮样式与主题其他页面保持一致
- 用户体验：按钮位置合理，操作便捷
- 安全防护：使用
esc_url()确保URL安全
📄 文章卡片渐进式放大
🎭 功能概述
实现页面下滑时，文章卡片从小到大的动画效果。当用户下滑停在一半时，文章卡片放大效果也会停住，直到下滑完整看到整个文章卡片才完成放大动画。同时支持无限加载模式下新加载的文章卡片继承相同效果。
🔧 技术实现
核心JavaScript文件
创建了
assets/js/shiroki-post-card-animation.js文件，实现以下功能：- 初始化文章卡片的初始状态（缩小至0.9倍，透明度0.7）
- 监听滚动事件，根据卡片可见程度计算缩放值和透明度
- 使用
requestAnimationFrame优化滚动性能 - 支持无限加载模式，通过
MutationObserver监听DOM变化
CSS样式优化
在
assets/css/style.css中添加了以下样式：/* 🎭 文章卡片滚动放大效果 - 灵阈研都-纸鸢社开发 */ .post-list.shiroki-card-animating { will-change: transform, opacity; /* ◀️ 优化性能，提示浏览器这些属性将会变化 */ backface-visibility: hidden; /* ◀️ 防止动画闪烁 */ perspective: 1000px; /* ◀️ 启用3D加速 */ } .post-list.shiroki-card-visible { will-change: auto; /* ◀️ 动画完成后重置，避免不必要的性能消耗 */ } /* 🌆 暗色模式下的文章卡片动画优化 */ [data-bs-theme="dark"] .post-list.shiroki-card-animating { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* ◀️ 暗色模式下添加阴影增强立体感 */ } /* ☀️ 亮色模式下的文章卡片动画优化 */ [data-bs-theme="light"] .post-list.shiroki-card-animating { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* ◀️ 亮色模式下添加轻微阴影 */ }WordPress集成
在
functions.php中添加了脚本加载函数：function shiroki_enqueue_post_card_animation_script() { // 只在文章列表页面加载 if (is_home() || is_front_page() || is_archive()) { wp_enqueue_script( 'shiroki-post-card-animation', get_template_directory_uri() . '/assets/js/shiroki-post-card-animation.js', array(), '1.0.0', true ); } } add_action('wp_enqueue_scripts', 'shiroki_enqueue_post_card_animation_script', 20);无限加载支持
修改了
assets/js/boxmoe.js中的无限加载代码，确保新加载的文章卡片也能应用放大效果：// 🎭 初始化新文章卡片的滚动放大效果 if (typeof window.shirokiInitPostCards === 'function') { window.shirokiInitPostCards(); }🎨 动画细节
- 初始状态：文章卡片初始为缩小状态（0.9倍）和半透明（0.7透明度）
- 滚动计算：根据卡片进入视口的程度，线性计算缩放值（0.9到1.0）和透明度（0.7到1.0）
- 动画完成：当卡片完全可见时，应用最终样式并移除动画类
- 性能优化：使用
will-change属性和requestAnimationFrame优化性能
🔄 无限加载模式支持
- DOM监听：使用
MutationObserver监听文章容器的DOM变化 - 新卡片初始化：检测到新文章卡片时，自动初始化放大效果
- 全局暴露：将初始化函数暴露到全局，供无限加载脚本调用
- 防重复处理：通过类名检查避免对已处理卡片的重复操作
🌈 视觉效果
- 暗色模式下添加了阴影效果，增强立体感
- 亮色模式下添加了轻微阴影，保持视觉一致性
- 使用了贝塞尔曲线
cubic-bezier(0.25, 0.46, 0.45, 0.94)使动画更加自然 - 过渡时间设置为0.6秒，提供流畅的视觉体验
🏹 修改底部版权信息自定义默认文本
🎯 开发目标
- 修改主题底部版权信息，包含主题作者、二次开发者和版本号
- 版本号使用动态变量而非硬编码，便于后续维护
📝 修改内容
- 修改了底部版权信息默认文本，包含：
- 本站主题作者 Boxmoe (链接到 https://www.boxmoe.com)
- 🎉 本站二次开发 白木 (链接到 https://gl.baimu.live)
- 🕊️ 主题版本：{THEME_VERSION} (使用变量占位符)- 实现版本号动态显示：
- 在后台文本框中使用
{THEME_VERSION}占位符
- 在前端显示时将占位符替换为实际的THEME_VERSION常量值🔧 修改文件
core/panel/settings/set-basis.php(第237行)
- 修改底部版权信息自定义文本框的默认值
- 使用{THEME_VERSION}占位符代替硬编码版本号core/module/fun-basis.php(第420行)
- 添加代码替换
{THEME_VERSION}占位符为实际版本号
- 使用str_replace()函数实现动态替换💡 技术实现
// 在 set-basis.php 中设置默认值 'std' => '本站主题作者 <a href="https://www.boxmoe.com" target="_blank">Boxmoe</a>'."\n".'🎉'."\n".'本站二次开发 <a href="https://gl.baimu.live" target="_blank">白木</a>'."\n".'🕊️ 主题版本：{THEME_VERSION}' // 在 fun-basis.php 中动态替换 $footer_text = get_boxmoe('boxmoe_footer_theme_by_text','...'); echo str_replace('{THEME_VERSION}', THEME_VERSION, $footer_text);✅ 实现效果
- 后台文本框中显示
{THEME_VERSION}变量代码，便于识别这是动态内容 - 前端页面显示实际版本号，如 "🕊️ 主题版本：15.30"
- 版本号会自动更新，无需手动修改
🏞️ Banner随机图片自动切换
功能概述
实现Banner图片每5秒自动切换功能，支持两种模式：
- 本地随机图片模式：从
assets/images/banner/文件夹循环切换图片 - 外链API模式：每次请求API URL获取随机图片（添加时间戳避免缓存）
实现细节
PHP部分（fun-basis.php）
- 创建
boxmoe_banner_random_images_list()函数 - 根据设置输出不同的Banner模式和数据到JavaScript
- 本地模式：扫描banner文件夹，输出图片列表
- API模式：输出API URL
- 输出全局变量：
-
window.shirokiBannerMode：当前模式（'api' 或 'local'）
-window.shirokiBannerData：包含API URL或本地图片列表JavaScript部分（boxmoe.js）
- 实现
initBannerRandomSwitch()函数 - 预加载机制：提前加载下一张图片，避免切换时的空白
- 双层图片切换：创建新图片元素而非修改现有图片src
- 交叉淡入淡出：
- 新图片从透明（opacity: 0）淡入到可见（opacity: 1）
- 旧图片从可见（opacity: 1）淡出到透明（opacity: 0）
- 使用requestAnimationFrame()确保过渡动画正确触发- 智能暂停：页面隐藏时暂停切换，显示时恢复
CSS部分（shiroki-image-loader.css）
- 所有图片使用
position: absolute绝对定位，支持叠加 - 初始状态：透明、缩小（scale: 0.95）、下移（translateY: 5px）、模糊（blur: 4px）
- 淡出效果：透明、放大（scale: 1.05）、上移（translateY: -5px）、模糊（blur: 8px）
- 淡入效果：可见、正常大小、正常位置、清晰
- 使用
cubic-bezier(0.4, 0, 0.2, 1)缓动函数，动画更自然流畅 - 过渡时间：0.8秒
切换效果特点
✅ 无空白：双层图片交叉过渡，视觉完全连续
✅ 平滑淡入：新图片从透明渐变到可见，同时轻微缩放和模糊
✅ 平滑淡出：旧图片从可见渐变到透明，同时轻微放大和模糊
✅ 无缝衔接：预加载机制确保图片已加载完成再切换
✅ 性能优化：页面隐藏时暂停切换，节省资源文件修改清单
core/module/fun-basis.php：添加图片列表输出函数header.php：调用输出函数assets/js/boxmoe.js：实现自动切换逻辑assets/css/shiroki-image-loader.css：添加过渡动画样式
感谢您的支持
微信扫一扫
支付宝扫一扫
评论（2）