Come posso modificare i link della barra laterale aggiunti con api.addCommunitySectionLink?

Sviluppatore
1

Vorrei aggiungere un nuovo link nella barra laterale con un componente. Sto usando questo codice:

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

Questo aggiunge il link, ma nella finestra di personalizzazione non viene visualizzato. Quindi non posso modificare il link predefinito o trascinarlo in una posizione diversa.

Vedo che lo stesso vale per un link aggiunto dal plugin Calendario. Ecco il link:

image
image246×227 6.21 KB

Ma nella finestra di personalizzazione il link non viene visualizzato:

Questa immagine raffigura uno screenshot di un'interfaccia utente per la modifica di una sezione personalizzata, mostrando icone e nomi per diversi link personalizzati come "Argomenti", "I miei post", "Revisione" e "Amministrazione", insieme agli URL corrispondenti. (Sottotitolato dall'IA)
Questa immagine raffigura uno screenshot di un'interfaccia utente per la modifica di una sezione personalizzata, mostrando icone e nomi per diversi link personalizzati come "Argomenti", "I miei post", "Revisione" e "Amministrazione", insieme agli URL corrispondenti. (Sottotitolato dall'IA)593×466 18.2 KB

Quindi mi chiedo se si tratti di un bug. O se esiste un altro approccio?

3 Mi Piace
2

Purtroppo non puoi,

5 Mi Piace
3

Le modifiche verrebbero annullate ad ogni aggiornamento di componente o plugin?

Suppongo che l’approccio sia quindi quello di non aggiungere alcun link predefinito.

2 Mi Piace
4

solo se sovrascrivi direttamente il componente/plugin… se vuoi cambiare l’ordine nella sezione esistente, è probabilmente più facile riordinare con CSS

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

Se vuoi spostare l’elemento nel cassetto “altro”, nascondi l’originale e duplicalo in un componente separato:

#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 Mi Piace
5

Se i nuovi link non possono essere modificati nella modale di personalizzazione, suppongo che per ora abbandonerò l’idea di aggiungerli. Sembra solo confusionario aggiungere un link che è sfuggente nella modale di personalizzazione, quindi.

Tuttavia, vorrei che il link (se aggiunto manualmente) fosse evidenziato quando si trova sul percorso correlato, quindi aggiungerò questo ora:

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 Mi Piace