如何更改标题中按钮的顺序？

[anton21m]

大家好，我想彻底重做 Discourse 的头部导航栏。

我们公司的设计师为我草拟了这样一个设计方案，但我借助 CSS 未能完全实现。

不过，我遇到了一个问题：想把个人资料按钮移到最前面。我查阅了相关资料，找到了 \app\assets\javascripts\discourse\app\widgets\header.js 这个文件。

参考这个帮助，我成功移除了生产环境中的图标，并做了一些其他调整（参考链接：https://meta.discourse.org/t/solved-how-to-use-virtual-doms-h-helper-in-head-for-header-dropdown-hamburger-widget-override-how-to-override-computed-method/104583）。

但我还是无法移动按钮。

目前论坛的显示效果如下：

而我们需要的是这样（移动账户按钮并更改图标）：

请问我应该从哪些方面入手来实现这个需求？

[awesomerobot (Kris)]

你可以用 CSS 实现类似的效果：

.d-header-icons { 
  display: flex;
}

.header-dropdown-toggle.current-user { 
  order: 1; 
}
.header-dropdown-toggle.search-dropdown { 
  order: 2; 
}
.header-dropdown-toggle.hamburger-dropdown { 
  order: 3; 
}

[anton21m]

谢谢，非常好。

@awesomerobot

你可以用 CSS 实现类似的效果：

.panel .d-header-icons {
  display: flex;
}
.d-header-icons #current-user{
  order: 1;
}
.d-header-icons .header-dropdown-toggle {
  order: 2;
}

稍微修改一下后对我很有帮助。