为“hamburger-category”小部件添加下拉菜单

开发
1

我想修改“汉堡菜单类别”小部件，以便在汉堡菜单中显示所有主类别，并为每个主类别添加一个可切换的展开选项，以显示其子类别。

例如：

  • 类别 1
    • 子类别 1
    • 子类别 2
  • 类别 2
    • 子类别 1
    • 子类别 2

目前，Discourse 的设置是将 .subcategory 类附加到子类别项上。但我希望修改它或添加一个类来显示父类别是什么。例如：.subcategory .parent-exampleCategory。

我尝试使用插件 API，并使用 reopenWidget() 来定位汉堡菜单类别。我复制了原始代码，并试图对其进行修改以看看能实现什么。然而，当我这样做时，.subcategory 类完全不再添加到列表项中：

修改前：

li.category-link.subcategory.category-mentor-corner-technical-libary

修改后：

li.category-link

Screen Shot 2021-02-23 at 9.39.09 AM
Screen Shot 2021-02-23 at 9.39.09 AM514×128 14 KB

我不确定原因，因为当我使用 console.log() 时，条件仍然满足，但出于某种原因，它没有将其添加到结果数组中。

有人知道是我遗漏了什么，还是我的方法不对吗？

我刚开始接触 Discourse 插件开发，非常感谢您的帮助！谢谢。

目前与 Discourse 的 `createWidget` 差别不大，但这是我的代码： 
import getURL from "discourse-common/lib/get-url";
import { number } from "discourse/lib/formatter";
import { withPluginApi } from "discourse/lib/plugin-api";
import Category from "discourse/models/category";
import I18n from "I18n";
import { h } from "virtual-dom";

export default {
  name: "custom-menu-category",
  initialize() {
    withPluginApi("0.10.1", (api) => {
      api.reopenWidget("hamburger-category", {
        html(c) {
          console.log("此方法已到达");
          if (c.parent_category_id) {
            console.log("CID: " + c.parent_category_id);
            // 尝试将 .subcategory 改为 .testChild 看看仅修改这个是否有效...
            this.tagName += ".testChild";
            console.log("TN: " + this.tagName);
          }

          this.tagName += ".category-" + Category.slugFor(c, "-");

          const results = [
            this.attach("category-link", {
              category: c,
              allowUncategorized: true, 
            }),
          ];
          console.log("RESULTS" + results);

          const unreadTotal =
            parseInt(c.get("unreadTopics"), 10) +
            parseInt(c.get("newTopics"), 10);
          if (unreadTotal) {
            results.push(
              h(
                "a.badge.badge-notification",
                {
                  attributes: { href: c.get("url") },
                },
                number(unreadTotal)
              )
            );
          }

          if (!this.currentUser) {
            let count;

            if (c.get("show_subcategory_list")) {
              count = c.get("totalTopicCount");
            } else {
              count = c.get("topic_count");
            }

            results.push(h("b.topics-count", number(count)));
          }

          return results;
        },
      });

      api.reopenWidget("hamburger-categories", {
        html(attrs) {
          const href = getURL("/categories");
          let title = I18n.t("filters.categories.title");
          if (attrs.moreCount > 0) {
            title = I18n.t("categories.n_more", { count: attrs.moreCount });
          }

          let result = [
            h(
              "li.heading",
              h("a.d-link.categories-link", { attributes: { href } }, title)
            ),
          ];

          const categories = attrs.categories;
          if (categories.length === 0) {
            return;
          }
          result = result.concat(
            categories.map((c) => this.attach("hamburger-category", c))
          );

          return result;
        },
      });
    });
  },
};
2 个赞