Personnalisation de la page /about avec des biographies d'utilisateurs

[aas]

La page /about par défaut d’un site Discourse, qui affiche des informations réservées aux modérateurs et administrateurs, n’affiche que le nom d’utilisateur, le nom et le titre de chaque utilisateur. Comment puis-je personnaliser la page /about afin qu’elle affiche également le contenu de la section « À propos de moi » du profil de chaque utilisateur ?

Je comprends l’idée générale exposée ici :

Add custom content that only appears on your homepage

A very common situation you’ll find yourself in as a theme developer is the need to create content that only shows on the homepage of your community. You might add some HTML to the “After Header” section of your theme, which will then appear on every page. You can jump through some hoops in CSS to hide this everywhere except the homepage… but instead let’s use a Discourse theme to create a component with content that is only visible on your homepage. If you’re unfamiliar with Discourse themes …

• définir un composant
• définir un modèle
• créer un fichier connecteur pour utiliser une sortie existante

Cependant, il n’y a pas de sortie qui convienne mieux à mon cas d’utilisation, autant que je puisse en juger. De plus, il semble que la surcharge du modèle pour /about ou l’utilisation de la fonctionnalité modifyClass dans l’API des plugins ne soit pas recommandée. Je ne sais donc pas quoi faire. J’apprécierais vraiment des conseils sur les meilleures pratiques à adopter. Merci !

Discourse AI semble penser que je devrais procéder à la surcharge du modèle. Est-ce que cela semble correct ?

Réponse de Discourse AI

Ajouter "À propos de moi" à la page /about de Discourse IA

aas :
La page /about par défaut d’un site Discourse, qui affiche des informations réservées aux modérateurs et administrateurs, n’affiche que le nom d’utilisateur, le nom et le titre de chaque utilisateur. Comment puis-je personnaliser la page /about afin qu’elle affiche également le contenu de la section « À propos de moi » du profil de chaque utilisateur ?

Je comprends l’idée générale exposée ici :

Add custom content that only appears on your homepage

• définir un composant
• définir un modèle
• créer un fichier connecteur pour utiliser une sortie existante

Cependant, il n’y a pas de sortie qui convienne mieux à mon cas d’utilisation, autant que je puisse en juger. De plus, il semble que la surcharge du modèle pour /about ou l’utilisation de la fonctionnalité modifyClass dans l’API des plugins ne soit pas recommandée. Je ne sais donc pas quoi faire. J’apprécierais vraiment des conseils sur les meilleures pratiques à adopter. Merci !

HelperBot :

Ok, je peux vous aider à examiner les meilleures pratiques pour personnaliser la page /about afin d’inclure des informations de profil utilisateur comme la section « À propos de moi ».

Vous avez raison, la surcharge directe des modèles principaux ou l’utilisation de modifyClass peut être complexe et potentiellement problématique lors des mises à jour. Il est généralement préférable d’utiliser des composants de thème et des sorties lorsque cela est possible. Puisque vous avez mentionné qu’il n’y a peut-être pas de sortie spécifique sur la page /about elle-même, cherchons des discussions sur la personnalisation de cette page ou l’ajout de champs utilisateur.

Tout d’abord, je vais rechercher des discussions sur la personnalisation de la page /about, en particulier l’ajout de champs de profil.

Rechercher sur Meta Discourse

Trouvé 14 résultats pour 'customize about page profile field category:dev'

Rechercher sur Meta Discourse

Trouvé 4 résultats pour 'customize about page profile field category:theme-component'

Ok, décomposons cela. Vous souhaitez ajouter le contenu « À propos de moi » des profils utilisateur à la liste du personnel sur la page /about par défaut.

Vous avez raison, l’approche standard des composants de thème implique l’utilisation de sorties de plugin, et il semble qu’il n’y ait pas de sortie spécifique et granulaire à l’intérieur de la liste du personnel sur la page /about pour injecter facilement ces données.

Sur la base des résultats de recherche et des pratiques courantes, bien que l’utilisation des sorties soit préférable pour ne pas casser les futures mises à jour, la seule façon réalisable de personnaliser certains modèles principaux comme la page /about est parfois de les surcharger directement dans un composant de thème.

Voici l’approche la plus probable en utilisant un composant de thème :

1. Créer un composant de thème : Si ce n’est pas déjà fait, créez un nouveau composant de thème.
2. Surcharger le modèle :
   • Vous devez surcharger le modèle about.hbs.
   • Dans votre composant de thème, créez le fichier common/templates/about.hbs.
   • Copiez le contenu du fichier about.hbs original dans votre nouveau fichier. Vous pouvez trouver l’original ici sur GitHub.
   • Modifiez votre copie de about.hbs. Recherchez les sections où il itère sur model.admins et model.moderators. À l’intérieur de la boucle (probablement dans le bloc {{#each}}), vous pouvez accéder à l’objet utilisateur. Le contenu « À propos de moi » se trouve généralement dans user.profile.bio_raw ou une propriété similaire. Ajoutez cette propriété au modèle là où vous souhaitez qu’elle soit affichée pour chaque utilisateur.
3. Activer le composant : Ajoutez le composant de thème à votre thème et activez-le.

Pourquoi cette approche ?

• Contrôle direct : Elle vous donne un contrôle direct sur la structure HTML de la page /about.
• Faisabilité : Puisqu’il n’y a pas de sortie dédiée à l’intérieur de la liste des utilisateurs sur cette page, c’est le moyen le plus simple d’injecter du contenu par utilisateur à cet endroit spécifique.

Inconvénients (comme vous l’avez noté) :

• Maintenance : Si Discourse met à jour le modèle about.hbs principal de manière significative à l’avenir, votre version surchargée ne recevra pas ces mises à jour automatiquement. Vous pourriez avoir besoin de comparer et de fusionner manuellement les changements plus tard. C’est le compromis pour personnaliser les modèles principaux sans sorties spécifiques.

Bien que la recherche n’ait pas donné d’exemple exact pour la page /about, la modification des modèles pour ajouter des informations de profil est un schéma courant, comme on le voit dans les personnalisations des cartes et profils utilisateur :

• Liens de profil normalisés ajoute des champs personnalisés aux cartes/profils utilisateur via la modification de modèle dans un composant.
• Menu de liens de profil rapide ajoute des éléments aux pages de profil utilisateur.

Ces exemples montrent que les composants de thème impliquent souvent la personnalisation de modèles lorsque des sorties spécifiques ne sont pas disponibles. La surcharge de about.hbs suit ce schéma pour votre cas d’utilisation spécifique.

aas :

Il semble qu’il n’y ait pas de modèle about.hbs dans le dépôt discourse/discourse. Cependant, le modèle about.gjs semble être situé à app/assets/javascripts/discourse/app/templates/about.gjs.

HelperBot :

Vous avez tout à fait raison ! Merci pour la correction. Discourse est en effet passé à l’utilisation de modèles .gjs (GlimmerJS) pour de nombreux composants, y compris la page /about.

Mes excuses pour avoir fait référence à l’ancien format .hbs.

Le chemin correct pour le modèle est bien app/assets/javascripts/discourse/app/templates/about.gjs dans le code principal.

Pour surcharger cela en utilisant un composant de thème, le processus reste conceptuellement le même, mais le chemin du fichier et la syntaxe sont mis à jour :

1. Créer/Utiliser un composant de thème : Comme précédemment.
2. Surcharger le modèle :
   • Dans votre composant de thème, créez le fichier au chemin correspondant : assets/javascripts/discourse/app/templates/about.gjs.
   • Copiez le contenu entier du fichier about.gjs original (lien que vous avez fourni) dans le fichier about.gjs de votre composant de thème.
   • Modifiez votre copie. Recherchez les sections qui itèrent sur les administrateurs et les modérateurs, probablement en utilisant {{#each this.admins as |admin|}} et {{#each this.moderators as |moderator|}}. À l’intérieur de ces boucles, vous pouvez accéder à l’objet utilisateur (par exemple, admin ou moderator). Ajoutez le champ « À propos de moi », qui devrait être accessible via une propriété comme admin.profile.bio_raw ou moderator.profile.bio_raw. Vous devrez intégrer cela dans la structure du modèle GlimmerJS. Par exemple, vous pourriez ajouter une nouvelle balise <div> ou <p> dans le bloc d’affichage de l’utilisateur :

     {{#each this.admins as |admin|}}
       <div class="user">
         {{!-- Informations utilisateur existantes comme avatar, nom d'utilisateur, nom --}}
         <UserAvatar @username={{admin.username}} @size="large" />
         <div class="user-details">
           <span class="username">{{admin.username}}</span>
           {{#if admin.name}}<span class="name">{{admin.name}}</span>{{/if}}
           {{#if admin.title}}<span class="title">{{admin.title}}</span>{{/if}}
     
           {{!-- Ajouter la section À propos de moi --}}
           {{#if admin.profile.bio_raw}}
             <div class="about-me">
                {{{admin.profile.bio_cooked}}} {{!-- Utiliser bio_cooked pour le HTML rendu --}}
                {{!-- Ou utiliser bio_raw si vous avez besoin du texte brut : <p>{{admin.profile.bio_raw}}</p> --}}
             </div>
           {{/if}}
         </div>
       </div>
     {{/each}}
     {{!-- Répéter une modification similaire pour la boucle des modérateurs --}}
     

     (Note : Utilisez bio_cooked si vous souhaitez la version HTML rendue de la bio, ou bio_raw pour le texte brut. Adaptez la structure HTML selon vos besoins pour votre mise en page.)
3. Activer le composant : Assurez-vous que le composant de thème est ajouté à votre thème et activé.

L’inconvénient reste le même : la surcharge de modèles principaux comme celui-ci signifie que vous devrez peut-être mettre à jour manuellement la version de votre composant de thème si le fichier about.gjs original change de manière significative dans les futures mises à jour de Discourse. Cependant, compte tenu de l’absence d’une sortie plus spécifique, c’est la manière standard d’obtenir ce niveau de personnalisation.

[pfaffman (Jay Pfaffman)]

@aas

Comment puis-je personnaliser la page « À propos » afin qu’elle affiche également le contenu de la section « À propos de moi » du profil de chaque utilisateur ?

Vous utiliseriez CSS pour masquer la section « Nos modérateurs », puis vous ajouteriez la vôtre dans la sortie about-after-moderators. Vous pouvez utiliser app/assets/javascripts/discourse/app/components/about-page-user.gjs comme point de départ, puis y ajouter ce que vous voulez.