Agregar texto en el encabezado junto al logotipo

Desarrollador
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 Me gusta
3

Esto ahora está provocando que se muestre un banner de error, debido a cambios en Discourse. ¿Tienes alguna sugerencia para lograr el mismo resultado con el nuevo enfoque? Gracias.

4

Ese método ya no funcionará y deberás usar los conectores especificados aquí en la sección sobre el outlet del plugin home-logo que reemplaza las decoraciones de widgets home-logo:after:

4 Me gusta
5

Si tengo tiempo para hacerlo yo mismo, pegaré el código aquí. Alternativamente, si alguien tiene tiempo primero, estaría muy agradecido… :slight_smile:

1 me gusta
7

Lo acabo de hacer para un tema. Estoy usando el título del sitio y la descripción corta, pero también podrías insertar valores de la configuración del tema o texto localizado.

Agrega un componente de Glimmer en 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>
}

Adjúntalo al outlet en /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);
});

El helper #unless comprueba el estado minimizado del logo y solo agrega el texto cuando el logo completo sería visible. Si siempre quieres mostrarlo, necesitarías eliminar esa condición.

4 Me gusta
8

También puedes usar api.renderAfterWrapperOutlet("home-logo") (desde la v.1.26.0). Tiene la ventaja de que usas el nombre real del outlet sin proporcionar el __before/__after mágico.

4 Me gusta
9

Gracias @Arkshine. Eso es mejor, he actualizado la publicación anterior.

3 Me gusta
10

Estoy intentando hacer esto ahora pero tengo algunos problemas. ¿Cómo accedo al “componente glimmer en components/header-logo-title.gjs”?

Mi comunidad está aquí: https://community.worldradioleague.com/.

Estoy en el plan de pago. ¿Quizás no tengo acceso al núcleo de Discourse para ver esto?

11

Lo había envuelto en un componente, podrías intentar usarlo: Manuel Kostka / Discourse / Helpers / Header Logo Title · GitLab. Añade el título del sitio y una breve descripción del sitio por defecto. Alternativamente, puedes añadir texto personalizado para el título y la descripción en la configuración del componente.

3 Me gusta