로그인 상태일 때 내비게이션의 아바타 옆에 사용자 이름을 표시하는 방법?

개발
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;
    }
}