Kategoriename nach Kategoriebild

Hallo zusammen,

Bevor ich hier um Hilfe bitte, habe ich bereits alles versucht, aber bisher ohne Erfolg :sweat_smile:

Ich möchte den Kategorienamen nach dem Kategoriensymbol einfügen, wie es beim FiveM-Forum (https://forum.fivem.net) der Fall ist.

Bereits versucht:

  • Bearbeitung von category-title-link.hbs über das Docker-Image (docker -it imagename sh - \var\www\discourse\app\assets\javascripts\discourse\templates\components\category-title-link.hbs) :x:

  • Verwendung von JQuery $( “category-text-title” ).insertBefore( “category-logo.aspect-image” ) im Theme-Editor. Ich habe festgestellt, dass dies nicht funktioniert :x:

  • Einige CSS-Tricks (flex, order, table) :x:

Ich habe beim FiveM-Forum gesehen, dass sie die Reihenfolge der divs geändert haben, aber es gibt nichts im CSS, oder falls doch, bin ich nicht gut genug, um herauszufinden, wo.

Ich bin der WordPress-Mann. Ich hoffe, jemand mit mehr Erfahrung kann helfen. Vielen Dank im Voraus :heart:

Laut meinen primären Recherchen scheint der Template-Name categories-only.hbs zu sein. Versuche, das zu ändern. Ich habe es zwar nicht selbst ausprobiert, aber ich denke, das ist der Template, den du ändern möchtest.

Zweitens würde ich nicht empfehlen, dies in Discourse zu ändern. Ein besserer Weg ist es, das Template zu überschreiben.

Die Datei category-title-link.hbs enthält genau das, was ich ändern möchte, aber wenn ich sie bearbeite, treten keine Änderungen auf. Weißt du, ob die App neu aufgebaut werden muss oder ähnliches, wenn man .hbs-Dateien bearbeitet?

{{category-title-before category=category}}

<a class="category-title-link" href={{category.url}}>
  **<div class="category-text-title">**
    {{#if category.read_restricted}}
      {{d-icon 'lock'}}
    {{/if}}

    <span class="category-name">{{dir-span category.name}}</span>
  </div>
  {{#if category.uploaded_logo.url}}
    {{cdn-img
      src=category.uploaded_logo.url
      **class="category-logo"**
      width=category.uploaded_logo.width
      height=category.uploaded_logo.height}}
  {{/if}}
</a>

Wenn du Ember-Code bearbeitest, musst du die gesamte Anwendung nicht neu starten, aber stelle sicher, dass du das Browserfenster einen Hard-Reload durchführst, damit du nicht etwas siehst, das vom Browser zwischengespeichert wurde.

Nach den Änderungen habe ich den Docker-Container und den Webserver neu gestartet haha :sweat_smile:

Ich habe die Seite tausendfach neu geladen und es auch im Inkognito-Modus versucht

Keine Veränderungen :rofl:

Bitte bestätige mir kurz, bearbeite ich das richtige Verzeichnis?

\var\www\discorse\app\assets\javascripts\discourse\templates\components

Der Ordner “templates” klingt nach reinen Vorlagen und nicht nach dem, was live ist, aber ich verstehe diese Art von Programmierung nicht, also ist das nur eine Vermutung.

Versuchen Sie, den Ordner tmp im Discourse-Stammverzeichnis zu löschen und starten Sie dann den Server neu.

̶D̶a̶s̶ ̶i̶s̶t̶ ̶d̶e̶r̶ ̶Z̶u̶s̶t̶a̶n̶d̶,̶ ̶d̶e̶n̶ ̶i̶c̶h̶ ̶h̶e̶r̶v̶o̶r̶r̶u̶f̶e̶

Warum würdest du das tun? Dies ist eine CSS-Änderung über den Admin-Bereich, unter ‘Anpassen’.

Kannst du mir dabei helfen? Wie gesagt, ich habe alles versucht :rofl:

Einige CSS-Tricks (flex, order, table) :x

Siehe Developing Discourse Themes & Theme Components.

Danke, Jay, aber ich bin kein Entwickler. Ich kenne mich zwar ein bisschen aus, aber wie man sieht, reicht das nicht, um das Problem zu lösen. Ich habe wirklich alles versucht, auch nach ähnlichen Themen hier gesucht, aber ohne Erfolg :sleepy:

Hey Jay, vielen Dank, ich habe es geschafft :heart_eyes:

Wenn jemand nach dieser Lösung sucht, geht einfach so vor:

Gehe zu Einstellungen > Admin > Anpassen > Aktives Theme auswählen > CSS/HTML bearbeiten

Im Feld </body> füge diesen Code ein:

<script type="text/x-handlebars" data-template-name="components/category-title-link">
{{category-title-before category=category}}
<a class="category-title-link" href={{category.url}}>
    {{#if category.uploaded_logo.url}}
    {{cdn-img
      src=category.uploaded_logo.url
      class="category-logo"
      width=category.uploaded_logo.width
      height=category.uploaded_logo.height}}
  {{/if}}
  <div class="category-text-title">
    {{#if category.read_restricted}}
      {{d-icon 'lock'}}
    {{/if}}

    <span class="category-name">{{dir-span category.name}}</span>
  </div>
</a>
</script>

Und tada, es ist erledigt :partying_face::tada::tada:

Du warst also doch ein Entwickler!