正文
又来一个并没有什么卵用的功能,为帖子列表中的用户头像下添加等级进度条,首先感谢4tabern.com提供代码,演示效果就不发了,因为我自己的站上面也没有用,实在是累赘,实际效果自己测试吧,欢迎反馈。以下修改仅适用于 flarum 0.1.0 beta7- flarum 0.1.0 beta7.1(其它版本请仔细查看里面替换代码中,新增部分单独插入)。
过程
编辑文件 vendor/flarum/core/js/forum/dist/app.js
把这一部分
var card = '';
if (!post.isHidden() && this.cardVisible) {
card = UserCard.component({
user: user,
className: 'UserCard--popover',
controlsButtonClassName: 'Button Button--icon Button--flat'
});
}
return m(
'div',
{ className: 'PostUser' },
m(
'h3',
null,
m(
'a',
{ href: app.route.user(user), config: m.route },
avatar(user, { className: 'PostUser-avatar' }),
userOnline(user),
username(user)
)
),
m(
'ul',
{ className: 'PostUser-badges badges' },
listItems(user.badges().toArray())
),
card
);
}
}, {
key: 'config',
value: function config(isInitialized) {
var _this2 = this;
if (isInitialized) return;
var timeout = void 0;
改为以下内容
var card = '';
var exp_c = (user.data.attributes.commentsCount - user.data.attributes.discussionsCount) * 21;
var exp_d = user.data.attributes.discussionsCount * 33;
var exp_total = exp_c + exp_d;
var level = Math.floor(exp_total / 135);
var exp_percent = (100 / 135) * ((exp_total) - (level * 135));
if (!post.isHidden() && this.cardVisible) {
card = UserCard.component({
user: user,
className: 'UserCard--popover',
controlsButtonClassName: 'Button Button--icon Button--flat'
});
}
return m(
'div',
{ className: 'PostUser' },
userOnline(user),
m(
'h3',
null,
m(
'a',
{ href: app.route.user(user), config: m.route },
avatar(user, { className: 'PostUser-avatar' }),
' ',
username(user)
)
),
m(
'ul',
{ className: 'PostUser-badges badges' },
listItems(user.badges().toArray())
),
card,
m(
'div',
{ className: 'PostUser-level' },
'等级' + ' ' + level,
m(
'div',
{ className: 'levelbar-empty', style: 'width:100%' },
m(
'div',
{ className: 'levelbar', style: 'width:'+exp_percent+'%' }
)
)
)
);
}
}, {
key: 'config',
value: function config(isInitialized) {
var _this2 = this;
if (isInitialized) return;
var timeout = void 0;
var user = this.props.post.user();
if (user) {
var exp_c = (user.data.attributes.commentsCount - user.data.attributes.discussionsCount) * 21;
var exp_d = user.data.attributes.discussionsCount * 33;
var exp_total = exp_c + exp_d;
this.$('.levelbar-empty').tooltip({ container: 'body', title: exp_total+' '+'积分' });
}
主要内容提示:
在复制前,自行修改里面的等级
和积分
为你想要的内容,等级是显示在进度条上面的文字,积分是鼠标移动到上面显示的提示。
变量说明:user.data.attributes.commentsCount
是用户的回帖数,user.data.attributes.discussionsCount
是用户的主题数
上面使用这两个变量加减乘除请自己按自己的需求修改,当前的算法,等级提升还是比较轻松的。
最后你需要加入 less 样式
编辑\vendor\flarum\core\less\forum\Post.less
在最后面加入
@media (max-width: 767px){
.PostUser-level{display:none}
.PostUser-level
.levelbar-empty{display:none}
.PostUser-level .levelbar{display:none}
}
@media (min-width: 992px), (min-width: 768px) and (max-width: 991px){
.PostUser-level{display:none}
.DiscussionPage .PostUser-level{
display:block;
margin-left:-85px;
margin-top:70px;
text-align:center;
float:left;
width:64px
}
.DiscussionPage .PostUser-level .levelbar-empty{
background:@control-bg;
border-radius:10px;height:10px
}
.DiscussionPage .PostUser-level .levelbar{
margin-top:0;
z-index:11;
background:@primary-color;
border-radius:10px;
height:10px
}
}
.Post--hidden {
.PostUser-level{display:none}
.PostUser-level .levelbar-empty{display:none}
.PostUser-level .levelbar{display:none}
}
修改完之后自行清除缓存,一般 php flarum cache:clear
就可以了。