Attualmente, nelle nostre pagine dell’elenco degli argomenti, vengono visualizzati gli avatar dei principali partecipanti a ciascun argomento, insieme a un link alla pagina del profilo dell’utente. Questo può essere visto qui:
Quando un utente non è connesso, questo link non sarà cliccabile poiché altrimenti restituirebbe un reindirizzamento alla pagina di accesso.
Il problema è che il nostro consulente SEO ha stabilito che questi sono un problema per noi e desidera che quel link alla pagina del profilo non sia affatto visibile a Google.
Ci sono problemi simili su cose come i post degli argomenti, ma questi erano tutti in widget e sono stati relativamente facili da risolvere con api.reopenWidge() e simili.
Non così per le pagine dell’elenco degli argomenti, dove dobbiamo modificare il contenuto di raw-templates/list/posters-column.hbr!
Ora descriverò le cose che ho provato. Sentiti libero di saltare alla fine se preferisci e conosci già la risposta.
All’inizio, ho provato a montare un widget come da istruzioni della Guida per principianti.
<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>
Nessuno di questi sembrava fare nulla. Alla fine ho trovato in un tema in cui qualcuno stava usando un’estensione .raw nel valore di data-template-name, quindi presumo che la guida sia semplicemente obsoleta. Non diceva nulla sui template raw! L’uso di .raw consente il rendering delle modifiche di cui sopra, tranne per il fatto che il mio widget personalizzato ha rifiutato di caricarsi.
Questo è strano, perché list/posters-column è referenziato solo da topic-list-item.hbr, che è anche un template raw, ed è specificamente uno dei template utilizzati in quella guida. Ma… di nuovo, immagino che sia solo obsoleto? Alla fine ho letto da qualche parte che non puoi montare widget nei template raw, quindi sembra che questo non avrebbe mai funzionato.
Successivamente, ho scoperto i partial e ho provato a usarli. Ho pensato che avrei avuto più fortuna, ora che quelle parti non sono un template 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>
Sfortunatamente, sembra che non si possano usare nemmeno i partial nei template raw, quindi quell’approccio non è andato bene.
Poi, ho trovato questo thread che sembrava contenere ciò di cui avevo bisogno. Basandomi su quell’approccio, e sapendo che list/topic-list-item (che chiama list/posters-column) è utilizzato dal componente topic-list-item, sono arrivato a quanto segue:
<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>
Purtroppo, hideFromAnonUser non sembra mai essere visibile al template raw. Forse hideFromAnonUser deve essere calcolato dall’interno della funzione assegnata alla chiave hideFromAnonUser? Non sembra importare. Anche se commento le prime tre assegnazioni const e mi limito a impostarla per restituire False, o aggiungo una chiamata console.log() al suo interno prima dell’istruzione return, posso vedere che la funzione non viene mai eseguita da nulla.
A questo punto sono perso. Non avendo mai lavorato con nulla di tutto ciò prima, sento di essere in difficoltà. Forse ho trascurato qualcosa, ma sembra che molte delle informazioni siano fuorvianti o obsolete, o che io stia guardando nei posti sbagliati, o che semplicemente stia fraintendendo qualcosa.
Come posso sostituire i tag <a></a> con i tag <div></div> per gli avatar nelle pagine dell’elenco degli argomenti? Grazie.
