Moderador, por favor, mova para a categoria apropriada.
Página Inicial Mais Recente no Mobile
Com a descontinuação de site.mobileView no Discourse 3.5, o componente de tema popular Force Mobile Homepage foi marcado como quebrado. Este componente é uma substituição que funciona com as versões atuais do Discourse.
Ele define a página inicial padrão como Mais Recente em telas estreitas, enquanto deixa as telas mais largas (iPad em modo paisagem, desktop) inalteradas. Também lembra a última escolha do usuário entre Mais Recente e Categorias durante a sessão do navegador.
Comportamento
iPhone / tela estreita — redireciona para Mais Recente por padrão
Usuário navega até Categorias — essa escolha é lembrada pelo restante da sessão do navegador
Sessão nova — sempre volta ao padrão de Mais Recente- :ipad: iPad (modo paisagem) / desktop — completamente inalterado, layout de duas colunas Categorias + Mais Recente permanece o mesmo
Como funciona
O componente usa window.matchMedia para detecção de viewport, setDefaultHomepage para definir o padrão e o service:router do Ember para redirecionar antes da renderização da página. O sessionStorage lembra a última escolha do usuário, para que ao retornar à página inicial, a preferência seja respeitada.
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");
}
}
});
});
O ponto de interrupção de 768px alinha-se ao limite do layout estreito próprio do Discourse. Essa abordagem foi baseada nas orientações da equipe principal do Discourse em este tópico, após as mudanças na API de viewport.
Testado em
- iPhone — redireciona para Mais Recente
- :ipad: iPad (modo paisagem) — layout de duas colunas Categorias + Mais Recente
Desktop — layout de duas colunas Categorias + Mais Recente
Instalação
- Acesse Admin → Personalizar → Temas → Instalar → A partir de um repositório git
- Digite:
https://github.com/shortmort37/discourse-mobile-latest-homepage - Instale como um componente e adicione-o ao seu tema ativo
Se você é novo na instalação de componentes de tema, consulte o Guia para Iniciantes sobre Temas do Discourse.
Observações
- Os usuários ainda podem navegar manualmente para Categorias — a escolha deles é respeitada durante a sessão
- O ponto de interrupção de 768px pode ser ajustado no arquivo JS, se necessário
- A escolha da sessão é resetada quando o navegador é fechado, então novas visitas sempre começam em Mais Recente
Dúvidas, feedback e PRs são bem-vindos!