Enlace a un sitio externo desde el logotipo principal de Discourse

Desarrollador
1

:information_source: Discourse ahora ofrece un componente de tema official para admitir este caso de uso:

Contenido original

No estoy seguro de que tener el logotipo principal de Discourse enlazando a un sitio externo sea una buena idea para la mayoría de los sitios, pero hay excepciones en las que tiene sentido llevar a los usuarios a un sitio web externo al hacer clic en el logotipo principal de Discourse. Si quieres hacer eso, aquí te explicamos cómo.

Crear un nuevo componente de tema

:warning: nota, esta sección de la guía se extraerá pronto a un tema dedicado.

Haz clic en el enlace “Componentes” en la barra lateral de tu página Administrar / Personalizar / Temas. Luego, desde la parte inferior de la barra lateral, haz clic en el botón “Instalar”:

image
image1227×685 65.1 KB

En la ventana modal que se abre, haz clic en el enlace “Crear nuevo”:

image
image840×1019 114 KB

Dale un nombre a tu componente de tema y asegúrate de que esté seleccionado el tipo “Componente”. Luego haz clic en el botón “Crear”:

image
image862×394 28.6 KB

A continuación, se te llevará a la página principal del componente de tema.

Añadir el código al componente de tema

El código para anular la URL predeterminada del logotipo principal debe añadirse a la sección HEAD de tu componente de tema. Para acceder al editor del componente, haz clic en el botón “Editar CSS/HTML”:

image
image1201×804 72.6 KB

En el editor que se abre, haz clic en el enlace “Head”:

image
image1196×513 33.5 KB

Dependiendo de varias condiciones, añade los siguientes fragmentos de código a la sección HEAD del editor para modificar la URL a la que apunta el logotipo de inicio. Ten en cuenta que necesitas reemplazar https://example.com en el código con la URL completa de la página de inicio de tu sitio externo:

  • para cambiar el enlace a una URL estática:
<script type="text/discourse-plugin" version="1.3.0">
    api.registerValueTransformer("home-logo-href", () => "https://example.com")
</script>
  • para devolver una URL dinámica basada en el usuario actual:
<script type="text/discourse-plugin" version="1.3.0">
    api.registerValueTransformer("home-logo-href", () => {
      const currentUser = api.getCurrentUser();
      return `https://example.com/${currentUser.username}`;
    })
</script>
  • para devolver una URL basada en una configuración del componente de tema:
<script type="text/discourse-plugin" version="1.3.0">
    api.registerValueTransformer("home-logo-href", () => {
      return settings.example_logo_url_setting;
    })
</script>

Haz clic en el botón “Guardar” para guardar tus cambios. Vuelve a la página principal del componente de tema después de hacerlo, luego haz clic en el enlace “Añadir a todos los temas” para añadir el nuevo componente a todos los temas de tu sitio:

image
image1192×530 53.6 KB

11 Me gusta
3

:+1: ¡muchas gracias por compartir!

5

image
image1816×312 30 KB

Lo agregué en la etiqueta del encabezado pero no tuvo efecto.

6

Para mí funciona perfectamente.
¿Hiciste una “actualización forzada” de tu sitio con Ctrl + F5?

7

image
image359×153 17.5 KB

Usé command+R e incluso activé el modo incógnito, pero todavía no funcionó.

1 me gusta
8

¡Gracias por compartir este tutorial! Necesito cambiar el logotipo principal de una comunidad y funciona perfectamente usando el fragmento de código.

Sin embargo, me di cuenta de que también cambiará el enlace del pequeño logotipo que reemplaza al logotipo completo cuando se muestra el título de un tema en la cabecera. Por ejemplo, el icono aquí en meta:

image

Esto parece poco intuitivo. ¿Es posible añadir un argumento adicional a la función para que no afecte al small-logo?

9

Debido a Upcoming Header Changes - Preparing Themes and Plugins, creo que esto necesita ser cambiado a

\u003cscript type="text/discourse-plugin" version="1.34.0"\u003e
    api.registerValueTransformer("home-logo-href", () =\u003e "\u003cfull_url_of_your_website_homepage\u003e");
\u003c/script\u003e
2 Me gusta