Mobile-Latest-Homepage – Theme-Komponente

Unterstützung
1

Moderator, bitte in die entsprechende Kategorie verschieben.

Mobile Latest Homepage

Mit der Abschaffung von site.mobileView in Discourse 3.5 wurde die beliebte Force Mobile Homepage-Themenkomponente als defekt markiert. Diese Komponente ist ein Ersatz, der mit aktuellen Discourse-Versionen funktioniert.

Sie setzt die Standard-Startseite auf Latest auf schmalen Bildschirmen, während breitere Bildschirme (iPad im Querformat, Desktop) unverändert bleiben. Zudem merkt sie sich die letzte Wahl des Nutzers zwischen Latest und Kategorien für die Dauer der Browsersitzung.

Repository: GitHub - shortmort37/discourse-mobile-latest-homepage: A theme component that redirects mobile users to Latest instead of Categories on the homepage · GitHub

Verhalten

  • :iphone: iPhone / schmaler Bildschirm — landet standardmäßig auf Latest
  • :left_right_arrow: Nutzer navigiert zu Kategorien — diese Wahl wird für den Rest der Browsersitzung gespeichert
  • :arrows_counterclockwise: Frische Sitzung — geht immer standardmäßig zurück zu Latest
  • :ipad: iPad (Querformat) / Desktop — völlig unberührt, zweispaltige Kategorien + Latest unverändert

Funktionsweise

Die Komponente verwendet window.matchMedia zur Erkennung der Viewport-Größe, setDefaultHomepage, um die Standardseite festzulegen, und Embers service:router, um eine Weiterleitung vor dem Rendern der Seite durchzuführen. sessionStorage merkt sich die letzte Wahl des Nutzers, sodass bei der Rückkehr zur Startseite dessen Präferenz berücksichtigt wird.

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");
      }
    }
  });
});

Der Breakpoint von 768 px entspricht der eigenen Schwelle für schmale Layouts in Discourse. Dieser Ansatz orientiert sich an den Empfehlungen des Discourse-Kernteam in diesem Thread nach den Änderungen an der Viewport-API.

Getestet auf

  • :iphone: iPhone — landet auf Latest :white_check_mark:
  • :ipad: iPad (Querformat) — zweispaltige Kategorien + Latest :white_check_mark:
  • :desktop_computer: Desktop — zweispaltige Kategorien + Latest :white_check_mark:

Installation

  1. Gehe zu Admin → Anpassen → Themen → Installieren → Aus einem Git-Repository
  2. Gib ein: https://github.com/shortmort37/discourse-mobile-latest-homepage
  3. Als Komponente installieren und zum aktiven Theme hinzufügen

Wenn du neu beim Installieren von Themenkomponenten bist, lies die Anfängeranleitung zu Discourse-Themen.

Hinweise

  • Nutzer können weiterhin manuell zu Kategorien navigieren — ihre Wahl wird für die Sitzung berücksichtigt
  • Der Breakpoint von 768 px kann bei Bedarf in der JS-Datei angepasst werden
  • Die Sitzungsentscheidung wird beim Schließen des Browsers zurückgesetzt, sodass neue Besuche immer bei Latest starten

Fragen, Feedback und PRs sind willkommen!

2

Hallo, um in Customization > Theme component posten zu können, musst du Teil der Gruppe Theme authors - Discourse Meta sein. Es gibt eine Vorlage für Themen, die befolgt werden sollte. Bitte poste dies also erneut, sobald du genehmigt wurdest.