「盒子萌Lolimeow」主题二创「纸鸢版🕊️更新」与「🗼开发笔记」

白木 2025年8月27日 2026年2月13日 1.61k

2 评论

优化特性:

• 亮色模式下标题悬停颜色变为粉色
• 暗色模式下标题悬停颜色变为紫色
• 折叠卡片悬停时有向上移动5px的动画效果
• 标题文字与箭头图标保持合适间距，避免遮挡
• 适配亮色和暗色两种主题模式
• 平滑的过渡动画，提升用户体验

🔄 文章列表无限加载功能

文件位置: core/panel/settings/set-artice.php · core/module/fun-article.php · page/template/blog-list.php · assets/js/boxmoe.js

• 功能描述: 在后台主题设置的文章设置中新增无限加载选项，实现文章列表滚动到底部自动加载更多文章，加载时显示动画，加载完成的文章以上移渐显方式呈现
• 实现要点:

- 添加后台选项: 在文章设置的【文章列表分页模式】中新增"无限加载"选项
- 修改分页函数: 更新 boxmoe_pagination() 函数，添加无限加载模式的支持
- 添加前端结构: 在文章列表模板中添加加载动画和结束消息的HTML结构
- 实现滚动加载: 使用 fetch API 实现异步加载，监听滚动事件，当滚动到页面底部200px时自动加载
- 优化加载动画: 采用柔和的脉冲动画，避免旋转动画导致的"反转色块"问题
- 文章入场动画: 新加载的文章以上移渐显方式呈现，提升用户体验
- 结束消息样式: 全部加载完成后显示"完"字，继承激活页码样式（粉色背景，白色文字）

• 代码寻找:

- 后台选项添加：core/panel/settings/set-artice.php:115
- 分页函数修改：core/module/fun-article.php:359-361
- 前端结构添加：page/template/blog-list.php:142-166
- 无限加载逻辑：assets/js/boxmoe.js:2496-2672
- 加载动画样式：assets/js/boxmoe.js:2576-2628

使用步骤:

1. 后台 → 外观 → 盒子萌主题设置 → 文章设置
2. 找到"文章列表分页模式"选项，选择"无限加载"
3. 保存设置后，前端文章列表会启用无限加载功能

实现效果:

• 访问文章列表页，滚动到底部会自动加载更多文章
• 加载过程中显示柔和的脉冲动画
• 新加载的文章平滑上移渐显
• 全部文章加载完成后显示"完"字，样式与激活页码一致

优化特性:

• 平滑的加载体验，提升用户体验
• 柔和的脉冲动画，避免视觉冲突
• 文章上移渐显动画，增强页面活力
• 结束消息样式与主题风格统一
• 兼容现有主题功能
• 无需额外配置，启用即可使用

📧 SMTP功能增强

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

• SMTP连接测试功能：新增了直接测试SMTP连接的功能

- 功能：在发送测试邮件前，可先测试SMTP连接是否正常
- 入口：SMTP设置页面新增"测试SMTP连接"按钮
- 实现：直接创建PHPMailer实例测试连接，不发送实际邮件
- 反馈：显示连接成功或失败的详细信息

• 邮件模板美化：优化了所有邮件模板的设计

- 采用玻璃卡片设计风格
- 紫色渐变主题
- 响应式布局
- 清晰的视觉层次

📚 首页文章数量控制

文件位置: core/panel/settings/set-artice.php · core/module/fun-article.php

• 首页文章显示数量设置项: 在后台主题设置的【文章设置】中新增了【首页文章显示数量】设置项

- 功能：可灵活调整首页显示的文章数量，默认3篇
- 设置项ID：boxmoe_home_posts_per_page
- 默认值：3
- 位置：放在【开启所有文章形式支持】下面，【首页文章仅显示分类】上面
- 类型：文本输入框，支持自定义数字

• 首页文章数量控制实现：

- 在boxmoe_custom_post_order函数中添加了首页文章数量控制逻辑
- 通过get_boxmoe('boxmoe_home_posts_per_page', 3)获取设置值，默认值为3
- 使用intval()确保获取到的是整数类型
- 应用于首页文章查询，控制每页显示数量

• 分页功能：系统已自带完善的分页功能，支持多种分页类型（多页导航、上/下页按钮、无限加载），可通过后台设置选择

🎯 Banner设置增强

文件位置: core/panel/settings/set-banner.php · header.php · core/module/fun-basis.php · assets/js/boxmoe.js

• 关闭打字效果设置项：在后台主题设置的【Banner设置】中新增了"关闭打字效果"设置项

- 功能：开启后欢迎语将直接显示，不显示打字动画
- 设置项ID：boxmoe_banner_typing_switch
- 默认为关闭状态（显示打字动画）
- 前端逻辑：根据设置值决定是否使用boxmoe-typing-animation类

• 欢迎语预设值更新：将Banner欢迎语的默认预设值更新为

- 旧值：Hello! 欢迎来到盒子萌！
- 新值：Hello! 欢迎来到盒子萌-🎉纸鸢版！

• 关闭自动换图功能：在后台主题设置的【Banner设置】中新增了"关闭自动换图功能"设置项

- 功能：开启后Banner图片将保持静态显示，不再自动轮播
- 设置项ID：boxmoe_banner_auto_switch
- 默认为关闭状态（启用自动换图）
- 前端逻辑：根据设置值决定是否启动自动换图功能
- 实现方式：在initBannerRandomSwitch()函数中添加条件判断，当设置为true时不启动自动换图

🌐 WPJAM菜单中文翻译

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

• 翻译WPJAM插件侧边栏菜单名称：将wpjam-basic插件在侧边栏菜单的名称从英文翻译为中文

- 功能：将"WPJAM"主菜单名称改为"WPJAM 基础设置"
- 子菜单标题保持为中文"优化设置"
- 使用admin_menu钩子确保在插件注册菜单后执行
- 翻译效果持久，不会被插件更新覆盖
- 保持了主题的一致性和美观性

SMTP邮件设置新增消息接受邮箱

🎯 功能目标

在主题SMTP邮件设置中新增消息接受邮箱配置，允许用户自定义接收新评论和新会员注册通知的邮箱地址，提高邮件通知系统的灵活性和可配置性。

#🔧 实现方法

修改了以下文件：

1. core/panel/settings/set-smtp.php - 在主题选项框架中添加消息接受邮箱设置项
2. core/module/fun-smtp.php - 在独立SMTP设置页面添加消息接受邮箱设置项
3. core/module/fun-msg.php - 优化邮件发送逻辑，支持从多个设置源获取设置值

✏️ 具体修改内容

1. 在主题选项框架中添加设置项：

- 在SMTP发件消息通知设置开关部分新增了"消息接受邮箱"设置项
- 允许用户配置接收新评论和新会员注册通知的邮箱地址

1. 在独立SMTP设置页面添加设置项：

- 在保存设置的逻辑中添加了保存boxmoe_smtp_receive_email选项的代码
- 在设置表单中添加了消息接受邮箱的输入字段，位置在发件人名称字段之后

1. 优化邮件发送逻辑：

- 修改了boxmoe_new_user_register函数，使其优先使用配置的消息接受邮箱
- 修改了boxmoe_comment_notification函数，使其优先使用配置的消息接受邮箱
- 实现了多源设置值获取逻辑，确保设置的一致性和可靠性

🎨 实现效果

• 可以在主题选项框架的SMTP设置页面配置消息接受邮箱
• 可以在独立的SMTP设置页面配置消息接受邮箱
• 系统会优先使用独立SMTP设置页面的设置值
• 若未设置则回退到使用系统管理员邮箱或文章作者邮箱
• 提高了邮件通知系统的灵活性和可配置性

📝 技术要点

• 采用了多源设置值获取策略，确保设置的可靠性
• 优先从独立SMTP设置页面（get_option）获取设置值
• 其次从主题选项框架（get_boxmoe）获取设置值
• 最后使用默认值（系统管理员邮箱或文章作者邮箱）
• 保持了与主题原有代码风格的一致性

🏞️ 新增菜单【导航】自定义图标链接功能

功能概述

为WordPress主题添加了菜单自定义图标链接功能，允许用户在菜单编辑页面为每个菜单项添加自定义图标，支持PNG、SVG、JPG格式，图标尺寸与文字大小一致。

功能实现

添加菜单自定义图标字段

文件位置: h:/shiroki-wordpress/shiroki/shiroki/app/public/wp-content/themes/lolimeow-shiroki/core/module/fun-basis.php

• 添加了菜单图标字段的注册和保存功能
• 支持上传或输入图片URL，支持PNG、SVG、JPG格式
• 在菜单编辑页面右侧添加了"🥳 菜单图标设置"元框
• 实现了图标预览功能

修改导航菜单Walker类

文件位置: h:/shiroki-wordpress/shiroki/shiroki/app/public/wp-content/themes/lolimeow-shiroki/core/module/fun-navwalker.php

• 在bootstrap_5_wp_nav_menu_walker类中添加了图标显示功能
• 在菜单项前显示自定义图标，与文字垂直对齐
• 使用get_post_meta()函数获取菜单图标的URL

添加CSS样式

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

• 图标尺寸设置为1em x 1em，与文字大小一致
• 图标与文字之间添加了0.10em的间距
• 图标使用vertical-align: middle实现垂直对齐
• 支持响应式设计

使用方法

1. 登录WordPress后台，进入外观 > 菜单页面
2. 在菜单结构中展开任意菜单项
3. 在右侧的"🥳 菜单图标设置"区域，点击"选择图片"按钮上传图片，或直接输入图片URL
4. 可以实时预览图标效果
5. 点击"保存菜单"按钮保存设置
6. 刷新网站前端，即可看到带有图标的菜单项

功能特点

• ✅ 支持PNG、SVG、JPG等多种图片格式
• ✅ 图标尺寸与文字大小一致（1:1比例）
• ✅ 图标与文字垂直对齐，视觉效果美观
• ✅ 支持实时预览图标效果
• ✅ 与主题的亮色/暗色模式无缝集成
• ✅ 操作简单，界面友好

Bug修复

问题描述

菜单图标链接保存后再次打开被清空，但是前端正常显示图标。

问题原因

JavaScript代码在保存菜单时，将当前图标值赋给了所有菜单项的隐藏字段，导致只有最后一次编辑的菜单项能保存图标，其他菜单项的图标会被清空。

解决方案

1. 添加菜单项选择机制：

- 当用户点击菜单项的编辑按钮（展开菜单项）时，将当前菜单项标记为"当前选中"
- 其他菜单项移除"当前选中"状态

1. 优化图标值填充逻辑：

- 只在菜单项展开时，将该菜单项的图标值填充到右侧元框
- 修复了setTimeout回调函数中this上下文的问题

1. 改进保存机制：

- 保存菜单时，只将右侧元框中的图标值保存到当前选中的菜单项中
- 其他菜单项保持原有图标值不变

1. 添加实时更新功能：

- 当右侧元框中的图标值变化时，实时更新当前选中菜单项的隐藏字段
- 确保用户在保存前就能看到图标值的变化

技术细节

菜单图标字段注册

function shiroki_menu_item_icon_field() {
    // 注册菜单图标元框
    add_meta_box(
        'shiroki_menu_item_icon',
        '🥳 菜单图标设置',
        'shiroki_menu_item_icon_field_html',
        'nav-menus',
        'side',
        'default'
    );
}
add_action( 'admin_init', 'shiroki_menu_item_icon_field' );

菜单图标保存

function shiroki_save_menu_item_icon_fields($menu_id, $menu_item_db_id) {
    if (isset($_POST['menu_item_icon'][$menu_item_db_id])) {
        update_post_meta(
            $menu_item_db_id,
            '_shiroki_menu_icon',
            esc_url_raw($_POST['menu_item_icon'][$menu_item_db_id])
        );
    } else {
        delete_post_meta($menu_item_db_id, '_shiroki_menu_icon');
    }
}
add_action( 'wp_update_nav_menu_item', 'shiroki_save_menu_item_icon_fields', 10, 2 );

图标显示

// 获取菜单图标
$icon_url = get_post_meta($item->ID, '_shiroki_menu_icon', true);
$icon_html = '';

if ($icon_url) {
    $icon_html = '<img src="' . esc_url($icon_url) . '" alt="' . esc_attr($item->title) . '" class="shiroki-menu-icon" style="vertical-align: middle;" /> ';
}

CSS样式

.shiroki-menu-icon {
    width: 1em;
    height: 1em;
    margin-right: 0.5em;
    vertical-align: middle;
    object-fit: contain;
    display: inline-block;
}

🌊 新增波浪细线条分割线

文件位置: assets/css/shiroki-divider.css · assets/js/tinymce-shiroki-divider.js · assets/js/quicktags-shiroki-divider.js

• 功能描述: 新增分割线功能，支持粉紫蓝渐变细波浪线
• 实现方式:

- 使用SVG创建波浪线形状
- 通过伪元素实现多层波浪线效果
- 支持TinyMCE和Quicktags两种编辑器工具栏
- 使用HTML注释语法

• 使用步骤: 在文章编辑器中点击"分割线"按钮即可插入

🫂 创建分类友链模板

开发内容

1. 创建分类友链模板：

- 新建 page-friendlink-shiroki.php 作为分类友链模板
- 支持动态读取后台链接分类，非硬编码分类列表
- 实现分类标签页切换功能
- 每个分类下显示对应友链卡片，包含网站名称、描述、ICO图标和链接

1. 暗色模式支持：

- 为友链模板添加完整的暗色模式样式
- 使用 CSS 媒体查询 prefers-color-scheme: dark
- 修复暗色模式下文本可见性问题，添加 !important 优先级确保样式生效
- 同时更新了原 page-friendlink.php 的暗色模式样式

1. 智能申请按钮：

- 实现申请友链按钮，根据页面存在情况动态显示
- 检测 YIKAN 友链页面是否存在，优先跳转该页面
- 支持多方法检测页面：通过标题、ID 等
- 如果申请页面不存在，显示提示信息

1. 友链卡片设计：

- 响应式网格布局，适配不同屏幕尺寸
- 卡片包含网站名称、描述、ICO图标和访问链接
- 优化 hover 效果和过渡动画
- 暗色模式下调整卡片背景和边框颜色

1. 页面样式优化：

- 提高申请友链页面第一段文字的可见性
- 修复卡片阴影和边框样式
- 优化分类标签页的选中状态样式

技术实现

• 使用 WordPress API get_terms 获取链接分类
• 使用 get_bookmarks 获取分类下的友链
• 动态生成分类标签页和内容
• 页面检测使用 get_pages 和标题匹配
• CSS 媒体查询实现暗色模式
• 响应式设计使用 Grid 布局

修复的问题

• 模板无法检测 YIKAN 友链页面：改为检测页面标题
• 暗色模式下文本不可见：添加 !important 优先级
• 原友链页面暗色模式问题：更新样式文件

文件修改

• page-friendlink-shiroki.php：新建分类友链模板
• page-friendlink.php：更新暗色模式样式
• .开发笔记/盒子萌-共创开发笔记.md：记录开发内容

✨ 优化分类友链模板样式

开发内容

1. 背景色同步网站ICO图：

- 修改友链卡片背景，使用网站ICO图片作为背景
- 为每个卡片添加 data-bg 属性存储背景图片URL
- 使用 JavaScript 动态为卡片 ::before 伪元素设置背景图片
- 确保背景图片与头像使用相同的 ICO 图片，实现视觉统一

1. 添加高斯模糊效果：

- 为卡片背景添加 filter: blur(15px); 实现高斯模糊效果
- 设置 opacity: 0.3; 确保背景图片不会过于突兀
- 调整伪元素大小和位置，使其覆盖整个卡片

1. 悬停效果优化：

- 实现悬停时降低高斯模糊效果，从 15px 降低到 10px
- 悬停时稍微提高背景图片透明度，从 0.3 提高到 0.4
- 为暗色模式也添加相应的悬停效果优化

1. 卡片布局调整：

- 重新设计卡片布局，左侧显示圆形头像，右侧显示网站信息
- 添加在线状态指示器，增强社交感
- 优化卡片内部元素的间距和排版

1. 响应式设计：

- 调整卡片网格布局，适应不同屏幕尺寸
- 确保在移动设备上卡片也能正确显示

技术实现

• 使用 CSS ::before 伪元素实现背景图片和高斯模糊效果
• 使用 JavaScript 动态创建样式规则，为每个卡片设置背景图片
• 使用 CSS 过渡效果实现平滑的悬停动画
• 使用 CSS 媒体查询实现暗色模式支持

文件修改

• page-friendlink-shiroki.php：优化友链模板样式，添加背景图片同步和高斯模糊效果