💊 药丸模块文本自动换行
🎯 需求描述
修复药丸语法文本过长超出内容区域的问题，改为自动换行，并增加换行后的文本上下间距。
🔧 技术实现
问题描述
药丸模块使用 .badge 类，生成的HTML是 内容。当文本过长时，会超出内容区域显示，影响页面美观。
解决方案
在 assets/css/style.css 文件中修改 .badge 样式，添加以下属性：
.badge {
--bs-badge-font-size: 0.8rem !important;
--bs-badge-padding-x:1em !important;
--bs-badge-padding-y:0.75em !important;
white-space: normal !important;
display: inline-block !important;
max-width: 100%;
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.6;
}
样式说明
white-space: normal !important;- 允许文本自动换行display: inline-block !important;- 确保换行后样式正常max-width: 100%;- 限制最大宽度word-wrap: break-word;- 允许长单词换行overflow-wrap: break-word;- 允许长单词换行line-height: 1.6;- 换行后文本上下间距增加--bs-badge-padding-y:0.75em;- 增加药丸背景的上下内边距（从0.65em增加到0.75em）
✅ 效果
- 药丸内的文本过长时会自动换行
- 换行后的文本有更好的上下间距（通过line-height和padding-y控制）
- 长单词也能正确换行，不会超出容器
📝 文件修改清单
assets/css/style.css：修改.badge样式，添加自动换行和间距控制
🫂 提交友链的按钮显示逻辑
🎯 功能说明
优化友链提交按钮的显示逻辑，从「通过页面标题检查」改为「通过模板文件检查」，实现更灵活的控制：
- p-links.php：当
page-friendlink.php模板文件存在时，显示【提交友链】按钮；不存在时不显示 - page-friendlink-shiroki.php：当
page-friendlink.php模板文件存在时，显示【申请友链】按钮；存在时不显示任何提示信息（包括警告提示）
📝 修改的文件
wp-content/themes/lolimeow-shiroki/page/p-links.phpwp-content/themes/lolimeow-shiroki/page/page-friendlink-shiroki.php
🔧 实现逻辑
核心代码逻辑：
// 🔍 检查友链申请模板文件是否存在
$template_file = locate_template('page/page-friendlink.php');
$friendlink_url = '';
// 🎯 如果模板文件存在，尝试获取使用该模板的页面链接
if (!empty($template_file) && file_exists($template_file)) {
// 查找使用该模板的页面
$friendlink_pages = get_pages([
'meta_key' => '_wp_page_template',
'meta_value' => 'page/page-friendlink.php',
'number' => 1
]);
if (!empty($friendlink_pages)) {
$friendlink_url = get_permalink($friendlink_pages[0]->ID);
}
}
// 🎯 如果存在友链申请页面，则显示跳转按钮
if (!empty($friendlink_url)) {
// 显示按钮代码
}
✨ 优化点
- 更灵活的检查方式：
- 之前：通过页面标题「提交友链-YIKAN出品」检查
- 现在：通过模板文件 page/page-friendlink.php 检查
- 自动获取页面链接：
- 使用 locate_template() 检查模板文件是否存在
- 使用 get_pages() 配合 _wp_page_template 元数据查找使用该模板的页面
- 自动获取页面链接，无需手动指定
- 更好的用户体验：
- p-links.php：无模板文件时不显示按钮
- page-friendlink-shiroki.php：无模板文件时不显示任何内容（移除了之前的红色警告提示）
📊 效果对比
| 场景 | p-links.php | page-friendlink-shiroki.php |
|---|---|---|
| ------ | ------------- | ---------------------------- |
| 模板文件存在 | 显示【提交友链】按钮 | 显示【申请友链】按钮 |
| 模板文件不存在 | 不显示按钮 | 不显示任何内容 |
🎨 技术细节
使用的WordPress函数：
locate_template()- 定位模板文件file_exists()- 检查文件是否存在get_pages()- 获取页面列表get_permalink()- 获取页面链接
🫂 优化提交友链，邮件通知配置
📋 开发内容
1. 修改邮件接收地址获取逻辑
- 移除硬编码的管理员邮箱配置（
FL_ADMIN_EMAIL） - 动态获取SMTP邮件设置的消息接受邮箱
- 优先级：独立SMTP设置页面 → 主题选项框架 → 系统管理员邮箱
2. 修复邮件中网站logo显示问题
- 修改
send_friendlink_approved_email函数，使用主题设置中的logo（boxmoe_logo_src） - 修改
send_friendlink_apply_notification函数，使用主题设置中的logo - 如果未设置主题logo，则回退到默认路径
/logo.png
3. 新增网站ICO填写表单
- 在友链提交表单中添加"网站ICO"输入框
- 设置为必填项，添加URL格式验证
- 在邮件通知中显示ICO信息，以可点击链接形式展示
🔧 修改文件
文件路径： wp-content/themes/lolimeow-shiroki/page/page-friendlink.php
关键修改点：
// 获取SMTP邮件设置的消息接受邮箱
$receive_email = get_option('boxmoe_smtp_receive_email');
if (empty($receive_email)) {
$receive_email = get_boxmoe('boxmoe_smtp_receive_email');
}
$admin_email = !empty($receive_email) ? $receive_email : get_option('admin_email');
// 获取主题设置中的LOGO
$logo_src = get_boxmoe('boxmoe_logo_src');
$logo_url = !empty($logo_src) ? $logo_src : $your_site_url . FL_LOGO_PATH;
// 新增ICO字段处理
$site_ico = esc_url_raw($_POST['site_ico']);
if (empty($site_name) || empty($site_url) || empty($site_ico) || empty($contact_email)) {
// 验证失败
}
🔗 优化链接语法的样式
🎯 功能概述
为文章内容区域的所有链接添加SVG图标，支持三种链接语法：
📁 创建的文件
wp-content/themes/lolimeow-shiroki/assets/js/shiroki-link-icon-shiroki.js- 链接SVG图标功能脚本
🔧 修改的文件
wp-content/themes/lolimeow-shiroki/functions.php- 注册并加载JS文件
🐛 修复的问题
- 修复了SVG图标只显示在特定URL的问题
- 优化了链接选择逻辑，避免在所有链接上添加图标
✨ 新增的功能
- 更精确的链接过滤，只在文章内容区域查找链接
- 排除了特殊链接类型：
- 分页链接（含page-numbers, prev, next等class）
- 短代码按钮（和）
- 导航、页脚、侧边栏等区域的链接
- 文章卡片标题链接（含.post-title, .entry-title, .card-title及h1-h3标签）
- 只支持两种核心语法：
- Markdown图片语法：
- HTML纯文本链接：文本
🔧 优化的代码
- 改进了链接检测逻辑，使用更严格的条件判断
- 添加了多种排除规则，确保只有预期的链接才显示图标
- 优化了性能，减少了不必要的DOM操作
- 🚫 新增文章卡片标题排除规则，避免在标题链接上显示SVG图标
📝 技术说明
- 使用
querySelectorAll精确选择需要添加图标的链接 - 利用
closest()方法检查祖先元素，排除特殊区域的链接 - 通过检查链接内部元素类型，确保只处理纯文本和纯图片链接
- 添加了详细的注释，提高代码可维护性
🎨 实现细节
SVG图标特性：
- 图标大小：16x16像素
- 默认状态：旋转90度
- 悬停状态：旋转到0度
- 过渡动画：0.3秒平滑过渡
- 垂直对齐：与文本居中对齐
- 显示范围：仅在文章内容区域（
.single-content）显示
JavaScript实现：
// 查找文章内容区域
const contentArea = document.querySelector('.single-content');
// 只在内容区域内添加图标
const links = contentArea.querySelectorAll('a[href]');
// 添加SVG图标并设置样式
svgElement.style.verticalAlign = 'middle';
svgElement.style.transformOrigin = 'center';
svgElement.style.transform = 'rotate(90deg) translateY(0)';
svgElement.style.transition = 'transform 0.3s ease';
// 悬停事件监听
link.addEventListener('mouseenter', function() {
svgElement.style.transform = 'rotate(0deg) translateY(0)';
});
link.addEventListener('mouseleave', function() {
svgElement.style.transform = 'rotate(90deg) translateY(0)';
});
排除文章卡片标题链接：
// 🚫 排除文章卡片标题链接
if (link.closest('.post-title') ||
link.closest('.entry-title') ||
link.closest('.card-title') ||
link.closest('h1') ||
link.closest('h2') ||
link.closest('h3')) {
return;
}
PHP注册：
// 🔗 引入链接SVG图标功能 - 为所有链接添加SVG图标
function shiroki_enqueue_link_icon_script() {
wp_enqueue_script(
'shiroki-link-icon',
get_template_directory_uri() . '/assets/js/shiroki-link-icon-shiroki.js',
array(),
'1.0.0',
true
);
}
add_action('wp_enqueue_scripts', 'shiroki_enqueue_link_icon_script', 25);
🤐 修复侧边栏最新评论头像异常显示
🎯 问题描述：
侧边栏【最新评论】小部件中的评论头像显示异常，所有评论都显示默认头像，而不是读取用户的真实头像。
🔍 问题分析：
在 widget-comments.php 文件中，获取头像时使用的是 $comment->user_id 参数。对于游客评论（未登录用户），user_id 值为 0，导致 boxmoe_get_avatar_url 函数无法获取用户邮箱，最终返回默认头像。
🛠️ 修复方案：
将获取头像的参数从 $comment->user_id 改为 $comment->comment_author_email，确保无论是注册用户还是游客评论，都能通过邮箱正确获取对应的头像。
📝 修复代码：
修改文件： core/widgets/widget-comments.php
修改位置： 第36行
修改前：
$comment_avatar = '<img src="'.esc_url($lazy_img).'" data-src="'.esc_url(boxmoe_get_avatar_url($comment->user_id, 60)).'" class="avatar lazy" alt="avatar" onerror="this.src=\''.boxmoe_default_avatar_url().'\'">';
修改后：
$comment_avatar = '<img src="'.esc_url($lazy_img).'" data-src="'.esc_url(boxmoe_get_avatar_url($comment->comment_author_email, 60)).'" class="avatar lazy" alt="avatar" onerror="this.src=\''.boxmoe_default_avatar_url().'\'">';
✅ 修复效果：
- 注册用户评论：显示用户自定义头像或WordPress头像
- 游客QQ邮箱评论：显示QQ头像
- 游客其他邮箱评论：显示Gravatar头像或默认头像
- 所有评论头像均能正确显示，不再统一显示默认头像
🫂 优化友链模板的网站ICO显示问题
🎯 问题描述：
友链模板中的网站ICO图标使用固定尺寸和object-fit: cover样式，导致图标被切割，无法完整显示。
🔍 问题分析：
在友链模板中，网站ICO图标使用了内联样式或CSS类，设置了固定的宽高和object-fit: cover属性。cover属性会裁剪图片以填充容器，导致图标可能被切割。
🛠️ 修复方案：
将所有友链相关的ICO图标样式从object-fit: cover改为object-fit: contain，确保图标完整显示在容器内，不会被切割。同时添加flex-shrink: 0防止图标在flex布局中被压缩。
📝 修改文件：
1. 修改文件： page/page-friendlink-shiroki.php
修改位置： 第360行、第427行、第479行
修改内容：
- 将友链卡片中的ICO内联样式改为使用CSS类
shiroki-link-icon - 将友链申请区域中的网站ICO内联样式改为使用CSS类
shiroki-site-icon
新增CSS样式：
/* 🎨 友链图标自适应样式 */
.shiroki-link-icon {
width: 24px;
height: 24px;
border-radius: 50%;
object-fit: contain; // ◀️ 改为contain，确保图标完整显示不被切割
flex-shrink: 0; // ◀️ 防止图标在flex布局中被压缩
}
/* 🎨 网站ICO自适应样式 */
.shiroki-site-icon {
width: 32px;
height: 32px;
border-radius: 4px;
object-fit: contain; // ◀️ 改为contain，确保图标完整显示不被切割
border: 1px solid #e0e0e0;
flex-shrink: 0; // ◀️ 防止图标在flex布局中被压缩
}
2. 修改文件： assets/css/style.css
修改位置： 第3452行、第3460行、第4256行
修改内容：
① 友链卡片图标样式（第3452行）：
/* 修改前 */
.post-single .bookmark ul li .icon img {width:100%;height:100%;border-radius:50%;object-fit:cover;z-index:1;}
/* 修改后 */
.post-single .bookmark ul li .icon img {width:100%;height:100%;border-radius:50%;object-fit:contain;z-index:1;}
② 友链背景大图样式（第3460行）：
/* 修改前 */
.post-single .bookmark ul li .profile .imgbox img {width:100%;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:contain;border-radius:15px;user-select:none;pointer-events:none;}
③ 页脚友链图标样式（第4256行）：
/* 修改前 */
.footer-widgets .bookmark ul li .icon img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
z-index: 1;
}
/* 修改后 */
.footer-widgets .bookmark ul li .icon img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: contain;
z-index: 1;
}
👤 用户信息的会员中心动态显示
开发内容：实现了用户中心页面不存在时，自动隐藏所有会员中心相关选项的功能
具体修改：
- 核心函数添加：在
core/module/fun-user.php中新增了boxmoe_user_center_page_exists()函数，用于检查用户中心页面是否存在
- 前端状态传递：在
header.php中添加了标签，用于在前端传递用户中心页面是否存在的状态
- PHP模板修改：修改了
header.php中的三处代码，根据boxmoe_user_center_page_exists()函数的返回值动态显示或隐藏会员中心选项
- 移动端用户下拉菜单（第129-131行）
- 移动端侧边栏用户信息（第177-189行）
- 桌面端用户下拉框（第259-281行）
- JavaScript动态渲染：修改了
assets/js/boxmoe.js中的三处代码，根据meta标签的状态动态渲染或隐藏会员中心选项
- 移动端用户下拉菜单渲染（第299-316行）
- 移动端登录UI渲染（第1643-1645行）
- 桌面端用户下拉框渲染（第1764-1768行）
👤 用户中心页面不存在时的跳转优化
开发内容：优化了用户中心页面不存在时的跳转逻辑，避免出现404错误
具体修改：
- 核心函数修改：修改了
core/module/fun-user.php中的boxmoe_user_center_link_page()函数
- 将回退机制从返回 /user-center 改为返回网站首页 home_url()
- 当找不到用户中心页面时，函数会返回首页链接，避免404错误
- 注册成功跳转优化：修改了
page/p-signin.php中的前端跳转逻辑
- 将注册成功后的跳转地址从硬编码的登录页面 /signin 改为使用 boxmoe_user_center_link_page() 函数
- 注册成功后自动登录的用户会跳转到用户中心或首页，避免重复登录
效果：
- 当用户中心页面存在时，登录/注册成功后跳转到用户中心
- 当用户中心页面不存在时，登录/注册成功后跳转到网站首页
- 导航菜单中会隐藏用户中心链接（已有的判断逻辑）
🔣 修复initBannerTypingAnimation 函数会被多次调用
问题描述
当页面可见性变化时（例如从其他标签页切换回来），initBannerTypingAnimation 函数会被多次调用，导致以下两个问题：
- Object.defineProperty 报错：第3983行使用
Object.defineProperty定义的__boxmoeBannerAnimationState属性报错。错误信息为：
Uncaught TypeError: Cannot redefine property: __boxmoeBannerAnimationState
at Object.defineProperty (<anonymous>)
at initBannerTypingAnimation (boxmoe.js?ver=15.28:3983:16)
at Object.start (boxmoe.js?ver=15.28:4160:17)
at HTMLDocument.<anonymous> (boxmoe.js?ver=15.28:4188:42)
- 打字效果重复文本：旧的动画实例仍在运行（因为它的
setTimeout回调仍然存在），新的动画实例同时启动，导致两个动画同时运行，产生重复文本。
修复方法
在 assets/js/boxmoe.js 文件中进行以下修改：
1. 添加全局停止标志（第3920-3928行）
// 🛡️ 创建全局停止标志，用于防止多个动画实例同时运行
if (!window.hasOwnProperty('__boxmoeBannerAnimationStopped')) {
Object.defineProperty(window, '__boxmoeBannerAnimationStopped', {
writable: true,
configurable: true,
value: false
});
}
2. 在 type() 函数中检查停止标志（第3999-4003行）
function type() {
// 🛡️ 检查全局停止标志，如果动画已停止则不执行
if (window.__boxmoeBannerAnimationStopped) {
return;
}
// ... 后续代码
}
3. 在 stop() 方法中设置停止标志（第4149-4153行）
stop: function() {
// 🛡️ 设置全局停止标志，阻止所有正在运行的动画实例
if (window.hasOwnProperty('__boxmoeBannerAnimationStopped')) {
window.__boxmoeBannerAnimationStopped = true;
}
// ... 后续代码
}
4. 在 start() 方法中重置停止标志（第4170-4174行）
start: function() {
if (!this.isRunning) {
// 🛡️ 重置全局停止标志，允许新的动画实例运行
if (window.hasOwnProperty('__boxmoeBannerAnimationStopped')) {
window.__boxmoeBannerAnimationStopped = false;
}
// ... 后续代码
}
}
修复效果
- 解决 Object.defineProperty 报错：确保了
__boxmoeBannerAnimationState属性只会被定义一次，即使initBannerTypingAnimation函数被多次调用也不会报错。 - 解决打字效果重复文本：通过全局停止标志，确保旧的动画实例在停止后不会继续执行，即使
initBannerTypingAnimation()函数被多次调用，也只有一个动画实例在运行。 - 正常重新启动动画：当用户从其他标签页切换回来时，横幅打字动画会正常重新启动，而不会导致重复文本或 JavaScript 错误。
评论（2）