また一つ、特に役に立たない機能です。投稿一覧のユーザーアバターの下にレベル進行バーを追加します。まず、コードを提供してくださった 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 はユーザーのトピック数です。

上記ではこの2つの変数に対して加減乗除を行っています。必要に応じてご自身で変更してください。現在のアルゴリズムでは、レベルアップは比較的簡単です。

最後に、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 で問題ありません。