Ajouter du texte à l'en-tête à côté du logo

Je suis nouveau sur Discourse, je m’excuse donc si cela est facile à réaliser, mais je n’arrive pas à trouver où je peux définir le texte que je souhaite voir apparaître à côté de notre logo dans l’en-tête de notre page Discourse.

Dans le cadre rouge de l’en-tête, je souhaiterais idéalement ajouter un texte indiquant « Forums de la communauté » ou quelque chose de similaire :

Comment puis-je procéder pour réaliser cela ?

Merci d’avance pour tous les commentaires !

Hey Daniel :wave:

You can use something like this to add text next to the header logo on your site

<script type="text/discourse-plugin" version="0.8">
api.decorateWidget("home-logo:after", helper => {
  const titleVisible = helper.attrs.minimized;
  const headerText = "Text you want to add"; // <--- change this text

  if (!titleVisible) {
    return api.h("span.header-text", headerText);
  }
});
</script>

You’d add it in the header section of your theme / component. You can read more about the Discourse theme system here

3 « J'aime »

Cela provoque maintenant l’affichage d’une bannière d’erreur, en raison des changements apportés à Discourse. Avez-vous des suggestions pour obtenir le même résultat avec la nouvelle approche ? Merci.

Cette méthode ne fonctionnera plus et vous devrez utiliser les connecteurs spécifiés ici dans la section concernant le point de sortie du plugin home-logo remplaçant les décorations de widget home-logo:after :

4 « J'aime »

Si j’ai le temps de le faire moi-même, je collerai le code ici. Alternativement, si quelqu’un a le temps avant, je lui serais très reconnaissant… :slight_smile:

1 « J'aime »

Je viens de faire cela pour un thème. J’utilise le titre du site et une courte description, mais vous pourriez également insérer des valeurs provenant des paramètres du thème ou du texte localisé.

Ajoutez un composant glimmer dans components/header-logo-title.gjs

import Component from "@glimmer/component";
import { service } from "@ember/service";

export default class HeaderLogoTitle extends Component {
  @service siteSettings;

  <template>
    {{#unless @outletArgs.minimized}}
      <div class="header-logo-title">
        <span
          class="header-logo-title__title"
        >{{this.siteSettings.title}}</span>
        {{#if this.siteSettings.short_site_description}}
          <span
            class="header-logo-title__description"
          >{{this.siteSettings.short_site_description}}</span>
        {{/if}}
      </div>
    {{/unless}}
  </template>
}

Attachez-le à l’outlet dans /api-initializers/my-theme.js

import { apiInitializer } from "discourse/lib/api";
import HeaderLogoTitle from "../components/header-logo-title";

export default apiInitializer("1.26.0", (api) => {
  api.renderAfterWrapperOutlet("home-logo", HeaderLogoTitle);
});

L’helper #unless vérifie l’état minimisé du logo et n’ajoute le texte que lorsque le logo complet serait visible. Si vous souhaitez toujours l’afficher, vous devrez supprimer cette condition.

4 « J'aime »

Vous pouvez également utiliser api.renderAfterWrapperOutlet(\"home-logo\") (depuis la v.1.26.0). Il présente l’avantage d’utiliser le nom réel de l’outlet sans fournir le __before/__after magique.

4 « J'aime »

Merci @Arkshine. C’est mieux, j’ai mis à jour le message précédent.

3 « J'aime »

J’essaie de faire cela maintenant mais j’ai quelques problèmes - comment puis-je accéder au "composant glimmer dans components/header-logo-title.gjs" ?

Ma communauté est ici : https://community.worldradioleague.com/.

Je suis sur le plan payant - peut-être que je n’ai pas accès au cœur de Discourse pour voir cela ?

J’avais enveloppé cela dans un composant, vous pourriez essayer de l’utiliser : Manuel Kostka / Discourse / Helpers / Header Logo Title · GitLab. Il ajoute par défaut le titre du site et une courte description du site. Alternativement, vous pouvez ajouter du texte personnalisé pour le titre et la description dans les paramètres du composant.

3 « J'aime »