¿Ocultar subcategorías sin ocultar sus temas en la lista de temas?

Soporte
1

¡Hola a todos!

¿Existe alguna manera de “ocultar” las subcategorías de las listas de temas y mostrar las categorías principales debajo del título del tema en su lugar?

Mi resultado deseado es una categoría raíz con n subcategorías. Estas subcategorías no deben mostrarse en la interfaz de usuario; solo se utilizan para restringir el acceso a los publicaciones según la pertenencia a grupos.

En la lista de temas, me gustaría mostrar la categoría principal debajo del título del tema en lugar de la subcategoría.

Pensé en usar etiquetas, pero desafortunadamente no puedo restringir el acceso a los temas de esa manera.

2

La plantilla para los elementos en la lista de temas solo muestra el enlace a la categoría del tema, así:
{{category-link topic.category}}

Por lo tanto, deberías modificar esta plantilla para mostrar enlaces a la categoría padre:

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

Pero si solo deseas que esto ocurra para una categoría padre específica, necesitarías agregar más lógica. No sé cuál sería la forma recomendada de hacerlo, ¿registrando un helper de Handlebars?

Otra aproximación podría ser mostrar siempre ambos enlaces, de categoría y de categoría padre, y luego ocultar los que no desees con CSS.

3

No lo he comprobado, pero creo que deberías poder ocultarlos con CSS.

4

¿Necesito modificar la plantilla para este enfoque también? No pude encontrar tal configuración de sitio en mi panel de administración.

5

Las categorías principales no están en la plantilla predeterminada, así que sí, supongo que tendrás que modificar la plantilla. Al menos, no conozco un enfoque más sencillo para lograrlo.

No hay ninguna configuración del sitio para modificar plantillas; te enviaré el código por mensaje directo para que lo pruebes.

6

En general, debes evitar las sobrescrituras completas de plantillas, ya que requieren mantenimiento: tendrás que ejecutar un diff y verificar qué ha cambiado si una actualización de Discourse rompe tu tema.

Lo que puedes hacer es dar un paso atrás y modificar los datos que se pasan a la plantilla en su lugar.

El topic-list-item es un componente de Ember, por lo que puedes usar api.modifyClass para realizar los cambios que necesites.

Por ejemplo, aquí tienes un fragmento de código que mostrará la insignia de la categoría principal en los temas de subcategoría debajo del título. Si el tema está en la categoría principal, el código no tendrá efecto.

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

  // IDs de las categorías principales
  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

¡Esto es increíble!

¿Hay alguna forma de limitarlo a una o más categorías específicas?

8

Dos formas diferentes de abordar esto según lo que intentes lograr. ¿Cuál es el resultado deseado?

  1. todas las subcategorías bajo la categoría principal “foo” deben tener este comportamiento.
  2. algunas subcategorías bajo diferentes categorías principales deben tener este comportamiento.
9

@Johani

Esta es la que estamos buscando.

10

He editado el fragmento anterior para reflejar ese cambio. Solo necesitas agregar los IDs de las categorías padre al array targetCategoryIds. Puedes encontrar el ID de la categoría visitando la página de la categoría y revisando la URL.

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

El “6” al final de la URL anterior es el ID de la categoría de soporte aquí en Meta.

11

¡Gracias por compartir esto, @Johani! Apenas estoy comenzando con Ember… ¡son realmente de gran ayuda! :pray: :relaxed:

12

¡Eso es increíble! Muchas gracias por la ayuda rápida.

13

¡Qué bueno saberlo!

Dos pulgares arriba

Solo requiere un poco de acostumbrarse. Si algo en la base de código no está claro, no dudes en crear un tema en la categoría Dev y etiquetarme.

14

Esto es realmente increíble. Gracias por esto y gracias a quienes te dedican su tiempo para hacerlo.

:+1:

15

@Johani ¿Dónde exactamente debo colocar este fragmento de código?
Intenté ponerlo en la sección </head> y en la parte de encabezado de mi componente de tema donde almaceno todo mi CSS. Pero entonces la lista de temas se corta justo en el punto donde debería aparecer el primer tema afectado de la subcategoría.

18

Sí, hubo un problema con la forma en que se configuró la categoría que no noté localmente. He editado el fragmento de código anterior y ahora debería funcionar.

El fragmento de código anterior te permite establecer las categorías en las que quieres que funcione. Si quieres que funcione en todas las categorías, usarías algo como esto.

<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

Gracias @Johani por tu ayuda, ¡realmente lo aprecio!