또 하나의 별로 쓸모없는 기능입니다. 게시글 목록에서 사용자 아바타 아래에 레벨 진행률 표시줄을 추가합니다. 먼저 코드를 제공해 주신 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를 실행하면 됩니다.