Moderatore, si prega di spostare nella categoria appropriata.
Homepage Ultime su Mobile
Con la deprecazione di site.mobileView in Discourse 3.5, il popolare componente del tema Force Mobile Homepage è stato segnalato come non funzionante. Questo componente è un sostituto compatibile con le versioni attuali di Discourse.
Imposta l’homepage predefinita su Ultime per schermi stretti, lasciando invariati gli schermi più ampi (iPad in orizzontale, desktop). Ricorda inoltre la scelta dell’utente tra Ultime e Categorie per tutta la durata della sessione del browser.
Comportamento
iPhone / schermo stretto — atterra su Ultime per impostazione predefinita
L’utente naviga verso Categorie — quella scelta viene ricordata per il resto della sessione del browser
Sessione nuova — torna sempre a Ultime come predefinito- :ipad: iPad (orizzontale) / desktop — completamente non influenzato, layout a due colonne Categorie + Ultime invariato
Come funziona
Il componente utilizza window.matchMedia per il rilevamento della viewport, setDefaultHomepage per impostare la pagina predefinita e service:router di Ember per reindirizzare prima del rendering della pagina. sessionStorage ricorda l’ultima scelta dell’utente in modo che il ritorno all’homepage rispetti le sue preferenze.
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");
}
}
});
});
Il punto di interruzione di 768px corrisponde alla soglia del layout stretto di Discourse. Questo approccio è stato ispirato dalle indicazioni del team core di Discourse in questo thread a seguito delle modifiche all’API della viewport.
Testato su
- iPhone — atterra su Ultime
- :ipad: iPad (orizzontale) — layout a due colonne Categorie + Ultime
Desktop — layout a due colonne Categorie + Ultime
Installazione
- Vai su Admin → Personalizza → Temi → Installa → Da un repository git
- Inserisci:
https://github.com/shortmort37/discourse-mobile-latest-homepage - Installa come componente e aggiungilo al tuo tema attivo
Se sei nuovo nell’installazione di componenti dei temi, consulta la Guida per principianti ai temi di Discourse.
Note
- Gli utenti possono comunque navigare manualmente verso Categorie — la loro scelta viene rispettata per la sessione
- Il punto di interruzione di 768px può essere modificato nel file JS se necessario
- La scelta della sessione viene resettata alla chiusura del browser, quindi le nuove visite iniziano sempre su Ultime
Domande, feedback e PR sono benvenuti!