Ich sehe, dass es Themen gab, in denen die mobile Zurück-Button-Navigation für mobile Browser behandelt wurde, und ich habe keine Lösung gefunden, obwohl ich sie vielleicht übersehen habe 
Ich bin kein Programmierer und nicht ausreichend mit Discourse vertraut, um gefährliche Dinge zu tun 
, aber ich habe mit ChatGPT herumgespielt, um den funktionierenden BLAUEN Zurück-Button in diesem Bild mit meinem Welpen zu erstellen.
Ich möchte ihn auf bestimmten Seiten ausblenden, habe aber noch nicht herausgefunden, wie man Elemente ausblendet. Wenn jemand eine Lösung kennt, werde ich sie anpassen und zu den Anweisungen hinzufügen.
Hinzufügen eines schwebenden Zurück-Buttons in Discourse (für mobile Benutzer)
Diese Anleitung hilft Ihnen, einen schwebenden “Zurück”-Button für mobile Geräte in Ihrem Discourse-Forum hinzuzufügen. Er stellt sicher, dass der Button nur für mobile Benutzer angezeigt wird und verbessert die Navigation für Apps oder Browser, denen keine integrierten Zurück-Buttons fehlen.
Schritt 1: Eine neue Theme-Komponente erstellen
- Als Administrator anmelden:
- Gehen Sie zu Ihrem Discourse-Forum und melden Sie sich mit einem Administratorkonto an.
- Theme-Anpassung aufrufen:
- Navigieren Sie zu
Admin > Anpassen > Themes.
- Navigieren Sie zu
- Eine Theme-Komponente erstellen:
- Klicken Sie auf Komponenten.
- Klicken Sie auf Installieren > Neu erstellen.
- Nennen Sie die Komponente “Mobile Back Button” und klicken Sie auf Erstellen.
Schritt 2: Den Zurück-Button-Code hinzufügen
- Die Theme-Komponente bearbeiten:
- Klicken Sie auf die neu erstellte Theme-Komponente.
- Gehen Sie zum Abschnitt CSS/HTML.
- JavaScript für den Zurück-Button hinzufügen:
- Wechseln Sie zum Tab Mobile.
- Klicken Sie auf den Abschnitt
<head>. - Fügen Sie den folgenden Code ein:
html
Code kopieren
<script type="text/discourse-plugin" version="0.8">
function addMobileBackButton() {
const isMobileView = api.container.lookup('site:main').mobileView;
if (isMobileView) {
const existingButton = document.querySelector('.floating-back-button');
if (!existingButton) {
const backButton = document.createElement('button');
backButton.className = 'floating-back-button';
backButton.innerHTML = '←'; // Unicode für linken Pfeil
backButton.onclick = (event) => {
event.preventDefault();
window.history.back();
};
document.body.appendChild(backButton);
}
}
}
// Button beim erstmaligen Laden der Seite hinzufügen
document.addEventListener('DOMContentLoaded', addMobileBackButton);
// Bei nachfolgenden Seitenübergängen erneut prüfen
api.onPageChange(addMobileBackButton);
</script>
Schritt 3: CSS für das Styling hinzufügen
- Die Zurück-Button-Stile hinzufügen:
- Klicken Sie im Tab Mobile auf den Abschnitt CSS.
- Fügen Sie das folgende CSS ein:
css
Code kopieren
.floating-back-button {
position: fixed;
bottom: 20px;
left: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #0088cc; /* Farbe anpassen */
color: #fff;
border: none;
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
z-index: 1000;
cursor: pointer;
}
Schritt 4: Die Theme-Komponente anwenden
- Zurück zu Themes gehen:
- Navigieren Sie zurück zu
Admin > Anpassen > Themes.
- Navigieren Sie zurück zu
- Ihr aktives Theme bearbeiten:
- Klicken Sie auf Ihr aktives Theme.
- Fügen Sie unter Theme-Komponenten die Komponente “Mobile Back Button” aus dem Dropdown-Menü hinzu.
- Klicken Sie auf Hinzufügen und dann auf Speichern.
Schritt 5: Ihre Änderungen testen
- Öffnen Sie Ihr Forum auf dem Handy:
- Verwenden Sie einen mobilen Browser oder simulieren Sie die mobile Ansicht mit den Entwicklertools.
- Den Zurück-Button überprüfen:
- Der Button sollte in der unteren linken Ecke des Bildschirms erscheinen.
- Ein Klick auf den Button sollte Sie in Ihrer Browserhistorie zurückführen.
Hinweise:
- Nur für Mobilgeräte: Da der Code und das CSS im Tab Mobile stehen, wird der Button nur auf mobilen Geräten angezeigt.
- Anpassung:
- Sie können die Position, Größe oder Farbe des Buttons im CSS an das Design Ihres Forums anpassen.
- Funktionalität:
- Der Zurück-Button verwendet
window.history.back(). Wenn keine vorherige Seite vorhanden ist, wird er nirgendwohin navigieren.
- Der Zurück-Button verwendet
