2025.10.6
改动
- 安装了fancybox图片灯箱插件：
composer require darkle/fancybox
- 安装了User badges 徽章插件：
composer require v17development/flarum-user-badges
修复详情
fancybox多图合并时增加角标数字显示
10086mea/flarum-ext-fancybox
操作步骤：
编辑 JavaScript 文件
打开 js/src/forum/index.ts 文件。
修改代码
在 extend(CommentPost.prototype, 'refreshContent', function () { ... }); 函数的末尾（在最后一个 .each(...) 之后，但在 }); 之前），添加以下代码：
// 在文件末尾的 }); 前面添加这段代码
postBody.children('.fancybox-gallery.fancybox-ready').each((_, gallery) => {
const $gallery = $(gallery);
const slides = $gallery.find('.f-carousel__slide');
const imageCount = slides.length;
if (imageCount > 1) {
const firstSlide = slides.first();
const moreCount = imageCount - 1;
// 避免重复添加角标
if (firstSlide.find('.gallery-more-badge').length === 0) {
// 创建角标元素，使用 FontAwesome 图标
const badge = $('<div class="gallery-more-badge"></div>')
.html(`<i class="fas fa-plus"></i> ${moreCount}`);
firstSlide.append(badge);
}
}
});
编辑 CSS 文件
打开插件的 less/forum.less 文件。
添加角标样式
在文件末尾添加以下 CSS 代码：
/* 确保轮播图的 slide 可以相对定位 */
.f-carousel__slide {
position: relative;
}
/* “+N” 角标的样式 */
.gallery-more-badge {
position: absolute;
bottom: 5px;
right: 5px;
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: bold;
pointer-events: none; /* 非常重要，让点击可以穿透到图片上 */
z-index: 10;
}
.gallery-more-badge .fas {
margin-right: 3px;
}
User badges设置页面窗口不显示bug修复
问题根源
问题出在弹窗的 CSS class 是根据“图片徽章”这个开关的状态动态改变的。
文件: js/src/admin/components/EditBadgeModal.js
具体代码: 文件中的 className() 方法。
// js/src/admin/components/EditBadgeModal.js
// ... (其他代码)
className() {
return this.isImage() ? 'Modal--small' : 'Modal--large';
}
// ... (其他代码)
代码分析
状态绑定: 在这个文件中，this.isImage 是一个状态变量，它与“图片徽章”的开关（Switch组件）是绑定的。当你点击开关时，this.isImage() 的返回值会从 false 变为 true。
动态 Class: className() 方法决定了这个弹窗组件根元素的 CSS class。
当开关未勾选时 (this.isImage() 为 false)，弹窗的 class 是 Modal--large，这是一个大尺寸的弹窗，可以容纳所有的表单项。
当你勾选开关后 (this.isImage() 变为 true)，className() 方法会立刻返回 Modal--small。
错乱原因: 弹窗的 class 从 Modal--large 瞬间切换到 Modal--small，导致弹窗容器突然变小。但是，弹窗内的表单元素（如图标、背景颜色、文本颜色等输入框）并没有立即隐藏或移除，它们被硬生生地挤在了变小了的空间里，从而导致了你看到的样式错乱。
如何修复
最简单的修复方法是让弹窗始终保持为大尺寸，无论开关是否被勾选。这样可以提供足够的空间来容纳所有选项，避免布局崩溃。
请修改以下文件：
文件: js/src/admin/components/EditBadgeModal.js
修改前:
className() {
return this.isImage() ? 'Modal--small' : 'Modal--large';
}
修改后:
className() {
return 'Modal--large';
}
修改效果:
通过这个修改，即使用户勾选了“图片徽章”，弹窗的容器大小也不会再发生变化，从而解决了因尺寸突变导致的样式错乱问题。
徽章的讨论区显示问题
首先更换版本到这个pull，实现讨论区徽章显示
v17development/flarum-user-badges29
第 1 步：修改 JavaScript 文件
你需要修改 js/src/forum/addDiscussionUserBadge.js 文件，将分散的徽章元素包裹在一个 div 容器里。
文件路径: js/src/forum/addDiscussionUserBadge.js
修改前 ❌:
if(badges.length>0){
list[0].children.push(<div style="height:15px"></div>);
for(let i=0;i<badges.length;i++){
list[0].children.push(badges[i]);
}
}
修改后 ✅:
if (badges.length > 0) {
// 创建一个 div 容器来包裹所有的徽章
const badgesContainer = <div className="Post-badges">{badges}</div>;
// 将这个容器推送到帖子内容中
list[0].children.push(badgesContainer);
}
修改说明：
我们不再将徽章一个一个地添加到帖子内容里，而是创建了一个名为 Post-badges 的 div 容器，将所有徽章都放进去，然后将这个容器作为一个整体添加到帖子中。这样我们就可以通过 CSS 来精确控制 .Post-badges 这个容器的位置了。
第 2 步：添加 CSS 代码
现在，你可以添加以下 CSS 代码到你的 less/forum.less 文件中，来将徽章容器定位到右上角。
文件路径: less/forum.less
.Post-body {
position: relative;
}
.Post-badges {
position: absolute;
top: 15px;
right: 15px;
display: flex;
gap: 5px;
}
遗留问题：灯箱索引还需要优化，不能索引整个帖子的图片
