ログイン時にナビゲーションでアバターの横にユーザー名を表示するにはどうすればよいですか？

開発
1

皆さん、こんにちは。
ユーザーがログインしているときに、アバターの横のナビゲーションバーにユーザー名を表示する方法はありますか？下のスクリーンショットを参照してください。

name
name258×187 3.48 KB

2

こんにちは、お帰りなさい、オースティン！

このカスタム HTML/CSS を試していただけますか？
これは、新しい通知メニューが有効になっているかどうかにかかわらず、すべての通知バッジで正常に機能するはずです。

テーマコンポーネントを作成することをお勧めします。ご存知ない場合は、すべてここに説明されています: Beginner's guide to using Discourse Themes

注: モバイルビューでは無効になっています。
注: CSS はデフォルトのテーマに基づいています。調整が必要になる場合があります。お気軽にお尋ねください。

広範なテストは行っていませんが、うまくいくことを願っています！

Head 
<script type="text/discourse-plugin" version="0.8.13">

api.decorateWidget('header-notifications:after', dec => {
    const { currentUser, site } = dec.widget;

    if (site.mobileView) {
        return;
    }
    
    return dec.h('span.username', currentUser.displayName);
})

</script>
CSS 
html:not(.mobile-view) #current-user {
    span.username {
        display: inline-block;
        vertical-align: middle;
        margin-left: 5px;
    }
    
    .icon.btn-flat {
        width: auto;
    }
    
    .user-status-background {
        left: 22px;
    }
    
    .badge-notification {
        &.with-icon.new-pms {
            left: -3px;
            right: auto;
            top: 4px;
        }
    }
    
    .unread-notifications {
        left: 25px;
        right: auto;
    }
    
    .unread-high-priority-notifications,
    .ring {
        left: -3px;
        right: auto;
    }
}
「いいね！」 4
3

どうもありがとうございます。うまくいきました :slight_smile:

「いいね！」 2