Icona intestazione personalizzata aggiornata: invia dati tramite URL

Sviluppatore
1

Discourse ha recentemente deprecato api.decorateWidget, che ho usato per inserire icone personalizzate nell’intestazione e pubblicare il nome utente dell’utente corrente tramite un URL.

Mi stavo chiedendo come posso pubblicare il nome utente corrente dell’utente tramite HTTP con la nuova API headerIcons. Non sono riuscito a trovare alcuna documentazione o esempio su come implementarlo. Non sono riuscito a trovare un modo per farlo nemmeno tramite il plugin Custom Header Links.

Apprezzo il tuo aiuto! Di seguito è riportato il mio codice attuale che utilizza l’API decorateWidget per pubblicare il nome utente:

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

Ehi,

Ti aiuterò, ma puoi spiegarmi cosa stai cercando di fare prima?

È per visualizzare un menu con un modulo all’interno?

Come ad esempio:

Questa immagine sembra essere uno screenshot di una pagina web, che mostra una funzione di chat chiamata "Chat Sidebar Preferences". (Sottotitolato dall'IA)
Questa immagine sembra essere uno screenshot di una pagina web, che mostra una funzione di chat chiamata "Chat Sidebar Preferences". (Sottotitolato dall'IA)414×260 9.01 KB

O è solo un pulsante con il nome utente come etichetta, e reindirizza a un URL?

3

Si tratta di fare clic sull’icona dell’intestazione >> per pubblicare il nome utente dell’utente su un URL specificato.

Non viene visualizzato alcun modulo. Viene visualizzata solo l’icona dell’intestazione. L’azione di pubblicazione viene eseguita dietro le quinte. Mi scuso per la confusione. Rimuoverò “modulo” dal titolo del mio post.

4

Ok, una redirezione a un URL esterno che contiene il nome utente.

Ecco un esempio di base su come puoi fare, utilizzando la nuova 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 è un nome univoco
  • iconComponent si riferisce a un glimmer inline <template> come vedi qui, ma può anche riferirsi a un componente classe glimmer che crei nella directory components.
  • Puoi scegliere dove posizionare la tua icona usando before o after seguito dal nome univoco dell’icona dell’header.

NVIDIA_Share_rvsjetCtUy

Sentiti libero di adattare!

Nota:

  • La sintassi del template glimmer <template> non funzionerà utilizzando l’interfaccia utente.

    Dovrai creare un componente tema con file separati. Per generare rapidamente un TC, puoi usare Discourse CLI e sviluppare facilmente con esso con il tuo editor di codice. Lo consiglio vivamente.

    Puoi anche usare il template su Github: GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes.

    • Per utilizzare un componente glimmer, l’estensione del file deve essere .gjs.

Fammi sapere se hai bisogno di ulteriore aiuto!

3 Mi Piace
5

Ciao @Arkshine ,

Grazie mille per la spiegazione dettagliata. Ho provato a iniettare il codice in <head> ma non vedo l’icona apparire. Cosa ho sbagliato?

<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>
1 Mi Piace
6

@littleviolette Ciao, non può essere eseguito nell’interfaccia di amministrazione qui.

Utilizzando la Theme CLI, puoi facilmente creare un componente tema sul tuo computer.

Quindi, modifichi il file con un editor di testo a tua scelta (come vscode) e aggiungi il codice nell’inizializzatore. Crei un file in /javascripts/discourse/api-initializers/my-header-icon.gjs e incolli il codice al suo interno. Puoi anche modificare i valori predefiniti in about.json.

image

Il passo successivo per installare il componente sul tuo forum di produzione:

  • puoi mettere il componente su Github e nell’interfaccia di amministrazione, usare il link del repository per installarlo;
  • oppure zippare la directory sul tuo computer e, nell’interfaccia di amministrazione, installarla dal dispositivo.

Prova e fammi sapere se riscontri problemi!

3 Mi Piace