¿Existe un "mapa" de temas? (Una forma fácil de encontrar plugin-outlets, etc.)

He revisado las excelentes guías de componentes de plugins y temas, pero aún tengo algunas dudas sobre cómo encontrar rápidamente las plantillas, componentes, widgets o salidas de plugin que necesito.

Pensé en empezar con tres ediciones sencillas; si alguien puede indicarme el camino correcto, me ayudaría mucho :blush:

¿Qué plantilla, componente o salida de plugin debo modificar para realizar estos cambios?

  1. Las etiquetas <title> dentro de la sección <head> del HTML de la página de visualización de un tema (es decir, al ver un tema). Necesito que el cambio sea visible tanto para los bots como para los usuarios humanos.
  2. El marcado de los cuadros de categoría dondequiera que se muestren. (Estos: Panel de Administración > Configuración > Estilo de categoría.)
  3. Página de «Acerca de» (dónde cambiar el contenido en los bloques de Administrador y Moderador).

Al trabajar con temas en otros software de foros, por lo general existe un archivo «padre» que contiene referencias a todos los elementos que conforman esa página, lo que facilita encontrar rápidamente las plantillas que necesitas editar. Por ejemplo, habría un archivo/plantilla forumdisplay (ver categoría en Discourse) que contendría el HTML principal y referenciaría todas las demás plantillas. Otro para la página showthread (es decir, la página de ver/visualizar tema en Discourse), otro para la página de perfil de usuario, etc. Estos actuarían como una lista o mapa que indica dónde encontrar lo que necesitas. Así, si quisieras editar, por ejemplo, el marcado subyacente de las publicaciones, irías al archivo o plantilla showthread (es decir, ver tema) y, al revisarlo, notarías que necesitas editar o consultar la plantilla postbit.

¿Tenemos algo similar? Si no es así, ¿podría el equipo considerar añadir algo parecido? Sería de gran ayuda :slight_smile:

¡Lo he visto (lo siento, debería haberlo mencionado!) y es muy útil para los puntos de conexión de plugins visibles, pero ¿qué pasa con las plantillas, componentes, widgets, etc.? ¿Cómo los encuentras de forma rápida y sencilla, Robert? ¿Tienes alguna idea de dónde están los mencionados en el primer mensaje?

Mi consejo es siempre comenzar de forma sencilla. Trabaja primero en un requisito simple y averigua cómo hacerlo. Luego pasa al siguiente.

En cuanto a los temas, diría que la mayoría de ellos implicarán modificaciones en CSS. Utiliza los recursos habituales. Donde no sea posible, tendrás que considerar modificar las plantillas con jQuery o, en última instancia, sobrescribirlas. Crea tus propios componentes o widgets para casos de uso novedosos y adjúntalos.

El código fuente siempre es tu aliado; explora la estructura de directorios de GitHub para discourse/discourse y encontrarás las diferentes partes de la aplicación organizadas. Las plantillas, creo, son la parte más fácil de entender. Si no estás familiarizado con la estructura de directorios de Ember, este es el momento de familiarizarte con ella.

Sí, definitivamente. Llevo creando temas casi desde que existe Discourse, y constantemente consulto el código fuente en una ventana separada.

Por lo general, para las plantillas debes mirar aquí: https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/templates

y para los widgets aquí: https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/widgets.

A veces no queda claro de inmediato dónde está una plantilla, porque quizás sea un componente anidado dentro de otra plantilla… si no recuerdo, lo que hago es buscar en el código fuente un fragmento específico de marcado…

Por ejemplo, si quiero añadir algo a la página «Acerca de»… puedo ver que el cuerpo de esa página tiene una clase única about-page, así que comenzaré buscando about y body-page (que es otra clase de la página).

Para responder a algunas de tus preguntas:

Creo que esto requiere un plugin, lo cual está fuera de mi especialidad… quizás alguien más pueda ser de mayor ayuda.

Hay diferentes plantillas para los distintos diseños de página, pero suponiendo que te refieres a uno de los diseños «Cuadros con…»:

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/about.hbs

¡Gracias por las respuestas a ambos! :slight_smile:

Eso es lo que creía que estaba haciendo (no creo que se pueda ser mucho más simple que editar las etiquetas de título). En otro software de foros, simplemente abriría el archivo o plantilla de la página ‘showthread’ y la editaría; literalmente tomaría menos de un minuto y me encantaría que el tema de Discourse fuera tan fácil (aunque es posible que mi falta de familiaridad con los temas de Discourse en este momento sea la razón por la que me siento perdido).

Eso es lo que creo que necesito para todos los elementos en el primer post, ya que deben modificar el contenido existente (en lugar de agregar o prepend en un lugar específico, que es hacia lo que parecen estar orientados los plugin-outlets).

Creo que esa es bastante posiblemente la cuestión aquí. No conozco Ember y quizás eso es lo que hace que todo esto se sienta algo alienígena. Me encantaría tener algo como (deprecated) Plugin outlet locations theme component pero para plantillas y todo lo demás que se pueda personalizar; eso sería de gran ayuda.

¿Pero cómo encuentras lo que necesitas, Kris?

¡Ah, gracias, ese es un consejo realmente bueno!

¿Estás seguro, Kris? Pensé que los plugins (o plugin-outlets) solo te permiten agregar algo en el lugar de ese outlet en particular. Whereas para cambiar el formato de la etiqueta de título, probablemente necesitaría abrir la plantilla existente (o componente o widget) y copiar/editar eso. Al menos, eso es lo que entiendo después de haber leído las dos guías sobre plugins y temas.

¡Gracias! Eso parece ser el que necesito :smiley:

¡Gracias de nuevo, jaja! Ambos parecen relativamente sencillos de encontrar ahora, dado su nombre y el hecho de que los señalaste. Creo que haber quedado atascado al cambiar las etiquetas de título puede haber sido un factor :relaxed:

En este momento siento que me falta algo, y como señaló @merefield, puede ser mi falta de familiaridad con Ember. ¿Alguien conoce videos de YouTube que expliquen rápidamente cómo funciona? ¿Quizás tú o @merefield podrían hacer uno? :blush:

Ember realmente vale la pena aprender. Es muy potente, extensible y rápido.

Leer esto ayudará a que el código fuente tenga más sentido:

Estudia las plantillas, las propiedades calculadas, el enrutador y los componentes.

Discourse no es exactamente como una aplicación Ember estándar, pero las guías son de gran ayuda en cualquier caso.

Un último consejo importante: identifica un plugin existente (y bueno) que logre algo similar a lo que quieres lograr. Examina su código y copia el enfoque.

¡Gracias, Robert! Dice que esa versión de las guías es antigua: ¿Discourse está usando esa versión o debería leer las guías más recientes, la 3.15?

Lee la 3.10 por ahora. Es la que usa Discourse actualmente. Si abres la consola de JavaScript, verás la versión de Ember y jQuery que ejecuta una instancia.

Ten en cuenta también que hay varios «estilos» de decoración de código. Por lo tanto, las cosas en el código fuente pueden variar ligeramente a veces.

Lamentablemente, no es eso :–(

También probé estos:

Creé un componente de tema y agregué lo siguiente:

<script type="text/x-handlebars" data-template-name="components/categories-boxes">
 test
</script>

Pero cambiar el data-template-name con todos esos no tiene efecto. (Cuando lo cambio a components/topic-list sí funciona.)

¿Alguna idea de dónde está esta plantilla?

Esto es lo que quiero editar (pero cuando se muestra el formato box, desde: Panel de administración > configuración > estilo de categoría):

Cualquier ayuda será muy apreciada.

Parece que esto no es posible con los componentes del tema, ya que no parece haber ninguna plantilla o componente para esto :sob:

Parece que este módulo de Ruby está inyectando estilos en línea: discourse/lib/category_badge.rb at 888e68a1637ca784a7bf51a6bbb524dcf7413b13 · discourse/discourse · GitHub

¿Se pretendía que esto fuera una medida temporal? Si no es así, ¿crees que sería posible permitirnos especificar estilos personalizados, por favor @sam?

Podría estar vinculado a la opción none existente, donde podríamos tener dos campos en el panel de configuración de administración donde podríamos pegar nuestros estilos para cada uno (si no se pegan estilos, simplemente actúa como lo hace ahora la opción none):

<span class="badge-category-bg" style="background-color: #25AAE2;"></span>

y

<span style="color: #FFFFFF;" data-drop-close="true" class="badge-category clear-badge restricted" title="Una categoría exclusiva para miembros con nivel de confianza 3 o superior."><svg class="fa d-icon d-icon-lock svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#lock"></use></svg><span class="category-name">Salón</span></span>

A partir de este fragmento:

Solo necesitaríamos acceso a las variables de color de fondo y color de texto desde la página habitual de edición de categorías.

¿O hay alguna otra forma en la que podamos editar esto, Sam? Solo quiero eliminar el color de fondo y darle un borde que sea del mismo color que el texto (como se especifica en la página habitual de edición de categorías).

Cualquier ayuda sería muy apreciada.

Edición: parece que no es ese archivo Ruby después de todo (lo edité en mi instalación de desarrollo pero nada cambió)… una investigación más profunda y parece que es este: discourse/app/assets/javascripts/discourse/helpers/category-link.js.es6 at b25d9e96c1414bf78b44221da4d385675843991e · discourse/discourse · GitHub ¿hay alguna manera de crear un plugin para modificarlo?

Probablemente haya varias formas de hacerlo.

Prueba esto:

  • Sobrescribe la plantilla que invoca ese helper.
  • Sustitúyela por un helper propio.

Plantilla en cuestión: discourse/app/assets/javascripts/discourse/templates/list/topic-list-item.raw.hbs at c6e255f4e00400b8a6f82a799b7fa082b17adb1c · discourse/discourse · GitHub

Sobrescribir una plantilla tan baja en la jerarquía conlleva un riesgo relativamente bajo.

Otra opción podría ser usar jQuery dentro de una sobrescritura del componente topic-list-item para realizar las modificaciones que necesitas.