Como posso editar os links da barra lateral adicionados com api.addCommunitySectionLink?

Dev
1

Gostaria de adicionar um novo link na barra lateral com um componente. Estou usando este código:

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

Isso adiciona o link, mas no modal de personalização ele não aparece. Portanto, não consigo editar o link padrão ou arrastá-lo para uma posição diferente.

Vejo que o mesmo acontece com um link adicionado pelo plugin Calendário. Aqui está o link:

image
image246×227 6.21 KB

Mas no modal de personalização o link não aparece:

Esta imagem retrata uma captura de tela de uma interface de usuário para editar uma seção personalizada, mostrando ícones e nomes para diferentes links personalizados, como "Tópicos", "Minhas Postagens", "Revisão" e "Administrador", juntamente com URLs correspondentes. (Legenda da IA)
Esta imagem retrata uma captura de tela de uma interface de usuário para editar uma seção personalizada, mostrando ícones e nomes para diferentes links personalizados, como "Tópicos", "Minhas Postagens", "Revisão" e "Administrador", juntamente com URLs correspondentes. (Legenda da IA)593×466 18.2 KB

Então, me pergunto se isso é um bug. Ou se há outra abordagem?

3 curtidas
2

Infelizmente, você não pode.

5 curtidas
3

As alterações seriam revertidas a cada atualização de componente ou plugin?

Acho que a abordagem, então, é não adicionar um link padrão.

2 curtidas
4

apenas se você estiver sobrescrevendo o componente/plugin diretamente… se você quiser mudar a ordem na seção existente, provavelmente será mais fácil reordenar com CSS

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

Se você quiser mover o item para a gaveta “mais”, oculte o original e duplique-o em um 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 curtidas
5

Se os novos links não puderem ser modificados no modal de personalização, acho que vou desistir da ideia de adicioná-los por enquanto. Parece confuso adicionar um link que é elusivo no modal de personalização então.

No entanto, eu gostaria que o link (se adicionado manualmente) fosse destacado quando estivesse na rota relacionada, então adicionarei isto agora:

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 curtida