¿Cómo puedo editar los enlaces de la barra lateral que se agregan con api.addCommunitySectionLink?

Desarrollador
1

Me gustaría añadir un nuevo enlace en la barra lateral con un componente. Estoy usando este código:

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

Esto añade el enlace, pero en la ventana modal de personalización no aparece. Por lo tanto, no puedo editar el enlace predeterminado ni arrastrarlo a una posición diferente.

Veo que lo mismo ocurre con un enlace añadido por el plugin de Calendario. Aquí está el enlace:

image
image246×227 6.21 KB

Pero en la ventana modal de personalización, el enlace no aparece:

This image depicts a screenshot of a user interface for editing a custom section, showing icons and names for different custom links such as "Topics," "My Posts," "Review," and "Admin," along with corresponding URLs. (Captioned by AI)
This image depicts a screenshot of a user interface for editing a custom section, showing icons and names for different custom links such as "Topics," "My Posts," "Review," and "Admin," along with corresponding URLs. (Captioned by AI)593×466 18.2 KB

Así que me pregunto si esto es un error. ¿O hay otro enfoque?

3 Me gusta
2

Lamentablemente no puedes,

5 Me gusta
3

¿Se revertirían los cambios en cada actualización de componente o plugin?

Supongo que el enfoque es entonces no añadir un enlace predeterminado en absoluto.

2 Me gusta
4

solo si estás sobrescribiendo el componente/plugin directamente… si quieres cambiar el orden en la sección existente, probablemente sea más fácil reordenar con CSS

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

Si quieres mover el elemento al cajón de “más”, oculta el original y duplícalo en un componente separado:

#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 Me gusta
5

Si los nuevos enlaces no se pueden modificar en el modal de personalización, supongo que descartaré la idea de agregarlos por ahora. Simplemente parece confuso agregar un enlace que es esquivo en el modal de personalización entonces.

Sin embargo, me gustaría que el enlace (si se agrega manualmente) se resalte cuando esté en la ruta relacionada, así que agregaré esto ahora:

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 me gusta