Aktualisiertes benutzerdefiniertes Kopfzeilen-Symbol: Post-Daten per URL

[littleviolette]

Discourse hat kürzlich api.decorateWidget als veraltet markiert, das ich verwendet habe, um benutzerdefinierte Header-Icons einzufügen und den Benutzernamen des aktuellen Benutzers über eine URL zu posten.

Ich habe mich gefragt, wie ich den aktuellen Benutzernamen des Benutzers mit der neuen headerIcons-API per HTTP posten kann. Ich konnte keine Dokumentation oder Beispiele dafür finden. Ich konnte auch keine Möglichkeit finden, dies über das Customer Header Link-Plugin zu tun.

Ich schätze Ihre Hilfe! Unten ist mein aktueller Code, der die decorateWidget-API verwendet, um den Benutzernamen zu posten:

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

Hallo,

Ich helfe Ihnen gerne, aber können Sie mir zuerst erklären, was Sie versuchen zu tun?

Möchten Sie ein Menü mit einem Formular darin anzeigen?

So zum Beispiel:

Oder ist es nur ein Button mit dem Benutzernamen als Beschriftung, der zu einer URL weiterleitet?

[littleviolette]

Es ist, auf das Kopfzeilensymbol zu klicken, um den Benutzernamen des Benutzers an eine bestimmte URL zu senden.

Es wird kein Formular angezeigt. Nur das Kopfzeilensymbol wird angezeigt. Die Post-Aktion wird im Hintergrund ausgeführt. Entschuldigen Sie die Verwirrung. Ich werde “Formular” aus dem Titel meines Beitrags entfernen.

[Arkshine]

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.

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!

[littleviolette]

Hallo @Arkshine ,

Vielen Dank für die detaillierte Ausarbeitung. Ich habe versucht, den Code in <head> einzufügen, aber das Symbol wird nicht angezeigt. Was habe ich falsch gemacht?

<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 Hallo, es kann hier nicht in der Admin-Oberfläche ausgeführt werden.

Mit dem Theme CLI können Sie ganz einfach eine Theme-Komponente auf Ihrem Computer erstellen.

Anschließend bearbeiten Sie die Datei mit einem Texteditor Ihrer Wahl (wie VS Code) und fügen den Code in den Initializer ein. Sie erstellen eine Datei unter /javascripts/discourse/api-initializers/my-header-icon.gjs und fügen den Code dort ein. Sie können auch die Standardwerte in about.json ändern.

Der nächste Schritt zur Installation der Komponente auf Ihrem Produktionsforum:

• Sie können die Komponente auf Github legen und in der Admin-Oberfläche den Repository-Link zur Installation verwenden.
• Oder Sie packen das Verzeichnis auf Ihrem Computer in eine ZIP-Datei und installieren es in der Admin-Oberfläche vom Gerät aus.

Probieren Sie es aus und lassen Sie mich wissen, wenn Sie Probleme haben!