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

大家好,我想彻底重做 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)。

但我还是无法移动按钮。

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

而我们需要的是这样(移动账户按钮并更改图标):

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

2 个赞

你可以用 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; 
}
5 个赞

谢谢,非常好。

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

2 个赞

此主题在最后一次回复后 2 天自动关闭。不再允许新回复。