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

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