Comment puis-je modifier les liens de la barre latérale ajoutés avec api.addCommunitySectionLink ?

[manuel (Manuel Kostka)]

J’aimerais ajouter un nouveau lien dans la barre latérale avec un composant. J’utilise ce code :

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

Cela ajoute le lien, mais dans la fenêtre de personnalisation, il n’apparaît pas. Je ne peux donc pas modifier le lien par défaut ni le déplacer.

Je constate que c’est également le cas pour un lien ajouté par le plugin Calendrier. Voici le lien :

Mais dans la fenêtre de personnalisation, le lien n’apparaît pas :

Je me demande donc s’il s’agit d’un bug. Ou s’il existe une autre approche ?

[awesomerobot (Kris)]

Malheureusement, vous ne pouvez pas.

@Moin

Les liens ajoutés par les plugins ne peuvent pas être personnalisés directement. Pour modifier ces liens :

1. Créez un lien de remplacement avec les personnalisations souhaitées
2. Masquez le lien original du plugin

[manuel (Manuel Kostka)]

Les modifications seraient-elles annulées à chaque mise à jour de composant ou de plugin ?

Je suppose que l’approche consiste alors à ne pas ajouter de lien par défaut du tout.

[awesomerobot (Kris)]

@manuel

Les modifications seraient-elles annulées à chaque mise à jour de composant ou de plugin ?

uniquement si vous écrasez directement le composant/plugin… si vous souhaitez modifier l’ordre dans la section existante, il est probablement plus facile de réorganiser avec CSS

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

Si vous souhaitez déplacer l’élément dans le tiroir “plus”, masquez l’original et dupliquez-le dans un composant séparé :

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

[manuel (Manuel Kostka)]

Si les nouveaux liens ne peuvent pas être modifiés dans la fenêtre modale de personnalisation, je suppose que je vais abandonner l’idée de les ajouter pour le moment. Cela semble juste déroutant d’ajouter un lien qui est insaisissable dans la fenêtre modale de personnalisation alors.

Cependant, je voudrais que le lien (s’il est ajouté manuellement) soit mis en surbrillance lorsqu’il est sur la route correspondante, donc je vais ajouter ceci maintenant :

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