Adicionar texto no cabeçalho ao lado do logotipo

Dev
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 curtidas
3

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.

4

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:

4 curtidas
5

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:

1 curtida
7

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.

4 curtidas
8

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.

4 curtidas
9

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

3 curtidas
10

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?

11

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.

3 curtidas