الصفحة الرئيسية الأحدث للجوال - مكون المظهر

الدعم
1

مُعدّل، يرجى النقل إلى التصنيف المناسب.

الصفحة الرئيسية الأحدث للجوال

مع إيقاف دعم site.mobileView في إصدار Discourse 3.5، تم وضع علامة “معطّل” على مكون الثيم الشائع 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 لتعيين الصفحة الافتراضية، وخدمة 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 الأساسي في هذا الموضوع بعد تغييرات واجهة برمجة التطبيقات الخاصة بنافذة العرض.

تم اختباره على

  • :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.

ملاحظات

  • لا يزال بإمكان المستخدمين التنقل إلى “التصنيفات” يدويًا — ويُحتفظ باختيارهم طوال الجلسة
  • يمكن تعديل نقطة التقطيع عند 768 بكسل في ملف JS إذا لزم الأمر
  • يُعاد تعيين اختيار الجلسة عند إغلاق المتصفح، لذا تبدأ الزيارات الجديدة دائمًا بصفحة “الأحدث”

الأسئلة، التعليقات، ومساهمات السحب (PRs) موضع ترحيب!

2

مرحبًا، من أجل النشر في Customization > Theme component يجب أن تكون عضوًا في مجموعة Theme authors - Discourse Meta. هناك قالب للمواضيع يجب اتباعه، لذا بعد الموافقة، يُرجى النشر مرة أخرى.