Próximos cambios en encabezados: preparando temas y plugins

¿Qué es exactamente lo que está a punto de romperse? Quizás haya un componente de tema compatible existente que haga el trabajo.

¿Es solo el banner en la parte superior que enlaza al sitio principal?

1 me gusta

¿Hay un reemplazo para:

api.changeWidgetSetting("header-notifications", "avatarSize", "large");

Esto me da la advertencia de depreciación que lleva aquí:

El widget header-notifications ha sido obsoleto y changeWidgetSetting ya no es una anulación admitida.

5 Me gusta

Estoy en el mismo barco.

Intentando cambiar la URL del logo de la manera correcta, pero lo siguiente ya no es posible:

api.changeWidgetSetting("home-logo", "href", "https://my-other-homepage/");

¿Cuál es la llamada API de reemplazo para esto?

1 me gusta

Estamos trabajando en la creación de una solución limpia para esto, pero aún no está lista. Mantente atento a este tema para ver las actualizaciones.

2 Me gusta

Hola @david: ¿puede estar lista una solución limpia para el viernes 7 de junio? Si no, ¿podrías proporcionar una estimación? Disculpa la urgencia, comenzamos la Beta cerrada el 17 de junio y necesitamos saber si esto se implementará antes de las pruebas o no.

No tengo una fecha exacta, pero es probable que sea en las próximas 1-2 semanas. No estará listo para mañana.

Si necesitas algo que funcione para mañana, te recomiendo usar la API antigua, que cambiará automáticamente tu sitio para usar la implementación de encabezado heredada.

2 Me gusta

@kana.tatsuta la nueva API se ha fusionado.

He añadido una sección en el OP con ejemplos de cómo personalizar la URL del logo.

2 Me gusta

Hemos habilitado el aviso para administradores para nuevas implementaciones en instancias que utilizan complementos o temas incompatibles.

2 Me gusta

No estoy seguro de cómo actualizar mi código. He intentado algunas cosas, pero cada vez las imágenes se muestran con el tema claro en lugar de mi tema oscuro y lo que se ha subido directamente para estas imágenes en el componente. ¿Alguna sugerencia sobre cómo se debería refactorizar esto?

<script type="text/discourse-plugin" version="0.8.25">
  api.reopenWidget("home-logo", {
    logoUrl() {
      return (
        settings.Alternative_logo_url || ""
      );
    },

    mobileLogoUrl() {
      return (
        settings.Alternative_mobile_logo_url || ""
      );
    },

    smallLogoUrl() {
      return (
        settings.Alternative_small_logo_url || ""
      );
    }
  });
</script>

@tradmo,

Intenta usar un conector en el outlet del plugin home-logo-contents. Tu código se traduciría a algo como:

// javascripts/discourse/initializers/customize-logo.gjs

import HomeLogoContents from "discourse/components/header/home-logo-contents";
import { withPluginApi } from "discourse/lib/plugin-api";

export default {
  name: `logo-customizations`,
  initialize(container) {
    withPluginApi("1.29.0", (api) => {
      renderHomeLogo(api);
    });
  },
};

function renderHomeLogo(api) {
  const logoSmallUrl = settings.Alternative_small_logo_url || "";
  const logoUrl = settings.Alternative_logo_url || "";
  const mobileLogoUrl = settings.Alternative_mobile_logo_url || "";

  api.renderInOutlet("home-logo-contents", 
    <template>
      <HomeLogoContents
        @logoSmallUrl={{logoSmallUrl}}
        @logoUrl={{logoUrl}}
        @minimized={{@outletArgs.minimized}}
        @mobileLogoUrl={{mobileLogoUrl}}
        @showMobileLogo={{@outletArgs.showMobileLogo}}
        @title={{@outletArgs.title}}
      />
    </template>
  );
}
3 Me gusta

Para reopenWidget (sidebar-toggle), ¿podrías ayudarme a entender cómo reemplazar el siguiente código? No encontré instrucciones en esta guía.

// /javascripts/discourse/api-initializers/desktop-open-sidebar-always.js
/* botón sidebarToggle eliminado por "reopenWidget", applicationController fuerza showSidebar a true (para desktopView) */

import { withPluginApi } from "discourse/lib/plugin-api";
import { reopenWidget } from "discourse/widgets/widget";

function sidebarToggle(api) {
  const applicationController = api.container.lookup("controller:application");
  api.reopenWidget("sidebar-toggle", {
    html(attrs) {
      if (this.site.desktopView == true && attrs.showSidebar == false) {
        applicationController.set("showSidebar", true);
      }
    },
  });
}

export default {
  name: "desktop-open-sidebar-always",
  initialize() {
    withPluginApi("0.10.1", sidebarToggle);
  },
};

Hola a todos :wave:,

¿Alguien podría ayudarme con los cambios que necesito para esto, por favor?

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

api.decorateWidget('header-icons:before', helper => {
    return helper.h('li', [
        helper.h('a#graduation-cap.icon', {
            href:'https://example.com/',
            title: 'Centro de Aprendizaje'
        }, iconNode('graduation-cap')),
    ]);
});

</script>

Creo que necesito convertirlo para usar api.headerIcons.add(“foo”, FooIcon, { before: “search” }) pero no estoy 100% seguro de cómo hacerlo :frowning:

Cualquier ayuda aquí sería muy apreciada :pray:

Hola @angelinekwan,

Aquí está nuestra recomendación:

  1. Elimina tu archivo existente javascripts/discourse/api-initializers/desktop-open-sidebar-always.js

  2. Crea un nuevo archivo: javascripts/discourse/pre-initializers/desktop-open-sidebar-always.js y agrega el siguiente código:

import { withPluginApi } from "discourse/lib/plugin-api";

const PLUGIN_NAME = "desktop-open-sidebar-always";

export default {
  name: PLUGIN_NAME,

  initialize() {
    withPluginApi("1.34.0", (api) => {
      api.modifyClass("controller:application", {
        pluginId: PLUGIN_NAME,

        calculateShowSidebar() {
          if (this.site.desktopView && this.canDisplaySidebar) {
            return true;
          }

          return this._super(...arguments);
        },
      });
    });
  },
};

Agrega lo siguiente a common/common.scss

html.desktop-view {
  .header-sidebar-toggle {
    display: none;
  }
}
4 Me gusta

Hola @Danny_Dainton,

Echa un vistazo al componente de tema Custom Header Links (icons). Creo que hace lo que necesitas.

Si no puedes usar el componente de tema, api.headerIcons.add hará el truco. :smiley:

  • Crea un nuevo archivo inicializador. Debe tener la extensión .gjs
  • El siguiente código debería hacer lo que quieres:
// javascripts/discourse/initializers/custom-header-icons.gjs

import { apiInitializer } from "discourse/lib/api";
import dIcon from "discourse-common/helpers/d-icon";

export default apiInitializer("1.34.0", (api) => {
  api.headerIcons.add(
    "custom-header-home",
    `
      <li>
        <a id="graduation-cap" class="icon" href="https://example.com/" title="Learning Center">
          {{dIcon "graduation-cap"}}
        </a>
      </li>
    `,
    { before: "search" }
  );
});
4 Me gusta

¡Gracias, señor!

Ah, ahora tiene un poco más de sentido para mí después de verlo delante de mí.

¡Agradezco mucho su respuesta! :heart:

1 me gusta

Agradecería ayuda para migrar este fragmento de código que no logro migrar:

api.reopenWidget("user-dropdown", {
  html(attrs) {
    return h(
      "a.icon",
      {title: I18n.t("custom.string.title")},
      [iconNode("bell"), this.attach("header-notifications", attrs)],
    );
  },
});

El objetivo de este cambio originalmente es mantener el menú user-dropdown tal como está, pero reemplazar la imagen de perfil con un ícono (campana).

La forma más sencilla de conseguir el efecto que deseas es añadir el icono utilizando el PluginOutlet existente y simplemente ocultar la imagen del avatar del usuario mediante CSS.

En un archivo .gjs:

// javascripts/discourse/initializers/user-dropdown-bell-icon.gjs

import { withPluginApi } from "discourse/lib/plugin-api";
import dIcon from "discourse-common/helpers/d-icon";

export default {
  name: "user-dropdown-bell-icon",
  initialize(container) {
    withPluginApi("1.34.0", (api) => {
      api.renderInOutlet("user-dropdown-notifications__before", 
        {{dIcon "bell"}}
      );
    });
  },
};

Añade el siguiente CSS:

.header-dropdown-toggle.user-menu-panel img {
  display: none;
}

Obtienes:

2 Me gusta

Se eliminó el código antiguo del widget.

3 Me gusta

¿Alguien podría ayudarme a actualizar un componente de tema que agrega texto junto al “home-logo”? Gracias de antemano.