Actualmente, en nuestras páginas de lista de temas, se muestran los avatares de los participantes principales en cada tema, junto con un enlace a la página de perfil del usuario. Esto se puede ver aquí:
Cuando un usuario no ha iniciado sesión, este enlace no será clickeable, ya que de lo contrario devolvería una redirección a la página de inicio de sesión.
El problema es que nuestro consultor de SEO ha determinado que esto es un problema para nosotros y quiere que el enlace de la página de perfil no sea visible para Google en absoluto.
Hay problemas similares en cosas como las publicaciones de temas, pero todos estos estaban en widgets y han sido relativamente fáciles de resolver con api.reopenWidge() y similares.
No así con las páginas de lista de temas, ¡donde necesitamos cambiar el contenido de raw-templates/list/posters-column.hbr!
Ahora describiré las cosas que he intentado. Siéntete libre de saltar al final si lo prefieres y ya conoces la respuesta.
Al principio, intenté montar un widget según las instrucciones de la Guía para principiantes.
<script type="text/x-handlebars" data-template-name="list/posters-column">
<td class='posters topic-list-data'>
{{#each posters as |poster|}}
{{#if poster.moreCount}}
<a class="posters-more-count">{{poster.moreCount}}</a>
{{else}}
{{mount-widget widget="custom-list-avatar"}}
{{/if}}
{{/each}}
</td>
</script>
Nada de esto pareció hacer nada. Finalmente, encontré en un tema donde alguien estaba usando una extensión .raw en el valor data-template-name, así que supongo que la guía está desactualizada. ¡No decía nada sobre plantillas raw! Usar .raw permite que los cambios anteriores se rendericen, excepto que mi widget personalizado se negó a cargar.
Esto es extraño, porque list/posters-column solo es referenciado por topic-list-item.hbr, que también es una plantilla raw, y es específicamente una de las plantillas utilizadas en esa guía. Pero… ¿otra vez, supongo que está desactualizada? Finalmente leí en alguna parte que no puedes montar widgets en plantillas raw, así que parece que esto nunca iba a funcionar.
A continuación, descubrí los parciales e intenté usarlos. Pensé que tendría más suerte, ahora que esas partes no son una plantilla raw.
<script type="text/x-handlebars" data-template-name="components/custom-avatar">
<a href="{{poster.user.path}}" data-user-card="{{poster.user.username}}" class="{{poster.extraClasses}}">{{avatar poster avatarTemplatePath="user.avatar_template" usernamePath="user.username" namePath="user.name" imageSize="small"}}</a>
</script>
<script type="text/x-handlebars" data-template-name="list/posters-column.raw">
<td class='posters topic-list-data'>
{{#each posters as |poster|}}
{{#if poster.moreCount}}
<a class="posters-more-count">{{poster.moreCount}}</a>
{{else}}
{{partial 'components/custom-avatar'}}
{{/if}}
{{/each}}
</td>
</script>
Desafortunadamente, parece que tampoco puedes usar parciales en plantillas raw, así que ese enfoque no funcionó.
Luego, encontré este hilo que parecía contener lo que necesitaba. Basado en ese enfoque, y sabiendo que list/topic-list-item (que llama a list/posters-column) es utilizado por el componente topic-list-item, llegué a lo siguiente:
<script type="text/x-handlebars" data-template-name="list/posters-column.raw">
<td class='posters topic-list-data'>
{{#each posters as |poster|}}
{{#if poster.moreCount}}
<a class="posters-more-count">{{poster.moreCount}}</a>
{{else}}
{{#if hideFromAnonUser}}
<div data-user-card="{{poster.user.username}}" class="{{poster.extraClasses}}">{{avatar poster avatarTemplatePath="user.avatar_template" usernamePath="user.username" namePath="user.name" imageSize="small"}}</div>
{{else}}
<a href="{{poster.user.path}}" data-user-card="{{poster.user.username}}" class="{{poster.extraClasses}}">{{avatar poster avatarTemplatePath="user.avatar_template" usernamePath="user.username" namePath="user.name" imageSize="small"}}</a>
{{/if}}
{{/if}}
{{/each}}
</td>
</script>
<script type="text/discourse-plugin" version="1.1.0">
const settings = Discourse.SiteSettings;
const user = api.getCurrentUser();
const hideFromAnonUser = settings.hide_user_profiles_from_public && !user;
const topicListItemComponent = require('discourse/components/topic-list-item').default;
topicListItemComponent.reopen({
hideFromAnonUser: function() {
return hideFromAnonUser
}.property()
});
</script>
Lamentablemente, hideFromAnonUser nunca parece ser visible para la plantilla raw. ¿Quizás hideFromAnonUser necesita ser calculado desde dentro de la función asignada a la clave hideFromAnonUser? No parece importar. Incluso si comento las tres primeras asignaciones const y simplemente la configuro para que devuelva False, o agrego una llamada console.log() dentro de ella antes de la declaración de retorno, puedo ver que la función nunca es ejecutada por nada.
En este punto, estoy perdido. Al no haber trabajado nunca con nada de esto antes, siento que estoy superado. Quizás he pasado algo por alto, pero parece que mucha de la información es engañosa o está desactualizada, o estoy buscando en los lugares equivocados, o de lo contrario simplemente estoy malinterpretando algo.
¿Cómo puedo reemplazar las etiquetas <a></a> con etiquetas <div></div> para los avatares en las páginas de listado de temas? Gracias.
