Personalizando la página /about con biografías de usuarios

[aas]

La página /about predeterminada de un sitio de Discourse que muestra información solo para moderadores y administradores muestra el nombre de usuario, el nombre y el título de cada usuario. ¿Cómo personalizo la página /about para que también muestre el contenido de la sección “Acerca de mí” del perfil de cada usuario?

Entiendo la idea general descrita aquí:

Add custom content that only appears on your homepage

A very common situation you’ll find yourself in as a theme developer is the need to create content that only shows on the homepage of your community. You might add some HTML to the “After Header” section of your theme, which will then appear on every page. You can jump through some hoops in CSS to hide this everywhere except the homepage… but instead let’s use a Discourse theme to create a component with content that is only visible on your homepage. If you’re unfamiliar with Discourse themes …

• definir un componente
• definir una plantilla
• crear un archivo conector para utilizar una salida existente

Sin embargo, no hay ninguna salida que funcione mejor para mi caso de uso, hasta donde yo sé. Además, parece que no se recomienda sobrescribir la plantilla para /about ni utilizar la funcionalidad modifyClass en la API de complementos. Así que no estoy seguro de qué hacer. Agradecería mucho orientación sobre las mejores prácticas. ¡Gracias!

Discourse AI parece pensar que debería seguir adelante y sobrescribir la plantilla. ¿Parece correcto?

Respuesta de Discourse AI

Añadir "Acerca de mí" a la página /about de Discourse IA

aas:
La página /about predeterminada de un sitio de Discourse que muestra información solo para moderadores y administradores muestra el nombre de usuario, el nombre y el título de cada usuario. ¿Cómo personalizo la página /about para que también muestre el contenido de la sección “Acerca de mí” del perfil de cada usuario?

Entiendo la idea general descrita aquí:

Add custom content that only appears on your homepage

• definir un componente
• definir una plantilla
• crear un archivo conector para utilizar una salida existente

Sin embargo, no hay ninguna salida que funcione mejor para mi caso de uso, hasta donde yo sé. Además, parece que no se recomienda sobrescribir la plantilla para /about ni utilizar la funcionalidad modifyClass en la API de complementos. Así que no estoy seguro de qué hacer. Agradecería mucho orientación sobre las mejores prácticas. ¡Gracias!

HelperBot:

Claro, puedo ayudarte a investigar las mejores prácticas para personalizar la página /about e incluir información del perfil de usuario como la sección “Acerca de mí”.

Tienes razón en que sobrescribir directamente las plantillas principales o usar modifyClass puede ser complejo y potencialmente causar problemas con las actualizaciones. Generalmente, se prefiere usar componentes de temas y salidas cuando sea posible. Dado que mencionaste que podría no haber una salida específica en la propia página /about, busquemos discusiones sobre la personalización de esta página o la adición de campos de usuario.

Primero, buscaré discusiones sobre la personalización de la página /about, específicamente la adición de campos de perfil.

Buscar en Meta Discourse

Encontré 14 resultados para 'customize about page profile field category:dev'

Buscar en Meta Discourse

Encontré 4 resultados para 'customize about page profile field category:theme-component'

Bien, analicemos esto. Quieres añadir el contenido “Acerca de mí” de los perfiles de usuario a la lista de personal en la página /about predeterminada.

Tienes razón en que el enfoque estándar de componente de tema implica el uso de salidas de complementos, y parece que no hay una salida específica y granular dentro de la lista de personal en la página /about para inyectar fácilmente estos datos.

Según los resultados de la búsqueda y las prácticas comunes, aunque se prefiere el uso de salidas para no romper las futuras actualizaciones, a veces la única forma factible de personalizar plantillas principales específicas como la página /about es sobrescribirlas directamente dentro de un componente de tema.

Aquí está el enfoque más probable utilizando un componente de tema:

1. Crear un Componente de Tema: Si aún no lo has hecho, crea un nuevo componente de tema.
2. Sobrescribir la Plantilla:
   • Necesitas sobrescribir la plantilla about.hbs.
   • En tu componente de tema, crea el archivo common/templates/about.hbs.
   • Copia el contenido del archivo about.hbs original en tu nuevo archivo. Puedes encontrar el original aquí en GitHub.
   • Modifica tu copia de about.hbs. Busca las secciones donde itera sobre model.admins y model.moderators. Dentro del bucle (probablemente dentro del bloque {{#each}}), puedes acceder al objeto de usuario. El contenido de “Acerca de mí” suele estar en user.profile.bio_raw o una propiedad similar. Añade esta propiedad a la plantilla donde quieras que se muestre para cada usuario.
3. Habilitar el Componente: Añade el componente de tema a tu tema y actívalo.

¿Por qué este enfoque?

• Control Directo: Te da control directo sobre la estructura HTML de la página /about.
• Viabilidad: Dado que no hay una salida dedicada dentro de la lista de usuarios en esa página, esta es la forma más sencilla de inyectar contenido por usuario en esa ubicación específica.

Desventajas (como señalaste):

• Mantenimiento: Si Discourse actualiza la plantilla principal about.hbs de forma significativa en el futuro, tu versión sobrescrita no recibirá esas actualizaciones automáticamente. Es posible que necesites comparar y fusionar manualmente los cambios más adelante. Este es el compromiso de personalizar plantillas principales sin salidas específicas.

Aunque la búsqueda no arrojó un ejemplo exacto para la página /about, modificar plantillas para añadir información de perfil es un patrón común, como se ve en las personalizaciones de tarjetas de usuario y perfiles:

• Normalized Profile Links añade campos personalizados a las tarjetas/perfiles de usuario mediante la modificación de plantillas en un componente.
• Quick Profile Links Menu añade elementos a las páginas de perfil de usuario.

Estos ejemplos muestran que los componentes de tema a menudo implican la personalización de plantillas cuando no hay salidas específicas disponibles. Sobrescribir about.hbs sigue este patrón para tu caso de uso específico.

aas:

Parece que no hay una plantilla about.hbs en el repositorio discourse/discourse. Sin embargo, la plantilla about.gjs parece estar ubicada en app/assets/javascripts/discourse/app/templates/about.gjs.

HelperBot:

¡Tienes toda la razón! Gracias por la corrección. Discourse ha pasado a utilizar plantillas .gjs (GlimmerJS) para muchos componentes, incluida la página /about.

Mis disculpas por referirme al formato .hbs anterior.

La ruta correcta para la plantilla es, de hecho, app/assets/javascripts/discourse/app/templates/about.gjs en el código principal.

Para sobrescribir esto usando un componente de tema, el proceso sigue siendo conceptualmente el mismo, pero la ruta del archivo y la sintaxis se actualizan:

1. Crear/Usar un Componente de Tema: Como antes.
2. Sobrescribir la Plantilla:
   • En tu componente de tema, crea el archivo en la ruta correspondiente: assets/javascripts/discourse/app/templates/about.gjs.
   • Copia el contenido completo del archivo about.gjs original (enlace que proporcionaste) en el archivo about.gjs de tu componente de tema.
   • Modifica tu copia. Busca las secciones que iteran sobre administradores y moderadores, probablemente usando {{#each this.admins as |admin|}} y {{#each this.moderators as |moderator|}}. Dentro de estos bucles, puedes acceder al objeto de usuario (por ejemplo, admin o moderator). Añade el campo “Acerca de mí”, que debería ser accesible a través de una propiedad como admin.profile.bio_raw o moderator.profile.bio_raw. Necesitarás integrar esto en la estructura de la plantilla GlimmerJS. Por ejemplo, podrías añadir una nueva etiqueta <div> o <p> dentro del bloque de visualización del usuario:

     {{#each this.admins as |admin|}}
       <div class="user">
         {{!-- Información de usuario existente como avatar, nombre de usuario, nombre --}}
         <UserAvatar @username={{admin.username}} @size="large" />
         <div class="user-details">
           <span class="username">{{admin.username}}</span>
           {{#if admin.name}}<span class="name">{{admin.name}}</span>{{/if}}
           {{#if admin.title}}<span class="title">{{admin.title}}</span>{{/if}}
     
           {{!-- Añadir la sección Acerca de mí --}}
           {{#if admin.profile.bio_raw}}
             <div class="about-me">
                {{{admin.profile.bio_cooked}}} {{!-- Usar bio_cooked para HTML renderizado --}}
                {{!-- O usar bio_raw si necesitas el texto sin formato: <p>{{admin.profile.bio_raw}}</p> --}}
             </div>
           {{/if}}
         </div>
       </div>
     {{/each}}
     {{!-- Repetir una modificación similar para el bucle de moderadores --}}
     

     (Nota: Usa bio_cooked si deseas la versión HTML renderizada de la biografía, o bio_raw para el texto sin formato. Ajusta la estructura HTML según sea necesario para tu diseño.)
3. Habilitar el Componente: Asegúrate de que el componente de tema esté añadido a tu tema y activo.

La desventaja sigue siendo la misma: sobrescribir plantillas principales como esta significa que es posible que necesites actualizar manualmente la versión de tu componente de tema si el archivo about.gjs original cambia significativamente en futuras actualizaciones de Discourse. Sin embargo, dada la falta de una salida más específica, esta es la forma estándar de lograr este nivel de personalización.

[pfaffman (Jay Pfaffman)]

@aas

¿Cómo personalizo la página “Acerca de” para que también muestre el contenido de la sección “Acerca de mí” del perfil de cada usuario?

Usarías CSS para ocultar la sección “Nuestros moderadores” y luego agregarías la tuya en el outlet about-after-moderators. Puedes usar app/assets/javascripts/discourse/app/components/about-page-user.gjs como punto de partida y luego agregar lo que desees.