标题子菜单

[LeoDavidson]

当启用了固定模式（始终显示菜单，即使在向下滚动时）时，似乎出现了一个 bug。

我在 Discourse 2.9.0.beta8 中看到了这个问题，并且在官方 Discourse 主题预览网站上也很容易重现。我认为我大约在 2 周前首次注意到它，但不确定它是什么时候开始发生的。

重现步骤：

• 在主题组件的设置中启用固定模式。
• 点击一个有很多回复的帖子。
• （如果你是第一次阅读该帖子，并且位于最顶部，向下滚动几条回复，然后返回帖子列表，再点击该帖子，这样你就会被带回到你之前的位置。）

页面顶部的填充量计算错误，导致帖子顶部和发帖人姓名被标题遮挡而无法显示。

每次点击帖子时，你都必须向上滚动一点，才能看到你正在阅读的帖子的发帖人是谁。

进入帖子时，你会看到这个：

你应该看到这样的画面：

非常奇怪的是，它并非总是发生，并且按下 Ctrl-F5 通常可以修复它。但过一段时间后它又会再次发生。

编辑 CSS 以增加添加到 main-outlet 的填充量可以“部分”修复问题，但这样会在帖子列表的顶部产生大量空白。似乎帖子列表和帖子需要不同的填充量，或者其中一个组件添加了两次填充，或者从其他地方添加了额外的填充？

（编辑：有时页面无法向上滚动足够远以看到问题。例如，当你转到帖子中的最后一篇回复并且它很短时，即使你手动向下滚动尽可能多，标题也无法覆盖发帖人的姓名。这可能解释了某些情况下的问题。使用一个不太高的浏览器窗口来测试，这是重现 bug 最可靠的方法。）

[Tris20 (Tristan)]

有什么方法可以防止此内容显示在登录屏幕上？我可以使用以下 CSS 来实现，但这仍然会在一秒钟内显示标题子菜单，然后再将其隐藏。

.static-login .top-menu {
	display: none;
}
.static-login .d-header-wrap {
	display: none;
}

是否有更好的方法可以防止此内容出现在 static-login 页面上？

[awesomerobot (Kris)]

此主题及其他主题在爬虫视图中将无法正常工作；爬虫视图无法加载 Discourse 的大部分 JavaScript。

[davidkingham]

嘿 Kris，这个组件可以更新一下，以便在聊天和侧边栏中使用。当 fixed_mode 设置开启时，聊天和侧边栏不会向下移动，而是会出现在 d-header 后面。

下面的 CSS 似乎能很好地解决这个问题，但它与 Category Banners 不兼容，因为它似乎会在分类页面上将 #main-outlet 向下推额外的 40px。谢谢！

.sidebar-wrapper, .main-chat-outlet, .chat-drawer {
    margin-top: 40px !important;
}

[awesomerobot (Kris)]

感谢您指出这一点！我刚刚在此处进行了一些修复：

UX: update fixed styling for sidebar & chat

[davidkingham]

太棒了，谢谢 Kris！你知道 #main-outlet 下降 40px 是什么原因吗？

#main-outlet {
   padding-top: calc(1.8em + 40px);
}

[awesomerobot (Kris)]

Ah I overlooked that — that can be removed, and will be once this PR is merged: UX: remove old main-outlet adjustment by awesomerobot · Pull Request #19 · discourse/discourse-header-submenus · GitHub

Update: that’s now merged, so the extra space will go away if you update the component.

[P2W (Mike Riddick)]

一个人可以在哪里找到图标名称？

[awesomerobot (Kris)]

我相信这里列出的所有内容都可供使用：Find the Perfect Icon for Your Project in Font Awesome 5 | Font Awesome

不过，有些图标需要额外的步骤……对于 Discourse 默认不使用的图标，图标名称需要添加到 Svg icons 主题设置中。

如果您真的想具体了解，所有 Discourse 默认使用的图标都列在这里：discourse/lib/svg_sprite.rb at da0d20d4a99aab40bd08bf133a425be413521d5a · discourse/discourse · GitHub

所有可在主题中使用的图标（通过 svg icons 设置）都在此目录中：discourse/vendor/assets/svg-icons at main · discourse/discourse · GitHub

在 GitHub 上查看 SVG 文件实际上没有帮助，因为您会看到一个大白框：

但您可以单击“raw”按钮并查看页面源代码，图标名称是 symbol 的 id

[P2W (Mike Riddick)]

你太棒了，非常感谢

[davidkingham]

谢谢 Kris，问题解决了。不过我注意到还有其他几个问题。.topic-navigation 需要向下推 40px，并且 .topic-post.sticky-avatar .topic-avatar 在向下滚动时计算似乎不正确，它会跑到 d-header 后面。另外，作曲家和聊天窗口可以扩展得太高，导致控件也跑到 d-header 后面。我想这就差不多了！

编辑：还有一件事，当你访问锚点链接时，标题也会跑到标题下方。

[satonotdead]

有人解决这个问题了吗？我喜欢不使用额外空间并重用屏幕上已有资源的方法。

将鼠标悬停在徽标上即可导航到博客、文档或维基，这真的很酷！

[alxndr (Alexander)]

FWIW Kris提到的“svg图标主题设置”目前可以在“管理”>“设置”>“其他”>“底部附近找到svg icon subset（……我想这是正确的？？）”

[davidkingham]

新的 Glimmer 灯箱存在小的 z-index 问题，1001 仅将其置于灯箱之上，因为灯箱的 z-index 为 1000。

[awesomerobot (Kris)]

经典的 z-index 问题，下次 Discourse 更新时会修复

UX: increase experimental lightbox z-index

[clement]

感谢您提供的这个很棒的插件。

我想知道，是否有一种方法可以在未登录时隐藏页眉子菜单？

或者（作为开发想法？），也许更好的是，让菜单项链接到组（信任级别或其他）？
我知道这很容易提出……

谢谢
C.

[Kieran_Berryman]

我不认为其他地方有这个功能，如果重复了，我很抱歉。我喜欢使用标题子菜单，但我有很多顶部标题，结果在移动设备上看起来很糟糕。我希望我的标题不会超出屏幕范围导致我滚动。这可能吗？

[Kieran_Berryman]

好的，我通过将所有最重要的链接编译成移动设备上的“导航”顶部标题下的子菜单，大致解决了我的问题。