Ho visto che ci sono stati argomenti sull’avere una navigazione con pulsante indietro mobile per i browser mobili e non ho trovato una soluzione, anche se forse me la sono persa 
Non sono un programmatore e non sono abbastanza esperto di Discourse da fare danni 
ma ho armeggiato con ChatGPT per creare il BLU funzionante pulsante indietro in questa immagine con il mio cucciolo.
Voglio nasconderlo in pagine specifiche ma non ho ancora capito come nascondere gli elementi. Se qualcuno lo sa, aggiusterò e aggiungerò alle istruzioni.
Come Aggiungere un Pulsante Indietro Fluttuante in Discourse (Per Utenti Mobili)
Questa guida ti aiuta ad aggiungere un pulsante “Indietro” fluttuante per i dispositivi mobili nel tuo forum Discourse. Assicura che il pulsante appaia solo per gli utenti mobili e migliora la navigazione per app o browser che non dispongono di pulsanti indietro integrati.
Passaggio 1: Crea un Nuovo Componente Tema
- Accedi come Amministratore:
- Vai al tuo forum Discourse ed effettua l’accesso con un account amministratore.
- Accedi alla Personalizzazione del Tema:
- Naviga su
Admin > Personalizza > Temi.
- Naviga su
- Crea un Componente Tema:
- Fai clic su Componenti.
- Fai clic su Installa > Crea Nuovo.
- Dai al componente il nome “Pulsante Indietro Mobile” e fai clic su Crea.
Passaggio 2: Aggiungi il Codice del Pulsante Indietro
- Modifica il Componente Tema:
- Fai clic sul componente tema appena creato.
- Vai alla sezione CSS/HTML.
- Aggiungi JavaScript per il Pulsante Indietro:
- Passa alla scheda Mobile.
- Fai clic sulla sezione
</head>. - Incolla il seguente codice:
html
Copia codice
<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 per freccia sinistra
backButton.onclick = (event) => {
event.preventDefault();
window.history.back();
};
document.body.appendChild(backButton);
}
}
}
// Aggiungi il pulsante al caricamento iniziale della pagina
document.addEventListener('DOMContentLoaded', addMobileBackButton);
// Ricontrolla le transizioni di pagina successive
api.onPageChange(addMobileBackButton);
</script>
Passaggio 3: Aggiungi CSS per lo Stile
- Aggiungi gli Stili del Pulsante Indietro:
- Nella scheda Mobile, fai clic sulla sezione CSS.
- Incolla il seguente CSS:
css
Copia codice
.floating-back-button {
position: fixed;
bottom: 20px;
left: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #0088cc; /* Personalizza il colore */
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;
}
Passaggio 4: Applica il Componente Tema
- Torna ai Temi:
- Naviga di nuovo su
Admin > Personalizza > Temi.
- Naviga di nuovo su
- Modifica il Tuo Tema Attivo:
- Fai clic sul tuo tema attivo.
- Sotto Componenti Tema, aggiungi il componente “Pulsante Indietro Mobile” dal menu a discesa.
- Fai clic su Aggiungi e poi su Salva.
Passaggio 5: Testa le Tue Modifiche
- Apri il Tuo Forum su Mobile:
- Usa un browser mobile o simula la visualizzazione mobile usando gli strumenti per sviluppatori.
- Verifica il Pulsante Indietro:
- Il pulsante dovrebbe apparire nell’angolo in basso a sinistra dello schermo.
- Facendo clic sul pulsante dovresti tornare indietro nella cronologia del tuo browser.
Note:
- Solo per Mobile: Poiché il codice e il CSS si trovano nella scheda Mobile, il pulsante apparirà solo sui dispositivi mobili.
- Personalizzazione:
- Puoi regolare la posizione, le dimensioni o il colore del pulsante nel CSS per adattarlo al design del tuo forum.
- Funzionalità:
- Il pulsante indietro utilizza
window.history.back(). Se non c’è una pagina precedente, non navigherà da nessuna parte.
- Il pulsante indietro utilizza
