Je vois qu’il y a eu des sujets sur la navigation avec un bouton retour pour les navigateurs mobiles et je n’ai pas trouvé de solution, bien que j’aie peut-être manqué quelque chose 
Je ne suis pas un codeur et je ne suis pas assez compétent avec Discourse pour faire des choses dangereuses 
mais j’ai réussi à bricoler avec ChatGPT pour créer le bouton retour BLEU fonctionnel sur cette image avec mon chiot.
Je veux le masquer sur des pages spécifiques mais je n’ai pas encore trouvé comment masquer des éléments. Si quelqu’un sait, je l’ajusterai et l’ajouterai aux instructions.
Comment ajouter un bouton retour flottant dans Discourse (pour les utilisateurs mobiles)
Ce guide vous aide à ajouter un bouton “Retour” flottant pour les appareils mobiles sur votre forum Discourse. Il garantit que le bouton n’apparaît que pour les utilisateurs mobiles et améliore la navigation pour les applications ou les navigateurs qui n’ont pas de boutons retour intégrés.
Étape 1 : Créer un nouveau composant de thème
- Connectez-vous en tant qu’administrateur :
- Accédez à votre forum Discourse et connectez-vous avec un compte administrateur.
- Accéder à la personnalisation des thèmes :
- Naviguez vers
Admin > Personnaliser > Thèmes.
- Naviguez vers
- Créer un composant de thème :
- Cliquez sur Composants.
- Cliquez sur Installer > Créer nouveau.
- Nommez le composant “Bouton retour mobile” et cliquez sur Créer.
Étape 2 : Ajouter le code du bouton retour
- Modifier le composant de thème :
- Cliquez sur le composant de thème nouvellement créé.
- Accédez à la section CSS/HTML.
- Ajouter du JavaScript pour le bouton retour :
- Basculez vers l’onglet Mobile.
- Cliquez sur la section
</head>. - Collez le code suivant :
html
Copier le code
<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 pour la flèche gauche
backButton.onclick = (event) => {
event.preventDefault();
window.history.back();
};
document.body.appendChild(backButton);
}
}
}
// Ajouter le bouton au chargement initial de la page
document.addEventListener('DOMContentLoaded', addMobileBackButton);
// Revérifier lors des transitions de page ultérieures
api.onPageChange(addMobileBackButton);
</script>
Étape 3 : Ajouter du CSS pour le style
- Ajouter les styles du bouton retour :
- Dans l’onglet Mobile, cliquez sur la section CSS.
- Collez le CSS suivant :
css
Copier le code
.floating-back-button {
position: fixed;
bottom: 20px;
left: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #0088cc; /* Personnaliser la couleur */
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;
}
Étape 4 : Appliquer le composant de thème
- Retourner aux thèmes :
- Naviguez de nouveau vers
Admin > Personnaliser > Thèmes.
- Naviguez de nouveau vers
- Modifier votre thème actif :
- Cliquez sur votre thème actif.
- Sous Composants de thème, ajoutez le composant “Bouton retour mobile” à partir de la liste déroulante.
- Cliquez sur Ajouter, puis sur Enregistrer.
Étape 5 : Tester vos modifications
- Ouvrez votre forum sur mobile :
- Utilisez un navigateur mobile ou simulez la vue mobile à l’aide des outils de développement.
- Vérifier le bouton retour :
- Le bouton doit apparaître dans le coin inférieur gauche de l’écran.
- Cliquer sur le bouton devrait vous ramener dans l’historique de votre navigateur.
Notes :
- Pour mobile uniquement : Étant donné que le code et le CSS se trouvent dans l’onglet Mobile, le bouton n’apparaîtra que sur les appareils mobiles.
- Personnalisation :
- Vous pouvez ajuster la position, la taille ou la couleur du bouton dans le CSS pour qu’il corresponde au design de votre forum.
- Fonctionnalité :
- Le bouton retour utilise
window.history.back(). S’il n’y a pas de page précédente, il ne naviguera nulle part.
- Le bouton retour utilise
