Icono de encabezado personalizado actualizado: enviar datos por URL

Desarrollador
1

Discourse ha obsoleto recientemente api.decorateWidget, que utilicé para insertar iconos personalizados en la cabecera y publicar el nombre de usuario del usuario actual a través de una URL.

Me preguntaba cómo puedo publicar el nombre de usuario actual del usuario a través de HTTP con la nueva API headerIcons. No pude encontrar ninguna documentación o ejemplo sobre cómo implementarlo. Tampoco pude encontrar una forma de hacerlo a través del plugin Custom Header Links.

¡Agradezco tu ayuda! A continuación, se muestra mi código actual que utiliza la API decorateWidget para publicar el nombre de usuario:

<script type="text/discourse-plugin" version="0.12">
    const { iconNode } = require("discourse-common/lib/icon-library");

    let icon = iconNode('calculator');

    var currentUser = api.getCurrentUser();
    var username = currentUser.username;

    api.decorateWidget('header-icons:before', helper => {
        const showExtraInfo = helper.attrs.minimized;
            if(!showExtraInfo) {
                return helper.h('li#calculator', [
                    helper.h('form#header-calculator.icon', {
                        action:'https://example.com/',
                        method:'post'
                    }, [
                        helper.h('button', {name:'u', value: username},[
                            iconNode('calculator'),
                        ])

                    ])
                ]);

            }
    });


</script>
2

Hola,

Te ayudaré, pero ¿puedes explicar qué estás intentando hacer antes?

¿Es para mostrar un menú con un formulario dentro?

Como por ejemplo:

Esta imagen parece ser una captura de pantalla de una página web, que muestra una función de chat llamada "Preferencias de la barra lateral de chat". (Subtitulado por IA)
Esta imagen parece ser una captura de pantalla de una página web, que muestra una función de chat llamada "Preferencias de la barra lateral de chat". (Subtitulado por IA)414×260 9.01 KB

¿O es solo un botón con el nombre de usuario como etiqueta, y redirige a alguna URL?

3

Es para hacer clic en el icono del encabezado >> publicar el nombre de usuario del usuario en una URL específica.

En realidad, no se muestra ningún formulario. Solo se muestra el icono del encabezado. La acción de publicación se realiza en segundo plano. Disculpas por la confusión. Permíteme eliminar “formulario” del título de mi publicación.

4

De acuerdo, una redirección a una URL externa que contiene el nombre de usuario.

Aquí tienes un ejemplo básico de cómo puedes hacerlo, utilizando la nueva API:

import { apiInitializer } from "discourse/lib/api";
import DButton from "discourse/components/d-button";

export default apiInitializer("1.8.0", (api) => {
  const currentUser = api.getCurrentUser();

  if (!currentUser) {
    return;
  }

  const url =
    "https://example.com/?u=" + encodeURIComponent(currentUser.username);

  const iconComponent = `<template>
    <li class="calculator">
      <DButton
        @href={{url}}
        @icon="calculator"
        class="icon btn-flat"
        title="Calculator"
        target="_blank"
      />
    </li>
  </template>`;

  api.headerIcons.add("calculator", iconComponent, { before: "search" });
});
  • calculator es un nombre único
  • iconComponent se refiere a una plantilla inline glimmer como ves aquí, pero también puede referirse a un componente de clase glimmer que crees en el directorio components.
  • Puedes elegir dónde colocar tu icono usando before o after seguido del nombre único del icono de la cabecera.

NVIDIA_Share_rvsjetCtUy

¡Siéntete libre de ajustar!

Nota:

  • La sintaxis de inline glimmer template no funcionará usando la UI.

    Necesitarás crear un componente de tema con archivos separados. Para generar un TC rápidamente, puedes usar Discourse CLI y desarrollarlo muy fácilmente con tu editor de código. Lo recomiendo encarecidamente.

    También puedes usar la plantilla en Github: GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes.

    • Para usar un componente glimmer, la extensión del archivo debe ser .gjs.

¡Avísame si necesitas más ayuda!

3 Me gusta
5

Hola @Arkshine,

Muchas gracias por la detallada explicación. Intenté inyectar el código en <head> pero no veo que aparezca el icono. ¿Qué hice mal?

<script type="text/discourse-plugin">
    import { apiInitializer } from "discourse/lib/api";
    import DButton from "discourse/components/d-button";
    
    export default apiInitializer("1.8.0", (api) => {
      const currentUser = api.getCurrentUser();
    
      if (!currentUser) {
        return;
      }
    
      const url =
        "https://example.com/?u=" + encodeURIComponent(currentUser.username);
      console.log("url: " + url)
      const iconComponent = <template>
        <li class="calculator">
          <DButton
            @href={{url}}
            @icon="calculator"
            class="icon btn-flat"
            title="Calculator"
            target="_blank"
          />
        </li>
      </template>;
    
      api.headerIcons.add("calculator", iconComponent, { before: "search" });
    });    
</script>
1 me gusta
6

@littleviolette Hola, no se puede ejecutar en la Interfaz de Administración aquí.

Usando la CLI de Temas, puedes crear fácilmente un componente de tema en tu computadora.

Luego, editas el archivo con un editor de texto de tu elección (como vscode) y agregas el código en el inicializador. Creas un archivo en /javascripts/discourse/api-initializers/my-header-icon.gjs y pegas el código en él. También puedes cambiar los valores predeterminados en about.json.

image

El siguiente paso para instalar el componente en tu foro de producción:

  • puedes poner el componente en Github y, en la Interfaz de Administración, usar el enlace del repositorio para instalarlo;
  • o comprimes el directorio en tu computadora y, en la Interfaz de Administración, lo instalas desde el dispositivo.

¡Inténtalo y házmelo saber si tienes algún problema!

3 Me gusta