Derzeit werden auf unseren Themenlisten-Seiten die Avatare der Hauptteilnehmer jedes Themas zusammen mit einem Link zur Profilseite des Benutzers angezeigt. Dies ist hier zu sehen:
Wenn ein Benutzer nicht angemeldet ist, ist dieser Link nicht klickbar, da er sonst zu einer Umleitung zur Anmeldeseite führen würde.
Das Problem ist, dass unser SEO-Berater festgestellt hat, dass dies ein Problem für uns darstellt und möchte, dass der Link zur Profilseite für Google überhaupt nicht sichtbar ist.
Es gibt ähnliche Probleme bei Dingen wie Themenbeiträgen, aber diese waren alle in Widgets und ließen sich mit api.reopenWidge() und ähnlichem relativ einfach lösen.
Nicht so bei den Themenlisten-Seiten, wo wir den Inhalt von raw-templates/list/posters-column.hbr ändern müssen!
Ich werde nun die Dinge beschreiben, die ich versucht habe. Fühlen Sie sich frei, zum Ende zu springen, wenn Sie möchten und die Antwort bereits kennen.
Zuerst habe ich versucht, ein Widget gemäß den Anweisungen im Anfängerleitfaden zu montieren.
<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>
Nichts davon schien irgendetwas zu bewirken. Schließlich fand ich in einem Theme, wo jemand eine .raw-Erweiterung im data-template-name-Wert verwendete, so dass ich davon ausgehe, dass der Leitfaden einfach veraltet ist. Er sagte nichts über rohe Vorlagen! Die Verwendung von .raw ermöglichte es, die obigen Änderungen darzustellen, außer dass mein benutzerdefiniertes Widget sich weigerte zu laden.
Das ist seltsam, denn list/posters-column wird nur von topic-list-item.hbr referenziert, was ebenfalls eine rohe Vorlage ist, und speziell eine der Vorlagen ist, die in diesem Leitfaden verwendet werden. Aber… auch hier ist es wohl einfach veraltet? Ich habe schließlich irgendwo gelesen, dass man Widgets nicht in rohen Vorlagen montieren kann, so dass dies nie funktionieren konnte.
Als nächstes entdeckte ich Partials und versuchte, diese zu verwenden. Ich dachte, ich hätte mehr Glück, jetzt, wo diese Teile keine rohe Vorlage sind.
<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>
Leider scheint es, dass man auch keine Partials in rohen Vorlagen verwenden kann, so dass dieser Ansatz nicht funktionierte.
Dann fand ich diesen Thread, der aussah, als könnte er enthalten, was ich brauchte. Basierend auf diesem Ansatz und wissend, dass list/topic-list-item (das list/posters-column aufruft) von der topic-list-item Komponente verwendet wird, kam ich zu folgendem Ergebnis:
<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>
Leider ist hideFromAnonUser für die rohe Vorlage nie sichtbar. Vielleicht muss hideFromAnonUser aus der Funktion berechnet werden, die dem Schlüssel hideFromAnonUser zugewiesen ist? Es spielt keine Rolle. Selbst wenn ich die ersten drei const-Zuweisungen auskommentiere und es einfach auf False setze oder einen console.log()-Aufruf darin vor der Return-Anweisung hinzufüge, sehe ich, dass die Funktion von nichts aufgerufen wird.
An diesem Punkt bin ich ratlos. Da ich noch nie mit all dem gearbeitet habe, fühle ich mich überfordert. Vielleicht habe ich etwas übersehen, aber es scheint, dass viele Informationen entweder irreführend oder veraltet sind, oder ich suche an den falschen Stellen, oder ich verstehe etwas falsch.
Wie kann ich die <a></a>-Tags durch <div></div>-Tags für Avatare auf den Themenlisten-Seiten ersetzen? Danke.
