Fügen Sie Text neben dem Logo im Header hinzu

Entwickler
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 „Gefällt mir“
3

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.

4

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

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

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

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

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

3 „Gefällt mir“
10

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?

11

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“