Agregar texto en el encabezado junto al logotipo

Soy nuevo en Discourse, así que me disculpo si esto es algo que se hace fácilmente, sin embargo, no logro encontrar dónde puedo definir el texto que quiero que aparezca junto a nuestro logotipo en la cabecera de nuestra página de Discourse.

Dentro del cuadro rojo en la cabecera es donde idealmente me gustaría agregar texto que diga ‘Foros de la Comunidad’ o algo similar:

¿Cómo puedo lograr esto?

¡Gracias de antemano por cualquier y todo comentario!

¡Hola Daniel :wave:

Puedes usar algo como esto para agregar texto junto al logotipo del encabezado en tu sitio

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

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

Lo agregarías en la sección de encabezado de tu tema o componente. Puedes leer más sobre el sistema de temas de Discourse aquí

3 Me gusta

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.

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

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

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

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

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

3 Me gusta

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?

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