Fügen Sie Text neben dem Logo im Header hinzu

Ich bin neu bei Discourse, daher entschuldige ich mich, falls dies etwas ist, das leicht erledigt werden kann. Allerdings kann ich nicht finden, wo ich den Text definieren kann, der neben unserem Logo im Header unserer Discourse-Seite erscheinen soll.

Innerhalb des roten Kastens im Header würde ich idealerweise gerne Text hinzufügen, der „Community-Foren" oder Ähnliches lautet:

Wie kann ich dies umsetzen?

Vielen Dank im Voraus für jedes Feedback!

Hey Daniel :wave:

Du kannst so etwas verwenden, um Text neben dem Header-Logo auf deiner Website hinzuzufügen:

<script type="text/discourse-plugin" version="0.8">
api.decorateWidget("home-logo:after", helper => {
  const titleVisible = helper.attrs.minimized;
  const headerText = "Der Text, den du hinzufügen möchtest"; // <--- Ändere diesen Text

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

Du fügst ihn im Header-Bereich deines Themes bzw. deiner Komponente hinzu. Weitere Informationen zum Discourse-Theme-System findest du hier:

3 „Gefällt mir“

Dies verursacht nun ein Fehlbanner, aufgrund von Änderungen an Discourse. Haben Sie Vorschläge, wie dasselbe Ergebnis mit dem neuen Ansatz erzielt werden kann? Danke.

Diese Methode wird nicht mehr funktionieren und Sie müssen die hier im Abschnitt über den home-logo-Plugin-Outlet angegebenen Connectors verwenden, die home-logo:after-Widget-Dekorationen ersetzen:

4 „Gefällt mir“

Wenn ich Zeit habe, das selbst zu tun, werde ich den Code hier einfügen. Alternativ, wenn jemand zuerst Zeit hat, wäre ich sehr dankbar… :slight_smile:

1 „Gefällt mir“

Ich habe das gerade für ein Theme gemacht. Ich verwende den Titel und die Kurzbeschreibung der Website, aber Sie könnten auch Werte aus den Theme-Einstellungen oder lokalisiertem Text einfügen.

Fügen Sie eine Glimmer-Komponente in components/header-logo-title.gjs hinzu

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

Binden Sie sie im Outlet in /api-initializers/my-theme.js ein

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);
});

Der #unless-Helper prüft den minimierten Zustand des Logos und fügt den Text nur hinzu, wenn das vollständige Logo sichtbar wäre. Wenn Sie es immer anzeigen möchten, müssten Sie diese Bedingung entfernen.

4 „Gefällt mir“

Sie können auch api.renderAfterWrapperOutlet("home-logo") (seit v.1.26.0) verwenden. Dies hat den Vorteil, dass Sie den tatsächlichen Outlet-Namen verwenden, ohne das magische __before/__after anzugeben.

4 „Gefällt mir“

Danke @Arkshine. Das ist besser, ich habe den vorherigen Beitrag aktualisiert.

3 „Gefällt mir“

Versuche das jetzt, habe aber einige Schwierigkeiten – wie greife ich auf die „Glimmer-Komponente in components/header-logo-title.gjs“ zu?

Meine Community ist hier: https://community.worldradioleague.com/.

Ich habe den bezahlten Plan – vielleicht habe ich keinen Zugriff auf den Discourse-Kern, um dies zu sehen?

Ich habe dies in eine Komponente verpackt, Sie könnten versuchen, sie zu verwenden: Manuel Kostka / Discourse / Helpers / Header Logo Title · GitLab. Sie fügt standardmäßig den Seitentitel und eine kurze Seitenbeschreibung hinzu. Alternativ können Sie benutzerdefinierten Text für den Titel und die Beschreibung in den Komponenteneinstellungen hinzufügen.

3 „Gefällt mir“