Vejo que houve tópicos sobre ter navegação com botão de voltar para dispositivos móveis em navegadores móveis e não encontrei solução, embora talvez eu tenha perdido 
Eu não sou um programador e não tenho proficiência suficiente com o Discourse para me arriscar 
, mas consegui, com a ajuda do ChatGPT, criar o botão azul funcional na imagem abaixo com meu cachorro.
Quero ocultá-lo em páginas específicas, mas ainda não descobri como ocultar elementos. Se alguém souber, ajustarei e adicionarei às instruções.
Como Adicionar um Botão de Voltar Flutuante no Discourse (Para Usuários de Dispositivos Móveis)
Este guia ajuda você a adicionar um botão “Voltar” flutuante para dispositivos móveis no seu fórum Discourse. Ele garante que o botão apareça apenas para usuários de dispositivos móveis e melhora a navegação para aplicativos ou navegadores que não possuem botões de voltar integrados.
Passo 1: Criar um Novo Componente de Tema
- Faça login como Administrador:
- Acesse seu fórum Discourse e faça login com uma conta de administrador.
- Acesse a Personalização de Temas:
- Navegue até
Admin > Personalizar > Temas.
- Navegue até
- Criar um Componente de Tema:
- Clique em Componentes.
- Clique em Instalar > Criar Novo.
- Nomeie o componente como “Botão Voltar Móvel” e clique em Criar.
Passo 2: Adicionar o Código do Botão Voltar
- Editar o Componente de Tema:
- Clique no componente de tema recém-criado.
- Vá para a seção CSS/HTML.
- Adicionar JavaScript para o Botão Voltar:
- Mude para a aba Mobile.
- Clique na seção
</head>. - Cole o seguinte 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 seta para a esquerda
backButton.onclick = (event) => {
event.preventDefault();
window.history.back();
};
document.body.appendChild(backButton);
}
}
}
// Adiciona o botão ao carregar a página inicial
document.addEventListener('DOMContentLoaded', addMobileBackButton);
// Verifica novamente nas transições de página subsequentes
api.onPageChange(addMobileBackButton);
</script>
Passo 3: Adicionar CSS para Estilização
- Adicionar Estilos do Botão Voltar:
- Na aba Mobile, clique na seção CSS.
- Cole o seguinte CSS:
css
Copiar código
.floating-back-button {
position: fixed;
bottom: 20px;
left: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #0088cc; /* Personalize a cor */
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;
}
Passo 4: Aplicar o Componente de Tema
- Voltar aos Temas:
- Navegue de volta para
Admin > Personalizar > Temas.
- Navegue de volta para
- Editar seu Tema Ativo:
- Clique no seu tema ativo.
- Em Componentes de Tema, adicione o componente “Botão Voltar Móvel” no menu suspenso.
- Clique em Adicionar e depois em Salvar.
Passo 5: Testar suas Alterações
- Abra seu Fórum no Celular:
- Use um navegador móvel ou simule a visualização móvel usando as ferramentas do desenvolvedor.
- Verificar o Botão Voltar:
- O botão deve aparecer no canto inferior esquerdo da tela.
- Clicar no botão deve navegar de volta no histórico do seu navegador.
Observações:
- Apenas para Dispositivos Móveis: Como o código e o CSS estão na aba Mobile, o botão só aparecerá em dispositivos móveis.
- Personalização:
- Você pode ajustar a posição, o tamanho ou a cor do botão no CSS para combinar com o design do seu fórum.
- Funcionalidade:
- O botão de voltar usa
window.history.back(). Se não houver página anterior, ele não navegará para lugar nenhum.
- O botão de voltar usa
