Sur nos pages de liste de sujets actuelles, les avatars des principaux participants à chaque sujet sont affichés, ainsi qu’un lien vers la page de profil de l’utilisateur. Cela peut être vu ici :
Lorsqu’un utilisateur n’est pas connecté, ce lien n’est pas cliquable car il redirigerait sinon vers la page de connexion.
Le problème est que notre consultant SEO a déterminé que cela nous posait un problème et souhaite que ce lien vers la page de profil ne soit pas visible par Google du tout.
Il existe des problèmes similaires sur des éléments tels que les publications de sujets, mais ceux-ci étaient tous dans des widgets et ont été relativement faciles à résoudre avec api.reopenWidge() et autres.
Ce n’est pas le cas pour les pages de liste de sujets, où nous devons modifier le contenu de raw-templates/list/posters-column.hbr !
Je vais maintenant décrire les choses que j’ai essayées. N’hésitez pas à passer à la fin si vous le souhaitez et si vous connaissez déjà la réponse.
Au début, j’ai essayé de monter un widget conformément aux instructions du Guide pour débutants.
<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>
Rien de tout cela ne semblait avoir d’effet. Finalement, j’ai trouvé dans un thème où quelqu’un utilisait une extension .raw dans la valeur data-template-name, donc je suppose que le guide est juste obsolète. Il ne disait rien sur les modèles bruts ! L’utilisation de .raw permet aux modifications ci-dessus de s’afficher, sauf que mon widget personnalisé refusait de se charger.
C’est étrange, car list/posters-column n’est référencé que par topic-list-item.hbr, qui est également un modèle brut, et est spécifiquement l’un des modèles utilisés dans ce guide. Mais… encore une fois, je suppose qu’il est juste obsolète ? J’ai fini par lire quelque part que l’on ne peut pas monter de widgets dans des modèles bruts, donc il semble que cela n’ait jamais fonctionné.
Ensuite, j’ai découvert les partiels et j’ai essayé de les utiliser. J’ai pensé que j’aurais plus de succès, maintenant que ces parties ne sont pas des modèles bruts.
<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>
Malheureusement, il semble que l’on ne puisse pas non plus utiliser de partiels dans des modèles bruts, donc cette approche n’a pas abouti.
Ensuite, j’ai trouvé ceci fil de discussion qui semblait contenir ce dont j’avais besoin. Basé sur cette approche, et sachant que list/topic-list-item (qui appelle list/posters-column) est utilisé par le composant topic-list-item, j’ai abouti à ce qui suit :
<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>
Malheureusement, hideFromAnonUser ne semble jamais être visible par le modèle brut. Peut-être que hideFromAnonUser doit être calculé à partir de l’intérieur de la fonction assignée à la clé hideFromAnonUser ? Peu importe. Même si je commente les trois premières affectations const et que je me contente de retourner False, ou que j’ajoute un appel console.log() à l’intérieur avant l’instruction return, je peux voir que la fonction n’est jamais exécutée par quoi que ce soit.
À ce stade, je suis perdu. N’ayant jamais travaillé avec tout cela auparavant, j’ai l’impression d’être dépassé. Peut-être ai-je négligé quelque chose, mais il semble que beaucoup d’informations soient trompeuses ou obsolètes, ou que je cherche au mauvais endroit, ou que je ne comprends tout simplement pas quelque chose.
Comment puis-je remplacer les balises <a></a> par des balises <div></div> pour les avatars sur les pages de liste de sujets ? Merci.
