HTML personnalisé sur la page des groupes

Bonjour à tous,
Je conçois une communauté où chaque utilisateur doit demander l’autorisation pour rejoindre un groupe, et chaque groupe contrôle l’accès à une catégorie.
J’aimerais ajouter un message d’accueil / une explication en HTML sur la page des groupes ( https://community.horbitercafe.com/g ).

Quelle est la méthode la plus simple pour y parvenir ?

Merci,
F.

Je ne suis pas sûr que ce soit le bon point de sortie du plugin, mais vous pouvez essayer ceci

Dans Personnaliser > </head>

Ajoutez ceci

<script type="text/x-handlebars" data-template-name="/connectors/before-group-container/plugin-outlet-component">

votre code HTML ici

</script>
1 « J'aime »

Comment puis-je limiter cela uniquement à la page /g ?

Oui, cela permet effectivement d’« injecter » du HTML au-dessus du nom du groupe et d’autres informations sur les pages, par exemple https://discourse.example.org/g/foo. Merci pour le partage.

@Fausto_Dassenno, cherchez-vous une solution pour la page principale de la liste des groupes, mais pas pour la page de détail d’un groupe spécifique ?

C’est exact, je souhaite ajouter du HTML uniquement sur la page principale de la liste des groupes.

Ajoutez une classe à votre code HTML, comme gr-horbiter

<script type="text/x-handlebars" data-template-name="/connectors/before-group-container/plugin-outlet-component">

<div class="gr-horbiter">
votre code HTML
</div>

</script>

Et ajoutez ce CSS dans common

.gr-horbiter {
    display: none;
}

body.groups-page .gr-horbiter {
    display: block;
}

Je n’ai pas testé le code, mais cela devrait fonctionner.

1 « J'aime »

Merci @Steven, la partie script va-t-elle dans la section HTML d’un composant ? Ou dois-je modifier le HTML directement ?

Désolé, je ne suis pas sûr de bien comprendre la question. L’anglais n’est pas ma première langue, je peux mal interpréter certaines choses.

Vous copiez le script et le HTML dans la section </head> et ajoutez votre message de bienvenue, avec un div ou un span si vous souhaitez le personnaliser, et cela devrait fonctionner.

1 « J'aime »

Merci @Steven, j’ai réussi à le faire fonctionner.
Le seul problème est que je dois l’ajouter dans la page d’index du groupe et non dans la page de détail du groupe.
Du moins, j’ai maintenant compris la logique derrière cela. Je vais faire plus de recherches.
Je ne trouve aucun connecteur dans la page d’index du groupe.

J’aurais dû tester, je vois maintenant quel est le problème :man_facepalming:
Le plugin outlet ne fonctionne pas pour la page principale du groupe.

Je dispose toujours d’une méthode pour ajouter une bannière, mais ce n’est probablement pas la plus propre. Le personnel de Discourse pourrait avoir une meilleure solution.

Ce code CSS vous permettra d’ajouter du texte et des styles, mais vous n’aurez que cette classe. Je ne pense pas qu’il soit possible d’ajouter un lien dans la bannière textuelle.

body.groups-page .groups-header::before {
    content: "Votre texte";
    width: 100%;
    margin: 0 0 15px 0;
}

Vous pouvez ajouter un arrière-plan, une bordure, etc. dans cette classe pour personnaliser la bannière et la créer.

2 « J'aime »

Merci,
Je n’arrive pas à atteindre mon objectif avec cela. Ce que je cherchais à faire, c’est créer une page d’atterrissage pour les groupes afin que les nouveaux utilisateurs puissent demander l’accès aux groupes qu’ils souhaitaient. Pour ce faire, je voulais fournir quelques explications en utilisant du HTML.

Quelle est la difficulté à demander un nouveau nom de point de vente sur la page d’index des groupes ?

Si tout ce que vous voulez, c’est quelque chose comme ça, c’est facile

.welcome-message {
    display:none;
}
.groups-page .welcome-message {
    display:block;
    margin: 20px;
}

Ensuite, ajoutez ceci dans la section Après l’en-tête

<div class="welcome-message">Insérez ici vos informations et instructions de bienvenue</div>

3 « J'aime »

Ouais, c’est de loin la meilleure solution

Je complique parfois les choses :man_facepalming:

3 « J'aime »

Super, cela fonctionne !
Que se passe-t-il si je veux faire la même chose, mais en l’affichant uniquement sur la page d’accueil ? Que dois-je remplacer par .groups-page ?

Regardez la classe utilisée dans body de votre page d’accueil HTML.

Par exemple, ici sur meta.discourse.org :
<body class="navigation-topics" data-gr-c-s-loaded="true" style="" cz-shortcut-listen="true">

La classe utilisée est navigation-topics.

1 « J'aime »

Ou si vous souhaitez quelque chose de plus élaboré, essayez

Intéressant, sur ma page d’accueil, j’ai ceci

image

Quelle page est votre page d’accueil ?

image
Est-ce cela que vous demandez ?

Je vois ce qui cause le problème avec votre classe de corps vide.
Au lieu d’examiner le code source de la page, appuyez sur F12 pour ouvrir les outils de développement de Chrome/Firefox/Edge et allez dans l’onglet « Élément ».
Regardez le code HTML à partir de là, et votre balise <body> affichera les bonnes classes.