如何使用 discourse 标题添加下拉菜单

支持
1

我已在 Discourse 上通过 Discourse 插件 API 组件添加了顶部菜单，但不知道如何为这些菜单项添加下拉菜单。

我们能否通过 Discourse API 插件或其他方式，为 Discourse 的顶部菜单添加下拉菜单？

期望的输出效果如下：

Discourseheaders
Discourseheaders699×188 15.5 KB

2

您可能想查看这个主题组件：https://meta.discourse.org/t/header-submenus/94584。它允许您构建带有子菜单的标题菜单。您可以直接使用该组件，也可以将其作为示例代码，参考如何创建自己的组件。

3

我已检查过您的主题组件。

其中，标题和子菜单被添加到了 Discourse 标题之前。实际上，我们期望将带有子菜单的标题添加到我在下文中标记的 Discourse 标题中。

HeaderSubmenu
HeaderSubmenu552×232 17.9 KB

4

我已通过 Discourse 插件 API 事件使用自定义 HTML 插入解决了此问题。

最初，我安装了“自定义页头链接”组件，并像往常一样配置了页头。随后，我利用 Discourse API 事件，在页头 DOM 元素加载后插入自定义 HTML，代码如下：

api.onPageChange(url => {
    if ($(".header-buttons").length != 0 && i == 0) {
        $('.custom-header-links .services-custom-header-links a').append("插入图标");
        $(".header-buttons").prepend("添加 ul 标签元素");
        $(".resource-dropdown-menu").after("使用第一个插入的 ul 元素类名追加下一个 ul 元素");
        i++;
    }
});

在此处，您可以将子菜单添加到页头 DOM 中。但这会导致对齐问题，我们需要通过 CSS 来维持对齐。此外，还需要编写点击函数以打开子菜单，并修改页头的背景颜色等。谢谢 :slightly_smiling_face: