Wie kann ich die Sidebar-Links bearbeiten, die mit api.addCommunitySectionLink hinzugefügt wurden?

Entwickler
1

Ich möchte einen neuen Sidebar-Link mit einer Komponente hinzufügen. Ich verwende diesen Code:

      api.addCommunitySectionLink({
        name: "custom-homepage",
        route: "discovery.custom",
        title: "Home",
        text: "Home",
        icon: "house",
      });

Dies fügt den Link hinzu, aber im Anpassungsmodal wird er nicht angezeigt. Daher kann ich den Standardlink nicht bearbeiten oder an eine andere Position ziehen.

Ich sehe, dass dasselbe für einen Link gilt, der vom Kalender-Plugin hinzugefügt wurde. Hier ist der Link:

image
image246×227 6.21 KB

Aber im Anpassungsmodal wird der Link nicht angezeigt:

Dieses Bild zeigt einen Screenshot einer Benutzeroberfläche zur Bearbeitung eines benutzerdefinierten Abschnitts mit Symbolen und Namen für verschiedene benutzerdefinierte Links wie „Themen“, „Meine Beiträge“, „Überprüfung“ und „Admin“ sowie entsprechenden URLs. (Beschriftet von KI)
Dieses Bild zeigt einen Screenshot einer Benutzeroberfläche zur Bearbeitung eines benutzerdefinierten Abschnitts mit Symbolen und Namen für verschiedene benutzerdefinierte Links wie „Themen“, „Meine Beiträge“, „Überprüfung“ und „Admin“ sowie entsprechenden URLs. (Beschriftet von KI)593×466 18.2 KB

Daher frage ich mich, ob dies ein Fehler ist. Oder gibt es einen anderen Ansatz?

3 „Gefällt mir“
2

Leider nicht.

5 „Gefällt mir“
3

Würden die Änderungen bei jedem Komponenten- oder Plugin-Update rückgängig gemacht werden?

Ich vermute, der Ansatz ist dann, gar keinen Standardlink hinzuzufügen.

2 „Gefällt mir“
4

nur wenn Sie die Komponente/das Plugin direkt überschreiben … wenn Sie die Reihenfolge im vorhandenen Abschnitt ändern möchten, ist es wahrscheinlich am einfachsten, sie mit CSS neu anzuordnen

#sidebar-section-content-community {
  display: flex;
  flex-direction: column;
  
  li {
    order: 2
  }
  
  [data-list-item-name="upcoming-events"] {
    order: 1
  }
}

Wenn Sie das Element in die “Mehr”-Schublade verschieben möchten, verstecken Sie das Original und duplizieren Sie es in einer separaten Komponente:

#sidebar-section-content-community {
  [data-list-item-name="upcoming-events"] {
    display: none;
  }
}

import { apiInitializer } from "discourse/lib/api";
import { i18n } from "discourse-i18n";

export default apiInitializer((api) => {
  const siteSettings = api.container.lookup("service:site-settings");
  if (
    siteSettings.discourse_post_event_enabled &&
    siteSettings.sidebar_show_upcoming_events
  ) {
    api.addCommunitySectionLink(
      {
        name: "custom-upcoming-events",
        route: "discourse-post-event-upcoming-events",
        text: i18n("discourse_post_event.upcoming_events.title"),
        title: i18n("discourse_post_event.upcoming_events.title"),
        icon: "calendar-days",
      },
      true,
    );
  }
});
2 „Gefällt mir“
5

Wenn die neuen Links im Anpassungsmodal nicht geändert werden können, werde ich die Idee, sie hinzuzufügen, vorerst aufgeben. Es scheint einfach verwirrend zu sein, einen Link hinzuzufügen, der im Anpassungsmodal schwer zu finden ist.

Ich möchte jedoch, dass der Link (wenn er manuell hinzugefügt wird) hervorgehoben wird, wenn er sich auf der zugehörigen Route befindet. Deshalb füge ich Folgendes hinzu:

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer("0.8", (api) => {
  const router = api.container.lookup("service:router");

  api.onPageChange(() => {
    const currentRoute = router.currentRoute.name;
    const customHomepageLink = document.querySelector(
      '.sidebar-section-link[href="/custom"]'
    );

    if (currentRoute === "discovery.custom") {
      if (customHomepageLink) {
        customHomepageLink.classList.add("active");
      }
    } else {
      if (customHomepageLink) {
        customHomepageLink.classList.remove("active");
      }
    }
  });
});
1 „Gefällt mir“