Icona intestazione personalizzata aggiornata: invia dati tramite URL

Sviluppatore
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