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

**URL:** https://meta.discourse.org/t/how-to-show-users-name-next-to-avatar-in-the-navigation-when-logged-in/258668
**Category:** Development
**Created:** [2023年三月19日 18:47 UTC](https://meta.discourse.org/t/how-to-show-users-name-next-to-avatar-in-the-navigation-when-logged-in/258668 "2023-03-19T18:47:59Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![asugar](https://avatars.discourse-cdn.com/v4/letter/a/eb9ed0/32.png) [@asugar](https://meta.discourse.org/u/asugar)
#### Post date: [2023年三月19日 18:48 UTC](https://meta.discourse.org/t/how-to-show-users-name-next-to-avatar-in-the-navigation-when-logged-in/258668/1 "2023-03-19T18:48:00Z")

</div>

大家好，

登录后，是否可以在导航栏中显示用户名和头像？请参见下面的截图。

 ![name](https://global.discourse-cdn.com/meta/original/4X/c/2/c/c2ca7200a3cc29eb57adf40b340fd888049df9c9.png)

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [2023年三月20日 02:49 UTC](https://meta.discourse.org/t/how-to-show-users-name-next-to-avatar-in-the-navigation-when-logged-in/258668/2 "2023-03-20T02:49:30Z")

</div>

你好，欢迎回来 Auston！

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

我建议您创建一个主题组件。如果您不知道，这里有详细说明：[Beginner's guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966#create-new-themes-and-theme-components-7)

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

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

> **头部**
>
> ```js
> <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**
>
> ```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;
> }
> }
> 
> ```

---

<div class="post-metadata">

### Author: ![asugar](https://avatars.discourse-cdn.com/v4/letter/a/eb9ed0/32.png) [@asugar](https://meta.discourse.org/u/asugar)
#### Post date: [2023年三月20日 21:11 UTC](https://meta.discourse.org/t/how-to-show-users-name-next-to-avatar-in-the-navigation-when-logged-in/258668/3 "2023-03-20T21:11:13Z")

</div>

非常感谢。它奏效了 🙂