登录后如何在导航中显示用户名和头像？

开发
2

你好，欢迎回来 Auston！

您能否尝试一下这个自定义的 HTML/CSS？
这应该可以很好地处理所有带有/不带新通知菜单启用的通知徽章。

我建议您创建一个主题组件。如果您不知道，这里有详细说明：Beginner's guide to using Discourse Themes

注意：在移动视图中已禁用。
注意：CSS 基于默认主题；您可能需要进行调整。如有疑问，请随时提出。

我没有进行广泛测试，但希望这对您有用！

头部 
<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 个赞