Modérateur, veuillez déplacer ce message dans la catégorie appropriée.
Page d’accueil « Derniers » sur mobile
Avec la dépréciation de site.mobileView dans Discourse 3.5, le composant de thème populaire Force Mobile Homepage a été signalé comme cassé. Ce composant est un remplacement compatible avec les versions actuelles de Discourse.
Il définit la page d’accueil par défaut sur Derniers pour les écrans étroits, tout en laissant les écrans plus larges (iPad en mode paysage, bureau) inchangés. Il se souvient également du dernier choix de l’utilisateur entre « Derniers » et « Catégories » pour la durée de sa session de navigateur.
Comportement
iPhone / écran étroit — atterrit par défaut sur « Derniers »
L’utilisateur navigue vers « Catégories » — ce choix est mémorisé pour le reste de la session du navigateur
Nouvelle session — revient toujours par défaut à « Derniers »- :ipad: iPad (paysage) / bureau — complètement inchangé, la mise en page à deux colonnes « Catégories » + « Derniers » reste intacte
Fonctionnement
Le composant utilise window.matchMedia pour la détection de la taille de la fenêtre, setDefaultHomepage pour définir la page d’accueil par défaut, et service:router d’Ember pour rediriger avant le rendu de la page. sessionStorage mémorise le dernier choix de l’utilisateur afin que le retour à la page d’accueil respecte sa préférence.
import { apiInitializer } from "discourse/lib/api";
import { setDefaultHomepage } from "discourse/lib/utilities";
export default apiInitializer("1.0", (api) => {
if (!window.matchMedia("(max-width: 768px)").matches) {
return;
}
setDefaultHomepage("latest");
api.onPageChange((url) => {
if (url === "/categories") {
sessionStorage.setItem("mobile_homepage", "categories");
} else if (url === "/latest") {
sessionStorage.setItem("mobile_homepage", "latest");
}
if (url === "/") {
const choice = sessionStorage.getItem("mobile_homepage");
if (choice === "categories") {
const router = api.container.lookup("service:router");
router.replaceWith("discovery.categories");
} else {
const router = api.container.lookup("service:router");
router.replaceWith("discovery.latest");
}
}
});
});
Le point de rupture de 768 px correspond au seuil de mise en page étroite de Discourse. Cette approche s’inspire des recommandations de l’équipe principale de Discourse dans ce fil de discussion suite aux modifications de l’API de vue.
Testé sur
- iPhone — atterrit sur « Derniers »
- :ipad: iPad (paysage) — mise en page à deux colonnes « Catégories » + « Derniers »
Bureau — mise en page à deux colonnes « Catégories » + « Derniers »
Installation
- Accédez à Admin → Personnaliser → Thèmes → Installer → À partir d’un dépôt git
- Saisissez :
https://github.com/shortmort37/discourse-mobile-latest-homepage - Installez-le en tant que composant et ajoutez-le à votre thème actif
Si vous débutez dans l’installation de composants de thème, consultez le Guide du débutant pour les thèmes Discourse.
Remarques
- Les utilisateurs peuvent toujours naviguer manuellement vers « Catégories » — leur choix est respecté pour la session
- Le point de rupture de 768 px peut être ajusté dans le fichier JS si nécessaire
- Le choix de la session est réinitialisé à la fermeture du navigateur, de sorte que les nouvelles visites commencent toujours sur « Derniers »
Questions, retours et PR sont les bienvenus !