Модератор, пожалуйста, переместите в соответствующую категорию.
Главная страница «Последние» для мобильных устройств
В связи с устареванием site.mobileView в Discourse 3.5 популярный компонент темы Force Mobile Homepage был помечен как нерабочий. Этот компонент является заменой, совместимой с текущими версиями Discourse.
Он устанавливает главную страницу по умолчанию на Последние на узких экранах, оставляя без изменений более широкие экраны (горизонтальный режим iPad, настольные компьютеры). Также он запоминает выбор пользователя между «Последние» и «Категории» на протяжении всей сессии браузера.
Поведение
iPhone / узкий экран — по умолчанию открывается страница «Последние»
Пользователь переходит в «Категории» — этот выбор запоминается до конца текущей сессии браузера
Новая сессия — всегда возвращается к странице «Последние» по умолчанию- :ipad: iPad (горизонтальный режим) / настольный компьютер — полностью unaffected, двухколоночный вид «Категории» + «Последние» остаётся без изменений
Как это работает
Компонент использует window.matchMedia для определения размера окна просмотра, setDefaultHomepage для установки главной страницы по умолчанию и service:router в Ember для перенаправления до отрисовки страницы. sessionStorage запоминает последний выбор пользователя, чтобы при возвращении на главную страницу учитывались его предпочтения.
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");
}
}
});
});
Точка остановки 768 пикселей соответствует собственному порогу узкой разметки в Discourse. Этот подход был разработан с учётом рекомендаций команды разработки ядра Discourse в этой теме после изменений в API представления.
Протестировано на
- iPhone — открывается страница «Последние»
- :ipad: iPad (горизонтальный режим) — двухколоночный вид «Категории» + «Последние»
Настольный компьютер — двухколоночный вид «Категории» + «Последние»
Установка
- Перейдите в Администрирование → Настройка → Темы → Установка → Из репозитория git
- Введите:
https://github.com/shortmort37/discourse-mobile-latest-homepage - Установите как компонент и добавьте в вашу активную тему
Если вы новичок в установке компонентов тем, ознакомьтесь с Руководством для начинающих по темам Discourse.
Примечания
- Пользователи всё ещё могут вручную переходить в «Категории» — их выбор учитывается на протяжении сессии
- Точку остановки 768 пикселей при необходимости можно изменить в JS-файле
- Выбор сессии сбрасывается при закрытии браузера, поэтому новые посещения всегда начинаются со страницы «Последние»
Вопросы, отзывы и pull-запросы приветствуются!