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

**URL:** https://meta.discourse.org/t/how-can-i-edit-sidebar-links-that-are-added-with-api-addcommunitysectionlink/357629
**Category:** Development
**Created:** [17. März 2025 um 19:18 UTC](https://meta.discourse.org/t/how-can-i-edit-sidebar-links-that-are-added-with-api-addcommunitysectionlink/357629 "2025-03-17T19:18:08Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [17. März 2025 um 19:18 UTC](https://meta.discourse.org/t/how-can-i-edit-sidebar-links-that-are-added-with-api-addcommunitysectionlink/357629/1 "2025-03-17T19:18:08Z")

</div>

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

```plaintext
      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](https://global.discourse-cdn.com/meta/original/4X/4/6/8/468265c121a32d083952648221ad1f0444ae229a.png)

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)](https://global.discourse-cdn.com/meta/original/4X/a/b/b/abb50deb1980cb7d85be889152c7df05af6fad3f.png)

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

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [17. März 2025 um 21:32 UTC](https://meta.discourse.org/t/how-can-i-edit-sidebar-links-that-are-added-with-api-addcommunitysectionlink/357629/2 "2025-03-17T21:32:30Z")

</div>

Leider nicht.

> [@Moin](#):
>
> Von Plugins hinzugefügte Links können nicht direkt angepasst werden. Um diese Links zu ändern:
> 
> 1. Erstellen Sie einen Ersatzlink mit Ihren gewünschten Anpassungen
> 2. Verstecken Sie den ursprünglichen Plugin-Link

---

<div class="post-metadata">

### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [18. März 2025 um 08:38 UTC](https://meta.discourse.org/t/how-can-i-edit-sidebar-links-that-are-added-with-api-addcommunitysectionlink/357629/3 "2025-03-18T08:38:53Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [18. März 2025 um 15:13 UTC](https://meta.discourse.org/t/how-can-i-edit-sidebar-links-that-are-added-with-api-addcommunitysectionlink/357629/4 "2025-03-18T15:13:27Z")

</div>

> [@manuel](#):
>
> Werden die Änderungen bei jedem Update einer Komponente oder eines Plugins rückgängig gemacht?

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

```css
#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:

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

```

```js
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,
    );
  }
});

```

---

<div class="post-metadata">

### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [18. März 2025 um 16:43 UTC](https://meta.discourse.org/t/how-can-i-edit-sidebar-links-that-are-added-with-api-addcommunitysectionlink/357629/5 "2025-03-18T16:43:47Z")

</div>

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:

```plaintext
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");
      }
    }
  });
});

```
