Bevorstehende Header-Änderungen - Vorbereitungen für Themes und Plugins

[pfaffman (Jay Pfaffman)]

Was genau soll denn kaputtgehen? Vielleicht gibt es bereits eine unterstützte Theme-Komponente, die die Arbeit erledigt.

Ist es nur das Banner oben, das zur Hauptseite verlinkt?

[awesomerobot (Kris)]

Gibt es einen Ersatz für:

api.changeWidgetSetting("header-notifications", "avatarSize", "large");

Dies gibt mir die Deprecation-Warnung, die hierher führt:

Das Widget header-notifications wurde als veraltet markiert und changeWidgetSetting ist keine unterstützte Überschreibung mehr.

[gormus (Osman Görmüş)]

Ich bin im selben Boot.

Versuche, die Logo-URL auf die richtige Weise zu ändern, aber das Folgende ist nicht mehr erreichbar:

api.changeWidgetSetting("home-logo", "href", "https://my-other-homepage/");

Wie lautet der Ersatz-API-Aufruf dafür?

[david (David Taylor)]

Wir arbeiten an einer sauberen Lösung dafür, aber sie ist noch nicht ganz fertig. Behalten Sie dieses Thema für Updates im Auge.

[kana.tatsuta]

Hallo @david – kann eine saubere Lösung bis Freitag, den 7. Juni fertig sein? Wenn nicht, könnten Sie eine Schätzung abgeben? Entschuldigen Sie die Eile, wir beginnen am 17. Juni mit der geschlossenen Beta und müssen wissen, ob dies vor den Tests implementiert wird oder nicht.

[david (David Taylor)]

Ich habe kein genaues Datum, aber es wird wahrscheinlich in den nächsten 1-2 Wochen sein. Bis morgen wird es nicht fertig sein.

Wenn Sie etwas benötigen, das bis morgen funktioniert, dann empfehle ich die Verwendung der alten API, die Ihre Website automatisch auf die Implementierung des Legacy-Headers umstellt.

[saquetim (Sérgio Saquetim)]

@kana.tatsuta die neue API ist gemerged.

Ich habe einen Abschnitt im OP hinzugefügt, mit Beispielen, wie die Logo-URL angepasst werden kann.

[saquetim (Sérgio Saquetim)]

Wir haben die Admin-Mitteilung für neue Deployments auf Instanzen mit inkompatiblen Plugins oder Themes aktiviert.

[tradmo (Adam Moore)]

Ich bin mir nicht sicher, wie ich meinen Code aktualisieren soll. Ich habe ein paar Dinge versucht, aber jedes Mal werden die Bilder vom hellen Thema anstelle meines dunklen Themas und der direkt für diese Bilder in der Komponente hochgeladenen Elemente angezeigt. Haben Sie Vorschläge, wie dies refaktorisiert werden sollte?

<script type="text/discourse-plugin" version="0.8.25">
  api.reopenWidget("home-logo", {
    logoUrl() {
      return (
        settings.Alternative_logo_url || ""
      );
    },

    mobileLogoUrl() {
      return (
        settings.Alternative_mobile_logo_url || ""
      );
    },

    smallLogoUrl() {
      return (
        settings.Alternative_small_logo_url || ""
      );
    }
  });
</script>

[saquetim (Sérgio Saquetim)]

@tradmo,

Versuchen Sie, einen Connector im home-logo-contents-Plugin-Outlet zu verwenden. Ihr Code würde in etwa wie folgt übersetzt werden:

// javascripts/discourse/initializers/customize-logo.gjs

import HomeLogoContents from "discourse/components/header/home-logo-contents";
import { withPluginApi } from "discourse/lib/plugin-api";

export default {
  name: `logo-customizations`,
  initialize(container) {
    withPluginApi("1.29.0", (api) => {
      renderHomeLogo(api);
    });
  },
};

function renderHomeLogo(api) {
  const logoSmallUrl = settings.Alternative_small_logo_url || "";
  const logoUrl = settings.Alternative_logo_url || "";
  const mobileLogoUrl = settings.Alternative_mobile_logo_url || "";

  api.renderInOutlet("home-logo-contents", <template>
    <HomeLogoContents
      @logoSmallUrl={{logoSmallUrl}}
      @logoUrl={{logoUrl}}
      @minimized={{@outletArgs.minimized}}
      @mobileLogoUrl={{mobileLogoUrl}}
      @showMobileLogo={{@outletArgs.showMobileLogo}}
      @title={{@outletArgs.title}}
    />
  </template>);
}

[angelinekwan]

Für reopenWidget (sidebar-toggle), könnten Sie mir helfen zu verstehen, wie ich den folgenden Code ersetzen kann? Ich habe in dieser Anleitung keine Anweisungen gefunden

// /javascripts/discourse/api-initializers/desktop-open-sidebar-always.js
/* sidebarToggle button removed by "reopenWidget", applicationController forces showSidebar to true (for desktopView) */

import { withPluginApi } from "discourse/lib/plugin-api";
import { reopenWidget } from "discourse/widgets/widget";

function sidebarToggle(api) {
  const applicationController = api.container.lookup("controller:application");
  api.reopenWidget("sidebar-toggle", {
    html(attrs) {
      if (this.site.desktopView == true && attrs.showSidebar == false) {
        applicationController.set("showSidebar", true);
      }
    },
  });
}

export default {
  name: "desktop-open-sidebar-always",
  initialize() {
    withPluginApi("0.10.1", sidebarToggle);
  },
};

[Danny_Dainton]

Hallo Leute ,

Könnte mir jemand bei den Änderungen helfen, die ich dafür brauche?

<script type="text/discourse-plugin" version="0.4">
const { iconNode } = require("discourse-common/lib/icon-library");

api.decorateWidget('header-icons:before', helper => {
    return helper.h('li', [
        helper.h('a#graduation-cap.icon', {
            href:'https://example.com/',
            title: 'Learning Center'
        }, iconNode('graduation-cap')),
    ]);
});

</script>

Ich glaube, ich muss es so konvertieren, dass es api.headerIcons.add(“foo”, FooIcon, { before: “search” }) verwendet, aber ich bin mir nicht zu 100% sicher, wie das geht

Jede Hilfe hier wäre sehr willkommen

[saquetim (Sérgio Saquetim)]

@angelinekwan

Für reopenWidget (sidebar-toggle) könnten Sie mir bitte helfen zu verstehen, wie ich den folgenden Code ersetzen kann? Ich habe in dieser Anleitung keine Anweisungen gefunden.

// /javascripts/discourse/api-initializers/desktop-open-sidebar-always.js
/* sidebarToggle button removed by "reopenWidget", applicationController forces showSidebar to true (for desktopView) */

import { withPluginApi } from "discourse/lib/plugin-api";
import { reopenWidget } from "discourse/widgets/widget";

function sidebarToggle(api) {
  const applicationController = api.container.lookup("controller:application");
  api.reopenWidget("sidebar-toggle", {
    html(attrs) {
      if (this.site.desktopView == true && attrs.showSidebar == false) {
        applicationController.set("showSidebar", true);
      }
    },
  });
}

export default {
  name: "desktop-open-sidebar-always",
  initialize() {
    withPluginApi("0.10.1", sidebarToggle);
  },

Hallo @angelinekwan,

Hier ist unsere Empfehlung:

1. Entfernen Sie Ihre vorhandene Datei javascripts/discourse/api-initializers/desktop-open-sidebar-always.js.

2. Erstellen Sie eine neue Datei: javascripts/discourse/pre-initializers/desktop-open-sidebar-always.js und fügen Sie den folgenden Code hinzu:

import { withPluginApi } from "discourse/lib/plugin-api";

const PLUGIN_NAME = "desktop-open-sidebar-always";

export default {
  name: PLUGIN_NAME,

  initialize() {
    withPluginApi("1.34.0", (api) => {
      api.modifyClass("controller:application", {
        pluginId: PLUGIN_NAME,

        calculateShowSidebar() {
          if (this.site.desktopView && this.canDisplaySidebar) {
            return true;
          }

          return this._super(...arguments);
        },
      });
    });
  },
};

Fügen Sie Folgendes zu common/common.scss hinzu:

html.desktop-view {
  .header-sidebar-toggle {
    display: none;
  }
}

[saquetim (Sérgio Saquetim)]

@Danny_Dainton

Könnte mir jemand bei den Änderungen helfen, die ich dafür brauche?

<script type="text/discourse-plugin" version="0.4">
const { iconNode } = require("discourse-common/lib/icon-library");

api.decorateWidget('header-icons:before', helper => {
    return helper.h('li', [
        helper.h('a#graduation-cap.icon', {
            href:'https://example.com/',
            title: 'Learning Center'
        }, iconNode('graduation-cap')),
    ]);
});
</script>

Ich glaube, ich muss es so konvertieren, dass es api.headerIcons.add(“foo”, FooIcon, { before: “search” }) verwendet, aber ich bin mir nicht zu 100 % sicher, wie das geht

Jede Hilfe hier wäre sehr willkommen

HI @Danny_Dainton,

Schau dir die Custom Header Links (icons) Theme-Komponente an. Ich glaube, sie macht, was du brauchst.

Wenn du die Theme-Komponente nicht verwenden kannst, hilft dir api.headerIcons.add weiter.

• Erstelle eine neue Initialisierungsdatei. Sie muss die Erweiterung .gjs haben.
• Der folgende Code sollte das tun, was du willst:

// javascripts/discourse/initializers/custom-header-icons.gjs

import { apiInitializer } from "discourse/lib/api";
import dIcon from "discourse-common/helpers/d-icon";

export default apiInitializer("1.34.0", (api) => {
  api.headerIcons.add(
    "custom-header-home",
    `
      <li>
        <a id="graduation-cap" class="icon" href="https://example.com/" title="Learning Center">
          {{dIcon "graduation-cap"}}
        </a>
      </li>
    `,
    { before: "search" }
  );
});

[Danny_Dainton]

Danke, Sir!

Ah, das ergibt jetzt etwas mehr Sinn für mich, nachdem ich es vor mir gesehen habe.

Ich weiß Ihre Antwort sehr zu schätzen!!

[av203 (Avi N)]

Ich bitte um Hilfe bei der Migration dieses Code-Abschnitts, bei dem ich nicht herausfinden kann, wie er migriert werden soll:

api.reopenWidget("user-dropdown", {
  html(attrs) {
    return h(
      "a.icon",
      {title: I18n.t("custom.string.title")},
      [iconNode("bell"), this.attach("header-notifications", attrs)],
    );
  },
});

Das ursprüngliche Ziel dieser Änderung ist es, das user-dropdown-Menü beizubehalten, aber das Profilbild durch ein Symbol (Glocke) zu ersetzen.

[saquetim (Sérgio Saquetim)]

@av203

Das Ziel dieser Änderung ist es ursprünglich, das Benutzer-Dropdown-Menü beizubehalten, aber das Profilbild durch ein Symbol (Glocke) zu ersetzen.

Der einfachste Weg, den gewünschten Effekt zu erzielen, ist das Hinzufügen des Symbols über das vorhandene PluginOutlet und das einfache Ausblenden des Benutzeravatars mit CSS.

In einer .gjs-Datei:

// javascripts/discourse/initializers/user-dropdown-bell-icon.gjs

import { withPluginApi } from "discourse/lib/plugin-api";
import dIcon from "discourse-common/helpers/d-icon";

export default {
  name: "user-dropdown-bell-icon",
  initialize(container) {
    withPluginApi("1.34.0", (api) => {
      api.renderInOutlet("user-dropdown-notifications__before", 
        
        {{dIcon "bell"}}
        
      );
    });
  },
};

Fügen Sie das folgende CSS hinzu:

.header-dropdown-toggle.user-menu-panel img {
  display: none;
}

Sie erhalten:

[saquetim (Sérgio Saquetim)]

DEV: Remove the old header widgets code

Der alte Widget-Code wurde entfernt.

[Jonathan5]

Könnte mir jemand beim Aktualisieren einer Themenkomponente helfen, die Text neben dem „Home-Logo“ hinzufügt? Vielen Dank im Voraus.

Add Text In Header Beside Logo

Hey Daniel You can use something like this to add text next to the header logo on your site <script type="text/discourse-plugin" version="0.8"> api.decorateWidget("home-logo:after", helper => { const titleVisible = helper.attrs.minimized; const headerText = "Text you want to add"; // <--- change this text if (!titleVisible) { return api.h("span.header-text", headerText); } }); </script> You’d add it in the header section of your theme / component. You can read more about t…