 |
Zusammenfassung | Ersetzt die Standard-Authentifizierungsschaltflächen durch eine kombinierte Schaltfläche, die ein Dropdown-Menü oder ein Modal mit Links öffnet |
 |
Repository | https://github.com/Lillinator/combined-auth-button |
 |
Installationsanleitung | So installieren Sie ein Theme oder Theme-Komponente |
Diese Theme-Komponente installieren
Übersicht
Diese Theme-Komponente fasst die Schaltflächen „Registrieren“ und „Anmelden“ zu einer einzigen Schaltfläche mit Dropdown-Optionen zusammen, um den Kopfbereich sauberer zu gestalten und die Benutzerfreundlichkeit zu verbessern (insbesondere für mobile Nutzer).
Insbesondere verbirgt die Standard-Mobilansicht von Discourse die Schaltfläche „Registrieren“ und zeigt nur die vorhandene Schaltfläche „Anmelden“; dies kann für neue Besucher von Discourse-Foren (Anonyme Ansicht) verwirrend und nicht intuitiv sein. Darüber hinaus verlinkt die Standard-Anmeldeschaltfläche in der Mobilansicht auf die Anmeldeseite, die wiederum einen Link zur Registrierungsseite enthält; dies erzeugt unnötige Reibung für neue Nutzer auf mobilen Geräten.
Standard-Mobilansicht ohne Komponente:
Diese einfache Discourse-Theme-Komponente ersetzt die vorhandene Anmelden-Schaltfläche durch eine kombinierte Schaltfläche mit klarerer Beschriftung – der Standard ist Registrieren / Anmelden. Beim Klicken oder Tippen wird ein Dropdown-Menü oder ein mobiles Modal mit Links zu den jeweiligen Registrierungs- oder Anmeldeseiten geöffnet.
Mobile Schaltfläche und Modal mit den Standardkomponenteneinstellungen:
Desktop-Schaltfläche und Dropdown-Menü mit den Standardkomponenteneinstellungen:
Einstellungen & Theme-Übersetzungen
Es gibt Admin-Einstellungen, die das Aktivieren auf dem Desktop, das Ausblenden des kombinierten Schaltflächensymbols für mehr Kopfbereich in der Mobilansicht sowie das Ändern aller Schaltflächensymbole und -beschriftungen ermöglichen.
| Einstellung | Beschreibung |
|---|---|
enable_on_desktop |
Aktiviert die kombinierte Authentifizierungsschaltfläche auf allen Viewport-Größen |
hide_mobile_combined_button_icon |
blendet das Symbol der kombinierten Authentifizierungsschaltfläche in der Mobilansicht aus, um Kopfbereich zu sparen |
combined_button_icon |
SVG-Symbol für die kombinierte Authentifizierungs-Dropdown-Schaltfläche |
login_button_icon |
SVG-Symbol für die Anmelde-Schaltfläche |
signup_button_icon |
SVG-Symbol für die Registrierungs-Schaltfläche |
button_labels.auth |
Textzeichenfolge der kombinierten Schaltfläche für Theme-Übersetzungen |
button_labels.log_in |
Textzeichenfolge der Anmelde-Schaltfläche für Theme-Übersetzungen |
button_labels.sign_up |
Textzeichenfolge der Registrierungs-Schaltfläche für Theme-Übersetzungen |
Weitere Screenshots
Hinweise
- Diese Komponente ist mit dem Hamburger-Menü links auf Mobilgeräten kompatibel, aber das Zentrieren des Site-Logos kann zu Platzproblemen im Kopfbereich führen.
Schauen Sie sich meine anderen Discourse-Beiträge an
