Nom de la catégorie après l'image de la catégorie

Soutien
1

Bonjour à tous,

Avant de venir demander de l’aide, j’ai tout essayé sans succès jusqu’à présent :sweat_smile:

J’essaie d’afficher le nom de la catégorie après l’image de la catégorie, comme sur le forum FiveM (https://forum.fivem.net).

shit
shit1202×423 48.5 KB

Déjà essayé :

  • Modifier category-title-link.hbs via une image Docker (docker -it imagename sh - \var\www\discourse\app\assets\javascripts\discourse\templates\components\category-title-link.hbs) :x:

  • Utiliser JQuery $( “category-text-title” ).insertBefore( “category-logo.aspect-image” ) dans l’éditeur de thème. J’ai découvert que cela ne fonctionne pas :x:

  • Quelques astuces CSS (flex, order, table) :x:

J’ai vu sur le forum FiveM qu’ils ont changé l’ordre des div, mais il n’y a rien dans le CSS, ou alors je ne suis pas assez doué pour le trouver.

Je suis le gars de WordPress, j’espère qu’une personne plus expérimentée pourra m’aider. Merci d’avance :heart:

2

Selon mes recherches personnelles, le nom du modèle semble être categories-only.hbs. Essayez de le modifier. Je ne l’ai pas testé moi-même, mais je pense que c’est bien le modèle que vous souhaitez modifier.

Deuxièmement, je ne recommanderais pas de le modifier directement dans Discourse. Une meilleure approche consiste à remplacer le modèle.

3

Le fichier category-title-link.hbs contient exactement ce que je cherche à modifier, mais lorsque j’édite, aucun changement n’apparaît. Savez-vous s’il est nécessaire de reconstruire l’application ou de faire quelque chose de similaire lors de la modification des fichiers HBS ?

{{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>
4

Si vous modifiez du code Ember, vous n’avez pas besoin de redémarrer l’application entière, mais assurez-vous de recharger manuellement la fenêtre du navigateur pour éviter d’afficher du contenu mis en cache par le navigateur.

5

Après les modifications, j’ai redémarré le conteneur Docker et redémarré le serveur web haha :sweat_smile:

J’ai rechargé la page des milliers de fois et j’ai aussi essayé en navigation privée

Aucun changement :rofl:

6

Peux-tu juste me confirmer que je modifie le bon répertoire ?

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

Le dossier « templates » semble n’être qu’un ensemble de modèles et pas ce qui est en production, mais je ne comprends pas ce genre de programmation, donc c’est juste une supposition de ma part.

7

Essayez de supprimer le dossier tmp dans le répertoire racine de Discourse, puis redémarrez le serveur.

8

Anota%C3%A7%C3%A3o%202019-07-28%20071003
Anota%C3%A7%C3%A3o%202019-07-28%20071003906×289 22 KB

̶C̶’̶e̶s̶t̶ ̶c̶e̶ ̶q̶u̶e̶ ̶j̶’̶e̶n̶ ̶f̶a̶i̶s̶

9

Pourquoi feriez-vous cela ? Il s’agit d’une modification CSS, via l’administration, personnalisation.

11

Peux-tu m’aider avec ça ? Comme je l’ai dit, j’ai tout essayé :rofl:

Quelques astuces CSS (flex, order, table) :x

12

Voir Developing Discourse Themes & Theme Components.

13

Merci Jay, mais je ne suis pas développeur. Je connais quelques choses, mais comme on peut le voir, pas assez pour résoudre ce problème. J’ai vraiment tout essayé, y compris chercher des sujets similaires ici, sans succès :sleepy:

14

Salut Jay, merci beaucoup, j’ai fait :heart_eyes:

Si quelqu’un cherche cette solution, faites simplement ceci :

Allez dans Paramètres > Administration > Personnaliser > Sélectionner le thème actif > Modifier CSS/HTML

Dans le champ </body>, collez ce code :

<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>

Et voilà, c’est fait :partying_face::tada::tada:

15

Donc tu étais développeur après tout !