Aggiungi testo nell'intestazione accanto al logo

Sono nuovo di Discourse, quindi mi scuso se si tratta di qualcosa di semplice, ma non riesco a trovare dove posso definire il testo che deve apparire accanto al nostro logo nell’intestazione della nostra pagina Discourse.

All’interno del riquadro rosso nell’intestazione è dove idealmente vorrei aggiungere un testo che dica “Forum della Comunità” o qualcosa di simile:

Come posso procedere per farlo?

Grazie in anticipo per qualsiasi 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