Veo que ha habido temas sobre la navegación con el botón de retroceso móvil para navegadores móviles y no encontré una solución, aunque quizás me la perdí 
No soy programador y no tengo la suficiente experiencia con Discourse como para hacer algo peligroso 
, pero logré con ChatGPT crear el botón de retroceso AZUL que funciona en esta imagen con mi cachorro.
Quiero ocultarlo en páginas específicas, pero aún no he descubierto cómo ocultar elementos. Si alguien sabe, ajustaré y añadiré a las instrucciones.
Cómo Añadir un Botón de Retroceso Flotante en Discourse (Para Usuarios Móviles)
Esta guía te ayuda a añadir un botón de “Retroceder” flotante para dispositivos móviles en tu foro de Discourse. Asegura que el botón aparezca solo para usuarios móviles y mejora la navegación para aplicaciones o navegadores que carecen de botones de retroceso integrados.
Paso 1: Crear un Nuevo Componente de Tema
- Iniciar sesión como Administrador:
- Ve a tu foro de Discourse e inicia sesión con una cuenta de administrador.
- Acceder a la Personalización de Temas:
- Navega a
Admin > Personalizar > Temas.
- Navega a
- Crear un Componente de Tema:
- Haz clic en Componentes.
- Haz clic en Instalar > Crear Nuevo.
- Nombra el componente “Botón de Retroceso Móvil” y haz clic en Crear.
Paso 2: Añadir el Código del Botón de Retroceso
- Editar el Componente de Tema:
- Haz clic en el componente de tema recién creado.
- Ve a la sección CSS/HTML.
- Añadir JavaScript para el Botón de Retroceso:
- Cambia a la pestaña Móvil.
- Haz clic en la sección
</head>. - Pega el siguiente código:
html
Copiar código
<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 para flecha izquierda
backButton.onclick = (event) => {
event.preventDefault();
window.history.back();
};
document.body.appendChild(backButton);
}
}
}
// Añadir el botón al cargar la página inicial
document.addEventListener('DOMContentLoaded', addMobileBackButton);
// Volver a comprobar en transiciones de página posteriores
api.onPageChange(addMobileBackButton);
</script>
Paso 3: Añadir CSS para el Estilo
- Añadir los Estilos del Botón de Retroceso:
- En la pestaña Móvil, haz clic en la sección CSS.
- Pega el siguiente CSS:
css
Copiar código
.floating-back-button {
position: fixed;
bottom: 20px;
left: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #0088cc; /* Personaliza el color */
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;
}
Paso 4: Aplicar el Componente de Tema
- Volver a Temas:
- Navega de nuevo a
Admin > Personalizar > Temas.
- Navega de nuevo a
- Editar tu Tema Activo:
- Haz clic en tu tema activo.
- En Componentes de Tema, añade el componente “Botón de Retroceso Móvil” desde el menú desplegable.
- Haz clic en Añadir y luego en Guardar.
Paso 5: Probar tus Cambios
- Abrir tu Foro en Móvil:
- Usa un navegador móvil o simula la vista móvil utilizando las herramientas de desarrollador.
- Verificar el Botón de Retroceso:
- El botón debería aparecer en la esquina inferior izquierda de la pantalla.
- Hacer clic en el botón debería navegarte hacia atrás en el historial de tu navegador.
Notas:
- Solo para Móviles: Dado que el código y el CSS están en la pestaña Móvil, el botón solo aparecerá en dispositivos móviles.
- Personalización:
- Puedes ajustar la posición, el tamaño o el color del botón en el CSS para que coincida con el diseño de tu foro.
- Funcionalidad:
- El botón de retroceso utiliza
window.history.back(). Si no hay una página anterior, no navegará a ningún lado.
- El botón de retroceso utiliza
