Aktualisiertes benutzerdefiniertes Kopfzeilen-Symbol: Post-Daten per URL

Entwickler
4

Okay, also eine Weiterleitung zu einer externen URL, die den Benutzernamen enthält.

Hier ist ein einfaches Beispiel, wie Sie das mit der neuen API tun können:

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 ist ein eindeutiger Name
  • iconComponent bezieht sich auf ein Inline-Glimmer-<template> wie hier gezeigt, kann aber auch auf eine Glimmer-Klassenkomponente verweisen, die Sie im Verzeichnis components erstellen.
  • Sie können wählen, wo Sie Ihr Symbol platzieren möchten, indem Sie before oder after gefolgt vom eindeutigen Namen des Header-Symbols verwenden.

NVIDIA_Share_rvsjetCtUy

Passen Sie es gerne an!

Hinweis:

  • Die Glimmer-Syntax <template> funktioniert nicht über die Benutzeroberfläche.

Sie müssen eine Theme-Komponente mit separaten Dateien erstellen. Um schnell eine TC zu generieren, können Sie Discourse CLI verwenden und mit Ihrem Code-Editor ganz einfach damit entwickeln. Ich empfehle es sehr.

Sie können auch die Vorlage auf Github verwenden: GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes.

  • Um eine Glimmer-Komponente zu verwenden, muss die Dateierweiterung .gjs lauten.

Lassen Sie mich wissen, wenn Sie weitere Hilfe benötigen!

3 „Gefällt mir“