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

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