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

Dev
1

I’m new to discourse, so I apologize if this is something that is easily done, however, I can’t seem to find where I can define the text that I want to appear beside our logo in the header of our discourse page.

Within the red box in the header is where I’d ideally like to add text saying ‘Community Forums’ or something of the sort:

AddText-Discourse
AddText-Discourse1132×325 37.3 KB

How can I go about getting this done?

Thanks in advance for any and all feedback!

2

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

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.

4

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

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

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

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

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

3 « J'aime »
10

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 ?

11

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 »