移动端最新首页 - 主题组件

支持
1

版主，请将其移至相应分类。

移动端最新首页

随着 Discourse 3.5 中 site.mobileView 的弃用，流行的 Force Mobile Homepage 主题组件被标记为失效。本组件是一个兼容当前 Discourse 版本的替代方案。

它会将窄屏下的默认首页设置为最新，同时保持宽屏（iPad 横屏、桌面端）不变。此外，它还会在用户浏览器会话期间记住其在“最新”和“分类”之间的最后选择。

代码仓库： GitHub - shortmort37/discourse-mobile-latest-homepage: A theme component that redirects mobile users to Latest instead of Categories on the homepage · GitHub

行为表现

  • :iphone: iPhone / 窄屏 — 默认进入“最新”页面
  • :left_right_arrow: 用户导航至“分类” — 该选择将在整个浏览器会话期间被记住
  • :arrows_counterclockwise: 新会话 — 始终默认回到“最新”页面
  • :ipad: iPad（横屏）/ 桌面端 — 完全不受影响，双栏“分类”+“最新”布局保持不变

工作原理

该组件使用 window.matchMedia 进行视口检测，通过 setDefaultHomepage 设置默认首页，并利用 Ember 的 service:router 在页面渲染前进行重定向。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");
      }
    }
  });
});

768px 的断点与 Discourse 自身的窄布局阈值保持一致。这一方案参考了 Discourse 核心团队在 此讨论帖 中提供的指导，该帖涉及视口 API 变更后的相关建议。

测试环境

  • :iphone: iPhone — 默认进入“最新”页面 :white_check_mark:
  • :ipad: iPad（横屏）— 双栏“分类”+“最新”布局 :white_check_mark:
  • :desktop_computer: 桌面端 — 双栏“分类”+“最新”布局 :white_check_mark:

安装步骤

  1. 进入 管理 → 自定义 → 主题 → 安装 → 从 Git 仓库安装
  2. 输入：https://github.com/shortmort37/discourse-mobile-latest-homepage
  3. 作为组件安装，并将其添加到您的活动主题中

如果您是首次安装主题组件，请参阅 Discourse 主题入门指南。

注意事项

  • 用户仍可手动导航至“分类”页面 — 其选择将在会话期间被尊重
  • 如需调整，可在 JS 文件中修改 768px 的断点
  • 浏览器关闭后会话选择将被重置，因此每次新访问都会从“最新”页面开始

欢迎提出问题、反馈意见或提交 PR！

2

你好，要在 Customization > Theme component 中发帖，您必须是 Theme authors - Discourse Meta 组的成员。有一个主题模板需要遵循，因此请在获得批准后再次发布此内容。