Ocultar subcategorias sem ocultar seus tópicos na lista de tópicos?

Suporte
1

E aí, pessoal

Existe alguma maneira de “ocultar” subcategorias das listas de tópicos e exibir as categorias principais abaixo do título do tópico?

O resultado desejado é uma categoria raiz com n subcategorias. Essas subcategorias não devem ser exibidas no front-end. Elas são usadas apenas para restringir o acesso às postagens com base na associação a grupos.

Na lista de tópicos, gostaria de exibir a categoria principal abaixo do título do tópico, em vez da subcategoria.

Pensei em usar tags, mas, infelizmente, não consigo restringir o acesso aos tópicos dessa forma.

2

O modelo para itens na lista de tópicos mostra apenas o link para a categoria do tópico, assim:
{{category-link topic.category}}

Portanto, você precisaria modificar esse modelo para mostrar links para a categoria pai:

{{#if topic.category.parentCategory}}
  {{category-link topic.category.parentCategory}}
{{else}}
  {{category-link topic.category}}
{{/if}}

Mas, se você quiser que isso ocorra apenas para uma categoria pai específica, precisaria adicionar mais lógica. Não sei qual seria a maneira recomendada de fazer isso: registrar um helper do Handlebars?

Outra abordagem seria sempre mostrar os links da categoria e da categoria pai e, em seguida, ocultar os que você não deseja com CSS.

3

Eu não olhei, mas acho que você deve conseguir escondê-los com CSS.

4

Preciso modificar o modelo para essa abordagem também? Não consegui encontrar uma configuração de site assim no meu painel administrativo.

5

As categorias principais não estão no modelo padrão, então sim, imagino que você precise modificar o modelo. Pelo menos, não conheço uma abordagem mais simples para alcançar isso.

Não há nenhuma configuração do site para modificar modelos; enviarei o código para você testar por mensagem direta.

6

Em geral, você deve evitar substituições completas de modelos, pois elas exigem manutenção: se uma atualização do Discourse quebrar seu tema, você precisará executar um diff e verificar o que mudou.

O que você pode fazer é dar um passo para trás e modificar os dados que são passados para o modelo.

O topic-list-item é um componente Ember, então você pode usar api.modifyClass para fazer as alterações desejadas.

Por exemplo, aqui está um trecho que exibirá o emblema da categoria pai em tópicos de subcategorias abaixo do título. Se o tópico estiver na categoria principal, o código não terá efeito.

<script type="text/discourse-plugin" version="0.8">
  const { on } = require("discourse-common/utils/decorators");

  // IDs das categorias pai
  const targetCategoryIds = [9, 15, 50];

  const useParentCategory = function () {
    const parentCategory = this.attrs.topic.category.parentCategory;
    const switchToParent = parentCategory && targetCategoryIds.includes(parentCategory.id)

    if (switchToParent) {
      this.attrs.topic.set("category", parentCategory);
    }
  };

  api.modifyClass("component:topic-list-item", {
    @on("didReceiveAttrs")
    setCategory() {
      useParentCategory.call(this);
    }
  });

  api.modifyClass("component:latest-topic-list-item", {
    @on("didReceiveAttrs")
    setCategory() {
      useParentCategory.call(this);
    }
  });
</script>
7

Isso é incrível!

Existe alguma maneira de limitar a uma ou mais categorias específicas?

8

Duas maneiras diferentes de resolver isso, dependendo do que você deseja alcançar. Qual é o resultado desejado?

  1. Todas as subcategorias sob a categoria pai “foo” devem ter esse comportamento.
  2. Algumas subcategorias sob diferentes categorias pai devem ter esse comportamento.
9

@Johani

É exatamente isso que estamos procurando.

10

Editei o trecho acima para refletir essa alteração. Tudo o que você precisa fazer é adicionar os IDs das categorias pai ao array targetCategoryIds. Você pode encontrar o ID da categoria visitando a página da categoria e verificando a URL.

 https://meta.discourse.org/c/support/6

O “6” no final da URL acima é o ID da categoria de suporte aqui no Meta.

11

Obrigado por compartilhar isso, @Johani! Estou começando agora com o Ember… vocês são realmente prestativos! :pray: :relaxed:

12

Isso é incrível! Muito obrigado pela ajuda rápida.

13

Que ótimo saber disso!

Two Thumbs Up

Apenas leva um pouco para se acostumar. Se algo no código não estiver claro, sinta-se à vontade para criar um tópico na categoria Dev e me marcar.

14

Isso é realmente incrível. Obrigado por isso e obrigado a todos que estão dedicando seu tempo para fazer isso.

:+1:

15

@Johani Onde exatamente devo colocar este trecho de código?

Tentei colocá-lo na tag </head> e na parte do cabeçalho do componente do meu tema, onde armazeno todo o meu CSS. Mas, então, a lista de tópicos é cortada exatamente no local onde o primeiro tópico afetado da subcategoria deveria ser listado.

18

Sim, houve um problema na forma como a categoria foi configurada que eu não percebi localmente. Editei o trecho acima, e agora deve funcionar.

O trecho acima permite que você defina as categorias nas quais deseja que isso funcione. Se quiser que funcione em todas as categorias, você usaria algo assim.

<script type="text/discourse-plugin" version="0.8">
  const { on } = require("discourse-common/utils/decorators");

  const useParentCategory = function () {
    const parentCategory = this.attrs.topic.category.parentCategory;

    if (parentCategory) {
     this.attrs.topic.set("category", parentCategory);
    }
  };

  api.modifyClass("component:topic-list-item", {
    @on("didReceiveAttrs")
    setCategory() {
      useParentCategory.call(this);
    }
  });

  api.modifyClass("component:latest-topic-list-item", {
    @on("didReceiveAttrs")
    setCategory() {
      useParentCategory.call(this);
    }
  });
</script>
20

Obrigado @Johani pela sua ajuda, realmente aprecio muito!