正文

又来一个并没有什么卵用的功能，为帖子列表中的用户头像下添加等级进度条，首先感谢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 就可以了。