Moderador, por favor muévalo a la categoría correspondiente.
Inicio móvil más reciente
Con la depreciación de site.mobileView en Discourse 3.5, el componente de tema Forzar página de inicio móvil fue marcado como roto. Este componente es un reemplazo que funciona con las versiones actuales de Discourse.
Establece la página de inicio predeterminada en Más reciente en pantallas estrechas, mientras deja sin cambios las pantallas más anchas (iPad en horizontal, escritorio). También recuerda la última elección del usuario entre Más reciente y Categorías durante la duración de su sesión en el navegador.
Comportamiento
iPhone / pantalla estrecha — aterriza en Más reciente por defecto
El usuario navega a Categorías — esa elección se recuerda por el resto de su sesión en el navegador
Sesión nueva — siempre vuelve a ser Más reciente por defecto- :ipad: iPad (horizontal) / escritorio — completamente sin cambios, la vista de dos columnas Categorías + Más reciente permanece igual
Cómo funciona
El componente utiliza window.matchMedia para la detección del viewport, setDefaultHomepage para establecer la página de inicio predeterminada y service:router de Ember para redirigir antes de que se renderice la página. sessionStorage recuerda la última elección del usuario para que al volver a la página de inicio se respete su preferencia.
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");
}
}
});
});
El punto de interrupción de 768px coincide con el umbral de diseño estrecho propio de Discourse. Este enfoque se basó en la orientación del equipo central de Discourse en este hilo tras los cambios en la API de viewport.
Probado en
- iPhone — aterriza en Más reciente
- :ipad: iPad (horizontal) — dos columnas Categorías + Más reciente
Escritorio — dos columnas Categorías + Más reciente
Instalación
- Vaya a Administración → Personalizar → Temas → Instalar → Desde un repositorio git
- Ingrese:
https://github.com/shortmort37/discourse-mobile-latest-homepage - Instálelo como componente y agréguelo a su tema activo
Si es nuevo en la instalación de componentes de temas, consulte la Guía para principiantes sobre temas de Discourse.
Notas
- Los usuarios aún pueden navegar a Categorías manualmente; su elección se respeta durante la sesión
- El punto de interrupción de 768px puede ajustarse en el archivo JS si es necesario
- La elección de la sesión se restablece al cerrar el navegador, por lo que las nuevas visitas siempre comienzan en Más reciente
¡Preguntas, comentarios y PRs son bienvenidos!