⬇️ Dropdown-Header

Themenkomponente
1

:mag: Übersicht

Diese Theme-Komponente ermöglicht es Ihnen, Links mit Text, Symbolen und Dropdowns zum nativen Header Ihrer Discourse-Website hinzuzufügen.

image
image1440×1024 123 KB

Fehlerberichte, Funktionsanfragen und PRs sind sehr willkommen; Sponsoring ermöglicht es dem Pavilion-Team, die Arbeit an dieser Komponente zu priorisieren.

:computer: Code

GitHub-Repository anzeigen

:gear: Einstellungen

Es gibt eine Vielzahl von Einstellungen, die Sie konfigurieren können, um die Komponente anzupassen, einschließlich Link-Anpassungen, Icon-Quellen, Hinzufügen von Link-Sicherheit, Positionierung usw.

Eine Liste aller Einstellungen und detaillierte Erklärungen dazu finden Sie hier.

:thinking: Wann zu verwenden

Diese Komponente ist nützlich, wenn Sie Symbole, Links und Dropdown-Links inline mit dem vorhandenen Header von Discourse haben möchten. Es ist eine großartige Möglichkeit, viele zugängliche Links zu haben, ohne unnötige Unordnung zu verursachen oder die Seitenleiste außer Kontrolle geraten zu lassen.

Wenn Sie viele Dropdown-Links benötigen, schauen Sie sich Header-Untermenüs an, die eine Header-Menüzeile über dem ursprünglichen Header von Discourse erstellen.

Obwohl diese Komponente auch das Hinzufügen von Links allein ohne Dropdowns unterstützt, können Sie, wenn Sie nur Links ohne Dropdowns benötigen, gerne Benutzerdefinierte Header-Links verwenden.

:clapper: Vorschau

Desktop:

Desktop

Mobil:
Aufgrund des Platzmangels auf Mobilgeräten können Links durch Tippen auf den Pfeil-nach-unten-Button ausgelöst werden.

Mobile
Mobile640×1292 48.5 KB

Theme-Komponente installieren

49 „Gefällt mir“
2

Ich bin mir nicht sicher, warum, aber das scheint bei mir nicht zu funktionieren. Sobald es aktiviert ist, verschwindet mein Header. Auf einem sauberen Theme ohne andere Komponenten, habe auch mehrere Basisthemes ausprobiert.

<div id="ember7" class="d-header-wrap ember-view"><div></div></div>

2.9.0.beta4

(c99a6b10fb)

1 „Gefällt mir“
3

Hey @Fma965, meine Entschuldigung, ich habe einige Korrekturen für kleine Fehler vorgenommen, es sollte jetzt hoffentlich für Sie funktionieren. Lassen Sie mich wissen, wie es läuft.

3 „Gefällt mir“
4

Funktioniert jetzt super, danke!

5

Eine Sache, die man beachten sollte, ist, dass man, da hier keine a-Tags verwendet werden, die Links nicht mit der mittleren Maustaste anklicken kann, wie es bei den Links des Header Links-Plugins möglich ist. Gibt es einen Grund, warum Sie keine a-Tags verwenden?

2 „Gefällt mir“
6

@Fma965

Hmm.. das ist ein interessanter Punkt. Der Grund, warum ich keine Anker-Tags verwendet habe, ist, dass jeder Link ein Widget ist, das ein Dropdown generieren kann, wenn Dropdown-Elemente vorhanden sind. Bei der Verwendung des Widgets nutze ich auch die click()-Methode, die aufruft: DiscourseURL.routeTo(this.attrs.url);.

Dies hat einige Vorteile, wie z. B. die Beibehaltung des Verlaufs, wo Sie sich in einem Thema befinden. Wenn Sie beispielsweise auf einen Link zu einem Thema mit einem Anker-Tag klicken, beginnen Sie immer am Anfang des Themas. Wenn Sie das Thema jedoch zuvor besucht haben und zuletzt die Hälfte des Themas gelesen haben, bringt der routeTo-Ansatz Sie an dieselbe Position im Thema.

Ich frage mich, ob es eine Möglichkeit gibt, die Mittelklick-Funktionalität zu Widget-Klicks hinzuzufügen… muss ich mir ansehen, vielleicht hat jemand vom Discourse-Team eine Idee.

1 „Gefällt mir“
7

Ja, ich vermute, es hat damit zu tun, es war nur etwas, das einer meiner Moderatoren mir erwähnt hat, ich dachte, ich würde den Punkt hier ansprechen, nur für den Fall :slight_smile:

1 „Gefällt mir“
8

Hallo Keegan, danke, dass du diese Theme-Komponente erstellt hast! Sie ist die perfekte Brücke zwischen den Komponenten „Custom Header Links“ und „Header Submenu“, die ich mir zuvor angesehen hatte.

Gibt es eine Möglichkeit, den Links, die wir dort hinzufügen, eine „target“-Option (in neuem Tab öffnen) hinzuzufügen, wie in den beiden anderen Theme-Komponenten?

1 „Gefällt mir“
9

Ich fülle die Untermenüpunkte manuell aus einer externen Quelle und sende innerhalb einer Schleife einige Ajax-Anfragen, um sie abzurufen. Wenn es viele Elemente gibt, lädt die Komponente natürlich, bevor alle Anfragen abgeschlossen sind, und einige Elemente fehlen. Ist es möglich, die Quelle zu ändern, um dies zu erreichen?

1 „Gefällt mir“
11

Fantastische Komponente. Danke fürs Teilen :heart:.

12

Hallo! Danke für diese fantastische Komponente :slight_smile:

Es scheint, als würde rechts ein Rand fehlen, wenn man nicht im Forum angemeldet ist. So sieht es aus:
Capture d’écran 2022-12-05 à 16.22.20

Wenn ich jedoch angemeldet bin, ist es in Ordnung.

Ich hoffe, das hilft bei der Verbesserung.

13

Gibt es eine Möglichkeit für:

  1. Links zu permanenten URLs?
  2. Ziel-Links, die sich in neuen Tabs öffnen, wie zuvor erwähnt?

Wir richten gerade eine neue Instanz auf den Discourse-Servern ein und versuchen, unser Discourse-Menü so genau wie möglich an unsere WP-Website anzupassen.

Vielen Dank

1 „Gefällt mir“
14

Ich habe gerade diese Komponente installiert, um die Komponenten “Custom Header Links” und “Easy Footer” zu ersetzen.

Und ich liebe diese Komponente, sie ist großartig!

Funktioniert für mich. Meinst du ein _blank target oder so etwas oder externe URLs im Allgemeinen (die bei mir funktionieren)?

Mir ist eines aufgefallen: Auf Mobilgeräten kann ich nicht nach unten scrollen. Es scheint, dass ich zu viele Menüs habe. :wink: Kann das angepasst werden?

2 „Gefällt mir“
15

Ich habe gerade einen PR für dieses Problem erstellt:

Wenn Sie den obigen Link überprüfen, können Sie sehen, dass das angepasste CSS wie erwartet funktioniert. :slight_smile:

3 „Gefällt mir“
16

Hallo, danke für diese großartige Komponente!
Ich habe jedoch festgestellt, dass beim Klicken auf einen Link alle Texte und Symbole durch die des letzten Elements ersetzt werden.

Ich habe auch festgestellt, dass sich die Texte und Symbole der Links ändern, wenn ich auf das Logo klicke.

Ich füge ein kurzes Videobeispiel bei:

Der Seitenlink ist: https://oii.francescomancuso.it/forum/

Wie kann ich das beheben? Vielen Dank im Voraus!

17

Großartige Theme-Komponente! :chefs_kiss:

Sie würde noch besser werden, wenn wir auch einstellen könnten, dass die Links in einem neuen Tab geöffnet werden, anstatt im selben Tab wie jetzt. :+1:

18

Hallo Francesco :wave:

Ich würde es mir gerne ansehen, aber du hast das Layout geändert und verwendest die Komponente offenbar nicht mehr, um Links anzuzeigen.

Ich kann das Problem auf meinem Testforum nicht reproduzieren.

Wenn du dir das Problem zufällig noch einmal ansehen und uns mitteilen könntest, ob du das Problem immer noch hast, kannst du das gerne tun. :slight_smile:

Wenn eine solche Funktion implementiert würde, glaubst du, dass sie die Benutzereinstellungen bezüglich externer Links (Einstellung Alle externen Links in einem neuen Tab öffnen) überschreiben sollte?

image

2 „Gefällt mir“
22

Hallo, vielen Dank für Ihre Antwort.

Ich habe beschlossen, das Layout zu ändern, um eine einheitliche Grafik auf allen Bereichen meiner Plattform zu erstellen.
Nachdem ich eine Domainmigration durchgeführt habe, werde ich prüfen, ob der Fehler behoben ist.

Schönen Tag noch :smiley:

2 „Gefällt mir“
23

Ich denke, es sollte die Präferenzen der Benutzer berücksichtigen. Es sei denn, sie wurden von einem Administrator oder Moderator überschrieben :+1:

24

Also… ich habe gerade diese Theme-Komponente implementiert und bereits einige ziemlich valides Feedback von einigen unserer langjährigen Mitglieder erhalten.

Also im Grunde, wenn ich:

  • (1) zuerst auf die Suchschaltfläche in der Kopfzeile klicke und dann
  • (2) über die Dropdown-Kopfzeile fahre.
    → Die Dropdown-Kopfzeile würde unter dem Suchfeld erscheinen, was nicht das ist, was wir suchen. Idealerweise sollte die Suchleiste verschwinden, bevor sich das Dropdown-Menü öffnet.

Wenn ich jedoch zuerst über die Dropdown-Kopfzeile fahre und dann auf die Suchschaltfläche klicke, verhält es sich genau wie erwartet, d.h. (1) das Dropdown-Menü verschwindet und (2) die Suchleiste erscheint.

Ein weiteres Mitglied beschwerte sich auch darüber, wie es auf Mobilgeräten aussieht. Gibt es eine Möglichkeit, diese Theme-Komponente nur auf Desktops zu aktivieren?

Danke :+1:

1 „Gefällt mir“