⬇️ 下拉菜单标题

主题组件
49

是的。那正是我的问题。感谢您的指出。

50

在 svg 图标子集中，您添加要查找的 Font Awesome 图标的名称，然后在标题中添加按钮的菜单中使用相同的语法。对于用户图标，您只需键入“user”，例如。

51

我通过这段脚本实现了链接在新标签页中打开。只需将以下脚本添加到“Head”部分。

<script>
document.addEventListener("DOMContentLoaded", function() {
    const links = document.querySelectorAll(".custom-header-link.with-url");
    links.forEach(link => {
        link.addEventListener("click", function(e) {
            e.preventDefault();
            e.stopPropagation();
            const titles = {
                "Documentation": "Enter URL Here",
                "Downloads": "Enter URL Here",
                "Source Code": "Enter URL Here",
                "Dev Portal": "Enter URL Here",
                "Slack Channel": "Enter URL Here"
            };
            const url = titles[this.getAttribute("title")];
            if (url) {
                window.open(url, '_blank');
            }
        });
        link.setAttribute("href", "#");
    });
});
</script>

希望这有帮助！

52

当站点标题最小化并显示当前主题的主题标题（向下滚动主题时）时，是否可以拥有不同的视图？

我注意到下拉标题在宽屏上看起来仍然很棒，而且很有意义，但在小屏幕上却不是。因此，进行 display: none 会很有用，并且在桌面上的 max-width: 712px 时已经完成了。

谢谢，致以诚挚的问候。 :slight_smile:

2 个赞
53

在移动设备上只显示下拉菜单标题的方法吗？

我尝试了以下方法：

/* 默认样式 - 隐藏 header-buttons */
.header-buttons {
  display: none;
  visibility: hidden;
}

/* 移动设备的媒体查询 */
@media screen and (max-width: 767px) {
  .header-buttons {
    display: inline; /* 或者 display: inline-block; 取决于你的布局 */
    visibility: visible;
  }
}

这有效，但标题中的其他任何内容（例如 GitHub - discourse/discourse-header-search ）仍然缩小，就好像下拉菜单标题仍然存在一样……

我错过了什么？

谢谢

1 个赞
54

很可能你的自定义设置被覆盖了。
你不需要 visibility – 你可以这样做：

.header-buttons {
  display: none !important;
}
2 个赞
55

关于安全功能使用的问题：

如果您正在使用此功能，是否可以将多个安全组授予对菜单的访问权限？

我们的示例：我们运行多个教育项目（每个项目有多个年级/班级组），每个班级组都有自己的安全组，以便我们授予他们访问正确教育资源的权限（而不会让他们访问其他项目/班级年份的资源），每个年级组都有一个独特的类别供其班级使用。

我需要创建菜单以允许每个班级访问其类别，但我也需要让我们的教育团队（不在学生的安全组中）进入这些空间。

目前我能看到的两种解决方案：

  • 创建一个结合了员工和每个班级的安全组（这很麻烦，因为我希望安全组更简单，而不是更复杂）
  • 复制菜单，这样学生组有一个菜单，员工组有一个菜单

这两种方法似乎都不理想。

下一个问题：关于为子菜单项添加安全功能怎么样？
（以我的例子来说：这样我就可以有一个菜单供所有各种课程/班级组使用，然后只向学生显示适用的子菜单项。而目前我需要管理大约 5-6 个顶级菜单）

1 个赞
56

我建议您寻找此主题组件的替代方案，因为它不适合您的用例。

我能否建议您将类别放入默认的 default_navigation_menu_categories 站点设置中？

作为管理员，您将看到所有类别（尽管您可以个性化该视图），但您的班级成员和员工只能在侧边栏中看到他们有权访问的类别。

如果我正确理解您的问题，这应该对您很有帮助。

2 个赞
57

嘿 Nathan，

我们已经设置好了分类。但我们也希望在页面顶部有一个菜单。用户们习惯了顶部菜单——社区本身的学习曲线已经够陡峭了（我们不是要为学生创造一个全新的技术宇宙）。

而且它也行不通，因为我们需要能够从菜单链接到外部网站（尤其是我们的 SharePoint 网站，我们使用 SharePoint 是因为 Discourse 不包含结构化库），而分类根本无法做到这一点。

老实说，能够允许多个安全组查看菜单（就像我们允许多个安全组访问分类一样）会更简单。但如果不可能，我们就得另想办法。

1 个赞
58

@merefield 登录按钮的高度受下拉标题影响

Screenshot 2024-04-14 at 13.16.20
Screenshot 2024-04-14 at 13.16.20880×226 8.13 KB

仅当 links position 使用 right 时才会出现此问题。

2 个赞
59

我不再维护此项目，因此将其标记为 #unmaintained。

不过，欢迎提交 PR，我会进行审核。如果您没有时间或技能，但希望有人修复它并且有预算，可以考虑在 Marketplace 发布信息。

4 个赞
60

这给我带来了麻烦。我查看了一下，但由于我的CSS技能有限，无法解决。

3 个赞
61

我提交了一个 PR 来现代化该组件。（由 @davidkingham 赞助）:+1:
在此过程中，它修复了我注意到的一些用户体验问题。

该组件可以进一步改进。我可能会在稍后提交 PR。以下是我注意到的一些问题：

  • 将 json_schema 设置类型替换为 objects 类型
  • 添加在新标签页中打开链接的选项
  • 更好的可访问性
10 个赞
62

谢谢 @Arkshine - 精彩的工作！

4 个赞
63

我在使用此主题组件的网站上看到了这个致命错误 :eyes:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'trim')
    at get source (custom-icon.gjs:20:24)
    ...
3 个赞
64

好的。我提交了一个 PR 来修复这个问题；感谢你的反馈！

已合并！:+1:

7 个赞
65

很棒的组件，出色的工作——感谢您的努力和专业知识！我注意到下拉菜单目前支持一个主标题项，其中包含一个级别的子项（例如，标题项 → 链接）。是否可以添加另一个级别，使其工作方式如下：标题项 → 子项 → 链接？

2 个赞
66

@angus 我提交了一个 PR 来更新一个我发现的已弃用的 Font Awesome 图标名称：

2 个赞
67

谢谢@kelv : folded_hands:

3 个赞
68

此插件对于拥有博客和/或更多相关应用程序的社区来说是必备的。

它应该可以在 Horizon 上运行，还是需要更改什么？