Icône d'en-tête personnalisée mise à jour : publier des données via l'URL

[littleviolette]

Discourse a récemment déprécié api.decorateWidget, que j’ai utilisé pour insérer des icônes d’en-tête personnalisées et publier le nom d’utilisateur de l’utilisateur actuel via une URL.

Je me demandais comment je peux publier le nom d’utilisateur actuel de l’utilisateur via HTTP avec la nouvelle API headerIcons. Je n’ai trouvé aucune documentation ou exemple sur la façon de le mettre en œuvre. Je n’ai pas non plus trouvé de moyen de le faire via le plugin Custom Header Links.

J’apprécie votre aide ! Ci-dessous mon code actuel utilisant l’API decorateWidget pour publier le nom d’utilisateur :

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

[Arkshine]

Salut,

Je vais vous aider, mais pouvez-vous expliquer ce que vous essayez de faire avant ?

Est-ce pour afficher un menu avec un formulaire à l’intérieur ?

Comme par exemple :

Ou est-ce juste un bouton avec le nom d’utilisateur comme étiquette, et il redirige vers une URL ?

[littleviolette]

Il s’agit de cliquer sur l’icône d’en-tête >> pour publier le nom d’utilisateur de l’utilisateur sur une URL spécifiée.

Aucun formulaire ne s’affiche réellement. Seule l’icône d’en-tête est affichée. L’action de publication est effectuée en coulisses. Désolé pour la confusion. Je vais supprimer « formulaire » du titre de mon message.

[Arkshine]

D’accord, une redirection vers une URL externe contenant le nom d’utilisateur.

Voici un exemple de base sur la façon dont vous pouvez le faire, en utilisant la nouvelle 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 est un nom unique
• iconComponent fait référence à un template Glimmer intégré, comme vous le voyez ici, mais il peut également faire référence à un composant de classe Glimmer que vous créez dans le répertoire components.
• Vous pouvez choisir où placer votre icône en utilisant before ou after suivi du nom unique de l’icône d’en-tête.

N’hésitez pas à ajuster !

Remarque :

• La syntaxe template Glimmer ne fonctionnera pas en utilisant l’interface utilisateur.

  Vous devrez créer un composant de thème avec des fichiers séparés. Pour générer rapidement un TC, vous pouvez utiliser le Discourse CLI et le développer très facilement avec votre éditeur de code. Je le recommande vivement.

  Vous pouvez également utiliser le modèle sur Github : GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes.

  • Pour utiliser un composant Glimmer, l’extension de fichier doit être .gjs.

Faites-moi savoir si vous avez besoin d’aide supplémentaire !

[littleviolette]

Salut @Arkshine ,

Merci beaucoup pour cette explication détaillée. J’ai essayé d’injecter le code dans <head> mais l’icône n’apparaît pas. Qu’ai-je mal fait ?

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

[Arkshine]

@littleviolette Salut, cela ne peut pas être exécuté dans l’interface d’administration ici.

En utilisant le Theme CLI, vous pouvez facilement créer un composant de thème sur votre ordinateur.

Ensuite, vous modifiez le fichier avec un éditeur de texte de votre choix (comme vscode) et ajoutez le code dans l’initialiseur. Vous créez un fichier dans /javascripts/discourse/api-initializers/my-header-icon.gjs et y collez le code. Vous pouvez également modifier les valeurs par défaut dans about.json.

La prochaine étape pour installer le composant sur votre forum de production :

• vous pouvez soit placer le composant sur Github et, dans l’interface d’administration, utiliser le lien du dépôt pour l’installer ;
• soit vous zippez le répertoire sur votre ordinateur, et dans l’interface d’administration, vous l’installez depuis l’appareil.

Essayez et faites-moi savoir si vous rencontrez des problèmes !