🔄 文章模式为无限加载时，滚动50%加载文章
开发内容
优化无限加载功能的触发条件，提升用户体验，让用户更早看到更多文章内容。修改详情
- 触发条件优化（
assets/js/boxmoe.js）
技术实现
// 📜 滚动事件监听
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 执行，会将所有<table>替换为
<table class="table">，破坏了我们的表格结构
修复方案：
修改 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秒，提供流畅的视觉体验
🏹 修改底部版权信息自定义默认文本
🎯 开发目标
- 修改主题底部版权信息，包含主题作者、二次开发者和版本号
- 版本号使用动态变量而非硬编码，便于后续维护
- 修改了底部版权信息默认文本，包含：
- 实现版本号动态显示：
{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”
- 版本号会自动更新，无需手动修改
评论（2）