Icono de encabezado personalizado actualizado: enviar datos por URL

Desarrollador
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