En tant que nouvel utilisateur de Discourse, j’essaie de comprendre ce qui peut être personnalisé et comment. Je sais qu’il existe différents thèmes et composants de thème disponibles, et je comprends également qu’en théorie, je peux modifier le HTML, le CSS et le JavaScript en allant dans admin -> personnaliser -> Thèmes -> [cliquer sur le thème sélectionné] -> modifier le CSS/HTML.
J’essaie de comprendre comment utiliser le tableau de bord qui apparaît lorsque l’on tente de “modifier le CSS/HTML”. Il affiche <head> En-tête Après En-tête <body> Pied de page CSS intégré.
Existe-t-il un guide avec des exemples sur la façon de modifier réellement le HTML ? Je comprends que sur Meta, il y a des suggestions, mais autant que je puisse voir, elles sont dispersées dans divers sujets à travers le forum.
Par exemple, quelque chose qui me pose problème : ce post demande s’il est possible de réorganiser l’ordre des colonnes de la liste des sujets sur la page d’accueil, ce qui semble être une modification HTML assez basique. Cependant, la réponse est, en gros, non, vous ne pouvez pas le faire sans recourir à des surcharges complexes.
Je tente donc de déterminer ce que je peux faire avec cette fonctionnalité “modifier le CSS/HTML” pour personnaliser mon forum.
Merci. J’avais vu cela, mais je m’en étais tenu à distance car l’accent semblait être mis sur la création d’un thème, et non simplement sur la modification de mon seul forum.
Je vois qu’il y a bien des indications sur l’utilisation du tableau de bord « modifier le CSS/HTML ». Mais, pour confirmer, je peux modifier le HTML, le CSS et le JS sans créer un nouveau thème, n’est-ce pas ?
De plus, il n’est pas clair où ni comment je peux déplacer des composants, pas seulement les ajouter ou les supprimer (par exemple, changer l’ordre des colonnes pour que le groupe d’utilisateurs apparaisse comme la colonne la plus à gauche sur la page).
Je vous recommande vivement de consulter ce guide également. Ne vous laissez pas décourager par l’aspect « Thème », car il explore de nombreux aspects de la personnalisation qui vous seront utiles.
Le lien fourni par Simon explique tout, mais il est assez long à lire.
En résumé, si vous souhaitez modifier le HTML de Discourse, cela peut se faire de plusieurs façons :
Via certains onglets HTML prédéfinis dans votre thème ou composant : Header, After Header, </body>, Footer.
En ciblant un espace HTML « libre » (outlet) que vous pouvez remplir avec votre propre HTML. Cela peut être fait via une balise <script> que vous pouvez ajouter dans l’onglet <head>.
Voici un exemple des outlets disponibles dans une vue de sujet :
En écrasant un modèle HTML existant. Les modèles contiennent parfois beaucoup de code HTML, et vous devrez le copier-coller en entier pour apporter vos modifications. Cela peut également être fait dans une balise <script> ajoutée dans votre <head>.
Créer un thème, un composant de thème ou « simplement modifier mon seul forum » revient en fait à peu près au même ici. Les trois se font plus ou moins de la même manière.
Oui, cela dépend de ce que vous voulez faire exactement, mais généralement, la bonne approche consiste à créer un nouveau composant de thème et à y écrire le HTML/CSS.
Merci pour ces bonnes informations. Je parviens à comprendre comment ajouter du HTML dans un espace ouvert, ainsi que comment masquer du HTML existant avec CSS (par exemple, display: none sur la classe div concernée, que je suppose trouver simplement à l’aide de l’inspecteur).
Mais comment remplacer du HTML, par exemple déplacer un composant ? Auriez-vous un exemple rapide ?
Exemple rapide de remplissage d’une sortie avec un grand carré rouge ; ici, la sortie est située au-dessus de la liste des publications dans une vue de sujet :
Exemple rapide de remplacement du modèle de la barre de navigation :
<script type="text/x-handlebars" data-template-name="components/navigation-bar">
{{#each navItems as |navItem|}}
{{navigation-item content=navItem filterMode=filterMode category=category}}
{{/each}}
<div style="background: red; padding: 10px; float: left;">J'ai ajouté ce bloc dans le modèle de la barre de navigation</div>
{{custom-html name="extraNavItem" tagName="li"}}
{{!- ceci est fait pour éviter un DIV dans une UL, à l'origine {{plugin-outlet name="extra-nav-item"}}
{{#each connectors as |c|}}
{{plugin-connector connector=c class=c.classNames tagName="li" args=(hash category=category filterMode=filterMode)}}
{{/each}}
</script>
Ok. Maintenant, je commence à comprendre. C’est vraiment utile.
1. D’où vient le : type="text/x-handlebars" data-template-name="/connectors/topic-above-post-stream/a-unique-name ? (c’est-à-dire, comment savoir quoi y inscrire) ?
Et avec l’exemple de code que vous avez donné pour remplacer un modèle, je commence à voir comment c’est possible, car je peux prendre le code du modèle et le déplacer, le supprimer, l’ajouter, etc.
2. Donc, je récupère le code du modèle à partir du lien GitHub que vous avez fourni ? Si c’est le cas, cela a du sens, mais il semble difficile de trouver le bon code. Par exemple, quel est le modèle pour la page d’accueil ?
3. Ensuite, je colle ce code pertinent dans le tableau de bord « éditer css/html ». Mais où, sous la première option (<head>) ? Je suppose que oui d’après votre réponse précédente, mais ce serait utile de confirmer.
J’espère que tout cela pourra aussi être utile à d’autres.
Pour trouver le nom et l’emplacement d’un composant (outlet), je pense que la meilleure méthode est le plugin que j’ai lié ci-dessus.
Pour trouver le modèle correspondant à la partie de la page que vous souhaitez modifier… C’est un peu plus délicat.
Je ne connais pas de méthode simple. Un plugin similaire serait idéal.
Parfois, j’inspecte le code HTML de la page pour repérer un élément (comme une classe CSS, par exemple) qui me semble unique, puis je recherche ce terme dans tous les fichiers de modèles. J’ai cloné le dépôt Discourse sur mon ordinateur personnel et j’utilise Sublime Text pour parcourir tous ces fichiers, mais je suis certain qu’il existe d’autres méthodes, plus efficaces.
Parfois, j’examine également le code de composants de thème existants qui modifient les zones de la page que je souhaite également personnaliser.
Oui, c’est difficile, mais je ne suis pas expert et je suppose qu’il existe des méthodes plus efficaces pour faire cela !
Oui.
Lorsque vous venez de Wordpress ou phpBB et que vous êtes habitué à modifier directement les fichiers de modèles dans tel ou tel répertoire, Discourse peut sembler cryptique…
