---
title: "Flarum 사용자 아바타 아래에 레벨 표시줄 추가 - 근심을 잊는 한 장"
description: "또 하나의 별로 쓸모없는 기능입니다. 게시글 목록에서 사용자 아바타 아래에 레벨 진행률 표시줄을 추가합니다. 먼저 코드를 제공해 주신 4tabern.com에 감사드립니다. 데모 효과는 올리지 않겠습니다. 제 사이트에도 사용하지 않고 있고 정말 번거롭기 때문입니다. 실제 효과는 직접 테스"
canonical_url: "https://www.ikxin.com/ko/article/flarum-avatar-levelbar"
last_updated: "2026-09-16T09:59:27.259Z"
locale: ko
meta:
  "og:description": "또 하나의 별로 쓸모없는 기능입니다. 게시글 목록에서 사용자 아바타 아래에 레벨 진행률 표시줄을 추가합니다. 먼저 코드를 제공해 주신 4tabern.com에 감사드립니다. 데모 효과는 올리지 않겠습니다. 제 사이트에도 사용하지 않고 있고 정말 번거롭기 때문입니다. 실제 효과는 직접 테스"
  "og:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~RmxhcnVtIOyCrOyaqeyekCDslYTrsJTtg4Ag7JWE656Y7JeQIOugiOuyqCDtkZzsi5zspIQg7LaU6rCAIC0g6re87Ius7J2EIOyeiuuKlCDtlZwg7J6l%2Cc_Article%2Ctitle_~RmxhcnVtIOyCrOyaqeyekCDslYTrsJTtg4Ag7JWE656Y7JeQIOugiOuyqCDtkZzsi5zspIQg7LaU6rCA%2Cdescription_~65iQIO2VmOuCmOydmCDrs4TroZwg7JO466qo7JeG64qUIOq4sOuKpeyeheuLiOuLpC4g6rKM7Iuc6riAIOuqqeuhneyXkOyEnCDsgqzsmqnsnpAg7JWE67CU7YOAIOyVhOuemOyXkCDroIjrsqgg7KeE7ZaJ66WgIO2RnOyLnOykhOydhCDstpTqsIDtlanri4jri6QuIOuovOyggCDsvZTrk5zrpbwg7KCc6rO17ZW0IOyjvOyLoCA0dGFiZXJuLmNvbeyXkCDqsJDsgqzrk5zrpr3ri4jri6QuIOuNsOuqqCDtmqjqs7zripQg7Jis66as7KeAIOyViuqyoOyKteuLiOuLpC4g7KCcIOyCrOydtO2KuOyXkOuPhCDsgqzsmqntlZjsp4Ag7JWK6rOgIOyeiOqzoCDsoJXrp5Ag67KI6rGw66Gt6riwIOuVjOusuOyeheuLiOuLpC4g7Iuk7KCcIO2aqOqzvOuKlCDsp4HsoJEg7YWM7Iqk%2CsiteName_~6re87Ius7J2EIOyeiuuKlCDtlZwg7J6l%2CsiteHost_www.ikxin.com%2Cp_Ii9rby9hcnRpY2xlL2ZsYXJ1bS1hdmF0YXItbGV2ZWxiYXIi%2Cs_hQnDD14F0sTOn88W.png"
  "og:image:alt": "Flarum 사용자 아바타 아래에 레벨 표시줄 추가 - 근심을 잊는 한 장"
  "og:image:height": "630"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": "Flarum 사용자 아바타 아래에 레벨 표시줄 추가"
  "twitter:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~RmxhcnVtIOyCrOyaqeyekCDslYTrsJTtg4Ag7JWE656Y7JeQIOugiOuyqCDtkZzsi5zspIQg7LaU6rCAIC0g6re87Ius7J2EIOyeiuuKlCDtlZwg7J6l%2Cc_Article%2Ctitle_~RmxhcnVtIOyCrOyaqeyekCDslYTrsJTtg4Ag7JWE656Y7JeQIOugiOuyqCDtkZzsi5zspIQg7LaU6rCA%2Cdescription_~65iQIO2VmOuCmOydmCDrs4TroZwg7JO466qo7JeG64qUIOq4sOuKpeyeheuLiOuLpC4g6rKM7Iuc6riAIOuqqeuhneyXkOyEnCDsgqzsmqnsnpAg7JWE67CU7YOAIOyVhOuemOyXkCDroIjrsqgg7KeE7ZaJ66WgIO2RnOyLnOykhOydhCDstpTqsIDtlanri4jri6QuIOuovOyggCDsvZTrk5zrpbwg7KCc6rO17ZW0IOyjvOyLoCA0dGFiZXJuLmNvbeyXkCDqsJDsgqzrk5zrpr3ri4jri6QuIOuNsOuqqCDtmqjqs7zripQg7Jis66as7KeAIOyViuqyoOyKteuLiOuLpC4g7KCcIOyCrOydtO2KuOyXkOuPhCDsgqzsmqntlZjsp4Ag7JWK6rOgIOyeiOqzoCDsoJXrp5Ag67KI6rGw66Gt6riwIOuVjOusuOyeheuLiOuLpC4g7Iuk7KCcIO2aqOqzvOuKlCDsp4HsoJEg7YWM7Iqk%2CsiteName_~6re87Ius7J2EIOyeiuuKlCDtlZwg7J6l%2CsiteHost_www.ikxin.com%2Cp_Ii9rby9hcnRpY2xlL2ZsYXJ1bS1hdmF0YXItbGV2ZWxiYXIi%2Cs_hQnDD14F0sTOn88W.png"
  "twitter:image:alt": "Flarum 사용자 아바타 아래에 레벨 표시줄 추가 - 근심을 잊는 한 장"
---

> Index of every page on this site: [llms.txt](https://www.ikxin.com/llms.txt)

# **Flarum 사용자 아바타 아래에 레벨 표시줄 추가**

2018.07.27 4,670  0

또 하나의 별로 쓸모없는 기능입니다. 게시글 목록에서 사용자 아바타 아래에 레벨 진행률 표시줄을 추가합니다. 먼저 코드를 제공해 주신 [4tabern.com](https://4tabern.com)에 감사드립니다. 데모 효과는 올리지 않겠습니다. 제 사이트에도 사용하지 않고 있고 정말 번거롭기 때문입니다. 실제 효과는 직접 테스트해 보시고, 의견을 남겨 주세요.

아래 수정 사항은 Flarum 0.1.0 beta7 - Flarum 0.1.0 beta7.1에만 적용됩니다(다른 버전에서는 내부의 교체 코드를 자세히 확인하고, 새로 추가된 부분을 별도로 삽입해 주세요).

## 과정

파일 `vendor/flarum/core/js/forum/dist/app.js`를 편집합니다.

다음 부분을

 JavaScript

```
            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;
```

다음 내용으로 변경합니다.

 JavaScript

```
            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`를 편집합니다.

맨 마지막에 다음 내용을 추가합니다.

 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`를 실행하면 됩니다.

## **댓글**

(0)

아직 댓글이 없습니다

## **댓글 작성**

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://www.ikxin.com/ko#website","@type":"WebSite","description":"근심을 잊는 한 장은 기술 탐구와 일상을 다루는 개인 웹사이트입니다. 웹 개발, 백엔드 및 DevOps 실무를 기록하고 소프트웨어 도구와 디지털 경험, 코드 밖의 견문과 생각을 나눕니다.","inLanguage":"ko-KR","name":"근심을 잊는 한 장","url":"https://www.ikxin.com/ko","translationOfWork":{"@id":"https://www.ikxin.com/#website"}},{"@id":"https://www.ikxin.com/ko/article/flarum-avatar-levelbar#webpage","@type":"WebPage","description":"또 하나의 별로 쓸모없는 기능입니다. 게시글 목록에서 사용자 아바타 아래에 레벨 진행률 표시줄을 추가합니다. 먼저 코드를 제공해 주신 4tabern.com에 감사드립니다. 데모 효과는 올리지 않겠습니다. 제 사이트에도 사용하지 않고 있고 정말 번거롭기 때문입니다. 실제 효과는 직접 테스","name":"Flarum 사용자 아바타 아래에 레벨 표시줄 추가","url":"https://www.ikxin.com/ko/article/flarum-avatar-levelbar","isPartOf":{"@id":"https://www.ikxin.com/ko#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/ko/article/flarum-avatar-levelbar"]}]}]}
```

## Sitemap

See the full [sitemap](https://www.ikxin.com/sitemap.md) for all pages.