Prochaines modifications des en-têtes - préparation des thèmes et plugins

[pfaffman (Jay Pfaffman)]

Qu’est-ce qui est sur le point d’être cassé, de toute façon ? Peut-être qu’il existe un composant de thème pris en charge existant qui fera l’affaire.

S’agit-il simplement de la bannière en haut qui renvoie au site principal ?

[awesomerobot (Kris)]

Existe-t-il un remplacement pour :

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

Cela me donne l’avertissement de dépréciation qui mène ici :

Le widget header-notifications a été déprécié et changeWidgetSetting n'est plus une surcharge prise en charge.

[gormus (Osman Görmüş)]

Je suis dans la même situation.

J’essaie de changer l’URL du logo de la bonne manière, mais ce qui suit n’est plus réalisable :

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

Quel est l’appel API de remplacement pour cela ?

[david (David Taylor)]

Nous travaillons à la création d’une solution propre pour cela, mais elle n’est pas encore tout à fait prête. Gardez un œil sur ce sujet pour les mises à jour.

[kana.tatsuta]

Salut @david - une solution propre peut-elle être prête d’ici le vendredi 7 juin ? Sinon, pourriez-vous fournir une estimation ?
Désolé pour la précipitation, nous lançons une bêta fermée le 17 juin et devons savoir si cela sera implémenté avant les tests ou non.

[david (David Taylor)]

Je n’ai pas de date exacte, mais ce sera probablement dans les 1 à 2 prochaines semaines. Ce ne sera pas prêt pour demain.

Si vous avez besoin de quelque chose qui fonctionne pour demain, je vous recommande d’utiliser l’ancienne API, qui basculera automatiquement votre site pour utiliser l’implémentation d’en-tête héritée.

[saquetim (Sérgio Saquetim)]

@kana.tatsuta la nouvelle API est fusionnée.

J’ai ajouté une section dans le message d’origine avec des exemples sur la façon de personnaliser l’URL du logo.

[saquetim (Sérgio Saquetim)]

Nous avons activé la notification d’administration pour les nouveaux déploiements sur les instances utilisant des plugins ou des thèmes incompatibles.

[tradmo (Adam Moore)]

Je ne suis pas sûr de la façon de mettre à jour mon code. J’ai essayé plusieurs choses, mais à chaque fois les images s’affichent dans le thème clair au lieu de mon thème sombre et de ce qui a été directement téléchargé pour ces images dans le composant. Des suggestions sur la façon de refactoriser cela ?

<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>

[saquetim (Sérgio Saquetim)]

@tradmo,

Essayez d’utiliser un connecteur dans la sortie de plugin home-logo-contents. Votre code serait traduit en quelque chose comme :

// 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>`);
}

[angelinekwan]

Pour reopenWidget (sidebar-toggle), pourriez-vous m’aider à comprendre comment remplacer le code suivant ? Je n’ai pas trouvé d’instructions dans ce guide.

// /javascripts/discourse/api-initializers/desktop-open-sidebar-always.js
/* bouton sidebarToggle supprimé par \"reopenWidget\", applicationController force showSidebar à true (pour 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);
  },
};

[Danny_Dainton]

Salut tout le monde ,

Quelqu’un pourrait-il m’aider avec les changements dont j’ai besoin pour cela, s’il vous plaît ?

<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: 'Learning Center'
        }, iconNode('graduation-cap')),
    ]);
});

</script>

Je pense que je dois le convertir pour utiliser api.headerIcons.add(“foo”, FooIcon, { before: “search” }) mais je ne suis pas sûr à 100% comment faire

Toute aide ici serait très appréciée

[saquetim (Sérgio Saquetim)]

@angelinekwan

Pour reopenWidget (sidebar-toggle), pourriez-vous m’aider à comprendre comment remplacer le code suivant ? Je n’ai pas trouvé d’instructions dans ce guide.

// /javascripts/discourse/api-initializers/desktop-open-sidebar-always.js
/* sidebarToggle button removed by "reopenWidget", applicationController forces showSidebar to true (for 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);
  },

Salut @angelinekwan,

Voici notre recommandation :

1. Supprimez votre fichier existant javascripts/discourse/api-initializers/desktop-open-sidebar-always.js

2. Créez un nouveau fichier : javascripts/discourse/pre-initializers/desktop-open-sidebar-always.js et ajoutez le code suivant :

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);
        },
      });
    });
  },
};

Ajoutez ceci à common/common.scss

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

[saquetim (Sérgio Saquetim)]

@Danny_Dainton

Quelqu’un pourrait-il m’aider avec les changements dont j’ai besoin pour cela, s’il vous plaît ?

<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: 'Learning Center'
        }, iconNode('graduation-cap')),
    ]);
});

</script>

Je pense que je dois le convertir pour utiliser api.headerIcons.add(“foo”, FooIcon, { before: “search” }) mais je ne suis pas sûr à 100% comment faire

Toute aide ici serait très appréciée

Salut @Danny_Dainton,

Jetez un œil au composant de thème Custom Header Links (icons). Je pense qu’il fait ce dont vous avez besoin.

Si vous ne pouvez pas utiliser le composant de thème, api.headerIcons.add fera l’affaire.

• Créez un nouveau fichier d’initialisation. Il doit avoir l’extension .gjs
• Le code suivant devrait faire ce que vous voulez :

// 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" }
  );
});

[Danny_Dainton]

Merci, Monsieur !

Ah, cela a un peu plus de sens pour moi maintenant que je le vois devant moi.

J’apprécie beaucoup votre réponse !!

[av203 (Avi N)]

J’apprécierais votre aide pour migrer ce morceau de code que je n’arrive pas à migrer :

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

L’objectif de ce changement est à l’origine de conserver le menu déroulant utilisateur tel quel, mais de remplacer l’image de profil par une icône (une cloche).

[saquetim (Sérgio Saquetim)]

@av203

L’objectif de ce changement est à l’origine de conserver le menu déroulant utilisateur tel quel, mais de remplacer l’image de profil par une icône (cloche)

La façon la plus simple d’obtenir l’effet souhaité est d’ajouter l’icône en utilisant le PluginOutlet existant et de simplement masquer l’image de l’avatar utilisateur à l’aide de CSS.

Dans un fichier .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", <template>
        {{dIcon "bell"}}
      </template>);
    });
  },
};

Ajoutez le CSS suivant :

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

Vous obtenez :

[saquetim (Sérgio Saquetim)]

DEV: Remove the old header widgets code

L’ancien code du widget a été supprimé.

[Jonathan5]

Quelqu’un pourrait-il m’aider à mettre à jour un composant de thème qui ajoute du texte à côté du « home-logo » ? Merci d’avance.

Add Text In Header Beside Logo

Hey Daniel You can use something like this to add text next to the header logo on your site <script type="text/discourse-plugin" version="0.8"> api.decorateWidget("home-logo:after", helper => { const titleVisible = helper.attrs.minimized; const headerText = "Text you want to add"; // <--- change this text if (!titleVisible) { return api.h("span.header-text", headerText); } }); </script> You’d add it in the header section of your theme / component. You can read more about t…