---
title: "Flarum 用户头像下添加等级条 - 一纸忘忧"
description: "又来一个并没有什么卵用的功能，为帖子列表中的用户头像下添加等级进度条。首先感谢 4tabern.com 提供代码，演示效果就不发了，因为我自己的站上面也没有用，实在是累赘，实际效果自己测试吧，欢迎反馈。"
canonical_url: "https://www.ikxin.com/article/flarum-avatar-levelbar"
last_updated: "2026-09-16T09:59:27.259Z"
locale: zh-cn
meta:
  "og:description": "又来一个并没有什么卵用的功能，为帖子列表中的用户头像下添加等级进度条。首先感谢 4tabern.com 提供代码，演示效果就不发了，因为我自己的站上面也没有用，实在是累赘，实际效果自己测试吧，欢迎反馈。"
  "og:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~RmxhcnVtIOeUqOaIt-WktOWDj-S4i-a3u-WKoOetiee6p-adoSAtIOS4gOe6uOW~mOW~pw%2Cc_Article%2Ctitle_~RmxhcnVtIOeUqOaIt-WktOWDj-S4i-a3u-WKoOetiee6p-adoQ%2Cdescription_~5Y-I5p2l5LiA5Liq5bm25rKh5pyJ5LuA5LmI5Y2155So55qE5Yqf6IO977yM5Li65biW5a2Q5YiX6KGo5Lit55qE55So5oi35aS05YOP5LiL5re75Yqg562J57qn6L-b5bqm5p2h44CC6aaW5YWI5oSf6LCiIDR0YWJlcm4uY29tIOaPkOS-m-S7o-egge-8jOa8lOekuuaViOaenOWwseS4jeWPkeS6hu-8jOWboOS4uuaIkeiHquW3seeahOermeS4iumdouS5n-ayoeacieeUqO-8jOWunuWcqOaYr-e0r-i1mO-8jOWunumZheaViOaenOiHquW3sea1i-ivleWQp--8jOasoui~juWPjemmiOOAgg%2CsiteName_~5LiA57q45b-Y5b-n%2CsiteHost_www.ikxin.com%2Cp_Ii9hcnRpY2xlL2ZsYXJ1bS1hdmF0YXItbGV2ZWxiYXIi%2Cs_9ejYWy2DaP1SrcXw.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_~RmxhcnVtIOeUqOaIt-WktOWDj-S4i-a3u-WKoOetiee6p-adoSAtIOS4gOe6uOW~mOW~pw%2Cc_Article%2Ctitle_~RmxhcnVtIOeUqOaIt-WktOWDj-S4i-a3u-WKoOetiee6p-adoQ%2Cdescription_~5Y-I5p2l5LiA5Liq5bm25rKh5pyJ5LuA5LmI5Y2155So55qE5Yqf6IO977yM5Li65biW5a2Q5YiX6KGo5Lit55qE55So5oi35aS05YOP5LiL5re75Yqg562J57qn6L-b5bqm5p2h44CC6aaW5YWI5oSf6LCiIDR0YWJlcm4uY29tIOaPkOS-m-S7o-egge-8jOa8lOekuuaViOaenOWwseS4jeWPkeS6hu-8jOWboOS4uuaIkeiHquW3seeahOermeS4iumdouS5n-ayoeacieeUqO-8jOWunuWcqOaYr-e0r-i1mO-8jOWunumZheaViOaenOiHquW3sea1i-ivleWQp--8jOasoui~juWPjemmiOOAgg%2CsiteName_~5LiA57q45b-Y5b-n%2CsiteHost_www.ikxin.com%2Cp_Ii9hcnRpY2xlL2ZsYXJ1bS1hdmF0YXItbGV2ZWxiYXIi%2Cs_9ejYWy2DaP1SrcXw.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,657  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/#website","@type":"WebSite","description":"一纸忘忧的个人网站，关于技术探索与日常生活，记录 Web 开发、服务端与 DevOps 实践，分享软件工具、数码体验，以及代码之外的见闻与思考。","inLanguage":"zh-CN","name":"一纸忘忧","url":"https://www.ikxin.com/","workTranslation":[{"@id":"https://www.ikxin.com/zh-tw#website"},{"@id":"https://www.ikxin.com/ko#website"},{"@id":"https://www.ikxin.com/en#website"},{"@id":"https://www.ikxin.com/ja#website"}]},{"@id":"https://www.ikxin.com/article/flarum-avatar-levelbar#webpage","@type":"WebPage","description":"又来一个并没有什么卵用的功能，为帖子列表中的用户头像下添加等级进度条。首先感谢 4tabern.com 提供代码，演示效果就不发了，因为我自己的站上面也没有用，实在是累赘，实际效果自己测试吧，欢迎反馈。","name":"Flarum 用户头像下添加等级条","url":"https://www.ikxin.com/article/flarum-avatar-levelbar","isPartOf":{"@id":"https://www.ikxin.com/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/article/flarum-avatar-levelbar"]}]}]}
```

## Sitemap

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