Adicionar texto no cabeçalho ao lado do logotipo

Sou novo no Discourse, então peço desculpas se isso é algo facilmente feito, mas não consigo encontrar onde posso definir o texto que desejo que apareça ao lado do nosso logotipo no cabeçalho da nossa página do Discourse.

Dentro da caixa vermelha no cabeçalho é onde idealmente gostaria de adicionar um texto dizendo “Fóruns da Comunidade” ou algo do tipo:

Como posso fazer isso?

Obrigado antecipadamente por qualquer e todo feedback!

Olá Daniel :wave:

Você pode usar algo assim para adicionar texto ao lado do logotipo do cabeçalho no seu site

<script type="text/discourse-plugin" version="0.8">
api.decorateWidget("home-logo:after", helper => {
  const titleVisible = helper.attrs.minimized;
  const headerText = "Texto que você deseja adicionar"; // <--- altere este texto

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

Você deve adicioná-lo na seção de cabeçalho do seu tema ou componente. Você pode ler mais sobre o sistema de temas do Discourse aqui

Isso agora está causando a exibição de um banner de erro, devido a alterações no Discourse. Você tem alguma sugestão para alcançar o mesmo resultado com a nova abordagem? Obrigado.

Sim, esse método não funcionará mais e você precisará usar os conectores especificados aqui na seção sobre o home-logo plugin outlet, substituindo as decorações de widget home-logo:after:

Se eu tiver tempo para fazer isso sozinho, colarei o código aqui. Alternativamente, se alguém tiver tempo antes, ficarei muito grato… :slight_smile:

Eu acabei de fazer isso para um tema. Estou usando o título e a descrição curta do site, mas você também pode inserir valores das configurações do tema ou texto localizado.

Adicione um componente glimmer em 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>
}

Anexe-o ao outlet em /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);
});

O helper #unless verifica o estado minimizado do logo e adiciona o texto apenas quando o logo completo estaria visível. Se você quiser sempre mostrá-lo, precisará remover essa condição.

Você também pode usar api.renderAfterWrapperOutlet("home-logo") (a partir da v.1.26.0). Ele tem a vantagem de usar o nome real do outlet sem fornecer o __before/__after mágico.

Obrigado @Arkshine. Ficou mais legal, atualizei a postagem anterior.

Estou tentando fazer isso agora, mas estou tendo alguns problemas - como acesso o "glimmer component em components/header-logo-title.gjs"?

Minha comunidade está aqui: https://community.worldradioleague.com/.

Estou no plano pago - talvez eu não tenha acesso ao núcleo do Discourse para ver isso?

Eu envolvi isso em um componente, você pode tentar usá-lo: Manuel Kostka / Discourse / Helpers / Header Logo Title · GitLab. Ele adiciona o título do site e uma breve descrição do site por padrão. Alternativamente, você pode adicionar texto personalizado para o título e a descrição nas configurações do componente.