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

Dev
4

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.

NVIDIA_Share_rvsjetCtUy

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 !

3 « J'aime »