Aggiungi testo nell'intestazione accanto al logo

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:

How can I go about getting this done?

Thanks in advance for any and all feedback!

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 Mi Piace

Ora questo sta causando la visualizzazione di un banner di errore, a causa delle modifiche a Discourse. Hai qualche suggerimento per ottenere lo stesso risultato con il nuovo approccio? Grazie.

Quel metodo non funzionerà più ed è necessario utilizzare i connettori specificati qui nella sezione sull’uscita del plugin home-logo che sostituisce le decorazioni del widget home-logo:after:

4 Mi Piace

Se avrò tempo di farlo da solo, incollerò il codice qui. In alternativa, se qualcuno avrà tempo prima, gli sarò molto grato… :slight_smile:

1 Mi Piace

L’ho appena fatto per un tema. Sto usando il titolo del sito e una breve descrizione, ma potresti anche inserire valori dalle impostazioni del tema o testo localizzato.

Aggiungi un componente glimmer in 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>
}

Allegalo all’outlet in /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 controlla lo stato minimizzato del logo e aggiunge il testo solo quando il logo completo sarebbe visibile. Se vuoi mostrarlo sempre, dovresti rimuovere quella condizione.

4 Mi Piace

Puoi anche usare api.renderAfterWrapperOutlet("home-logo") (dalla v.1.26.0). Ha il vantaggio di usare il nome effettivo dell’outlet senza fornire il magic __before/__after.

4 Mi Piace

Grazie @Arkshine. È più carino, ho aggiornato il post precedente.

3 Mi Piace

Sto provando a farlo ora ma ho qualche problema: come accedo al "componente glimmer in components/header-logo-title.gjs"?

La mia community è qui: https://community.worldradioleague.com/.

Sono nel piano a pagamento: forse non ho accesso al core di Discourse per vederlo?

L’avevo inserito in un componente, potresti provare a usarlo: Manuel Kostka / Discourse / Helpers / Header Logo Title · GitLab. Aggiunge per impostazione predefinita il titolo del sito e una breve descrizione del sito. In alternativa, puoi aggiungere testo personalizzato per il titolo e la descrizione nelle impostazioni del componente.

3 Mi Piace