استخدام Discourse لبناء منصة تفاعلية بأسلوب مدونة أو Reddit أو X أو Facebook

أبدأ هذا الموضوع لتوثيق رحلتي أثناء محاولتي تحويل Discourse إلى منصة بصرية أكثر، تعتمد على التمرير المستمر — شيء أقرب إلى تجربة التصفح التي توفرها Reddit وX وFacebook.

سأستخدم هذا الموضوع لمشاركة ما أجربه، وما ينجح، وما لا ينجح، والمكونات التي أستخدمها، وأي مشكلات أواجهها. آمل أن يكون مفيدًا أيضًا لأي شخص آخر مهتم باستخدام Discourse لأغراض تتجاوز تخطيط المنتديات التقليدي.

نقطة البداية لهذا المشروع كانت قاعدة 90–9–1.

تقترح هذه القاعدة أنه على معظم منصات التواصل والمدونات وما شابه:

  • 90% من المستخدمين يتصفحون ويستهلكون المحتوى بشكل رئيسي.

  • 9% يردون أو يعجبون أو يشاركون أو يعلّقون من حين لآخر.

  • 1% ينشئون معظم المحتوى بنشاط.

من الواضح أن النسب الدقيقة ستتفاوت بين المجتمعات، لكن المبدأ يبقى ذا صلة: معظم الزوار قراء، وليسوا مشاركين.

Discourse ممتاز في خدمة الـ 9% والـ 1%. فهو مبني حول النقاشات والردود والمشاركة النشطة. ومع ذلك، أريد أن أجعله جذابًا بنفس القدر للمجموعة الأكبر بكثير التي تريد ببساطة فتح الموقع وتصفح محتوى جديد ومثير للاهتمام.

ما أحاول بناءه

أريد استخدام Discourse لإنشاء موجز أكثر بصرية واستمرارية (تمرير مستمر) مشابه لـ Reddit أو X أو Facebook.

سيبدو التجرية المثالية على النحو التالي:

  • فتح الصفحة الرئيسية ورؤية موجز للمواضيع ذات الصلة فورًا.

  • التمرير المستمر من موضوع إلى آخر.

  • معاينة محتوى الموضوع دون فتح صفحة منفصلة.

  • رؤية الصور والفيديوهات والمقتطفات مباشرة في الموجز.

  • الإعجاب أو الإضافة إلى المحفوظات أو الرد عندما يلفت انتباهك شيء ما.

  • تحريك المحتوى الذي تم تمريره سابقًا خارج المجال البصري تلقائيًا.

  • العودة لاحقًا لرؤية مواضيع جديدة أو لم تُعرض بعد، بدلاً من رؤية نفس الصفحة الرئيسية كل مرة.

  • تخصيص الموجز تدريجيًا باستخدام الفئات والوسوم والمواضيع التي يتفاعل معها المستخدم.

قد يسمي بعض الناس هذا “التمرير المظلم” (doom scrolling)، لكنه ببساطة أيضًا الطريقة التي يستهلك بها عدد هائل من الناس المحتوى عبر الإنترنت الآن. قد يقرؤون عشرات المنشورات دون أن يعلّقوا أبدًا، ومع ذلك فهم مستخدمون حقيقيون يولدون مشاهدات، ويشاركون الروابط، وقد يعودون كل يوم.

لماذا نبنيه مع Discourse؟

Discourse يوفر بالفعل معظم الأجزاء الصعبة:

  • حسابات المستخدمين والملفات الشخصية

  • الفئات والوسوم

  • الإعجابات والمحفوظات والإشعارات

  • مستويات الثقة والإشراف

  • إنشاء المواضيع والردود

  • تتبع المقروء وغير المقروء

  • المواضيع المقترحة والمواضيع ذات الصلة

  • نظام ناضج للإضافات ومكونات الثيم

ما يبدو أنه مفقود هو موجز مصمم بشكل أساسي حول الاكتشاف والاستهلاك السلبي. (من الواضح أن Discourse لم يُصمم ليكون بهذه الطريقة)

أين وصلت حتى الآن

  1. بدأت مع ثيم Redditish الرائع من @awesomerobot، والذي كان عليّ نسخه (fork) حتى أستطيع تعديل جوانب مختلفة مثل إزالة الشريط الجانبي المخصص. كما قمت بتعديل CSS بشكل كبير لتصميمه بالشكل الذي أردناه.
  2. تمكين Nested Views كان ضروريًا لأنه يغطي النمط المطلوب لهذا النوع من المواقع.
  3. صنعت وأضفت قائمة قابلة للتمرير بنمط YouTube تعرض جميع الفئات والروابط المخصصة. استخدمت Custom Top Navigation Links لتخصيص الروابط وإضافتها.
  4. كان نافذة معاينة الموضوع (modal) ضرورة، وبدأت بتصميم هذا، لكن الأسطورة @Don بنى نسخة أفضل يمكن العثور عليها هنا.
  5. كان الشريط الجانبي الأيمن الثابت والمخزن مؤقتًا (cached) في كل مكان ضرورة، فبدأت مع right sidebar blocks ثم صنعت مكون ثيم لعرضه على المواضيع وما شابه.
  6. باستخدام روابط الترويسة المخصصة (أيقونات)، أضفت زر “إنشاء منشور” في الترويسة لجعل الحاوية أنظف.
  7. جعلت الصور في المنشورات في المنتصف مع خلفية ضبابية لجعلها تبدو أنظف (مشابه لـ Reddit).
  8. جعل مقتطفات المواضيع 150 حرفًا وعرضها بين العنوان والصورة على بطاقات المواضيع كان ضروريًا (مشابه لـ Facebook وX).

الخطوات التالية ستكون موجز مخصص يمكنه:

  1. البدء بالمحتوى الأخير من فترة محددة، مثل الأيام الـ 14 السابقة.

  2. إعطاء الأولوية للمواضيع من الفئات والوسوم التي يتابعها المستخدم.

  3. خلط المواضيع الشائعة أو الرائجة للاكتشاف.

  4. تسجيل متى تم عرض موضوع بشكل حقيقي أو تم تمريره.

  5. تقليل أولوية المواضيع المعروضة دون إخفائها بشكل دائم.

  6. السماح بردود مباشرة وردود فعل من الموجز.

لن يحل هذا محل قوائم المواضيع التقليدية أو النقاشات. سيكون طريقة إضافية لاكتشاف واستهلاك نفس محتوى Discourse.

تابع الرحلة

سأستمر في تحديث هذا الموضوع مع تطور المشروع، بما في ذلك المكونات التي أجربها، والتغييرات التي أجريها، والعقبات التي أواجهها.

أنا مهتم أيضًا بالسمع من أي شخص حاول شيئًا مشابهًا، لا سيما فيما يتعلق بـ:

  • ما إذا كانت بيانات تتبع القراءة الحالية يمكن أن تدعم هذا.

  • كيف يمكن أن يعمل الموجز للمستخدمين المجهولين والمستخدمين المسجلين حديثًا.

  • مقدار التخصيص الذي يمكن تحقيقه دون إدخال خوارزمية توصيات معقدة.

  • ما إذا كانت معاينات المواضيع المستمرة ستخلق مشكلات أداء كبيرة.

الهدف هو الاعتراف بأن الـ 90% الصامتة جزء مهم من المجتمع، ومنحهم تجربة مصممة حول كيفية استخدامهم للإنترنت فعليًا.

الموقع التجريبي الذي سأستخدمه لهذا المشروع هو

https://www.m8wtf.com/

11 إعجابًا

أعجبني هذا كثيرًا — أنا أتابع الموضوع. لقد ألقيت نظرة سريعة جدًا على عرضك التجريبي وهو رائع! سأعود للتحقق منه عندما يتوفر لدي وقت.

4 إعجابات

حاولنا استخدام صفحة Unified New الموحدة في Discourse كصفحة رئيسية لأنها بدت وكأنها توفر بالضبط قائمة المنشورات التي نريدها. وذلك باستخدام إضافة تحذف المشاركات من /new عندما يمر المستخدم بها أثناء التمرير خارج نطاق العرض. (نجح @Don في جعل هذا يعمل)

وكان سبب الارتباك هو أنني كنت أختبر دائمًا Discourse باستخدام حساب قائم مسبقًا وتسجيل دخول، لذا كانت صفحة Unified New لدي مليئة دائمًا بالمشاركات. لم أفهم تمامًا كيف يعمل الأمر للمستخدمين الجدد تمامًا.

بعد إنشاء حساب اختبار جديد، اكتشفنا أن صفحة Unified New كانت فارغة تمامًا لأن المواضيع الأقدم لا تُعتبر “جديدة” بالنسبة لذلك المستخدم. وهذا يعني أنها لا يمكنها حاليًا توفير قائمة الصفحة الرئيسية الممتلئة التي كنا نخطط لها.

واو، شكرًا جزيلًا على تعليقك وعلى بعض الملاحظات الإيجابية. أعلم أن هذا ليس من الأمور التي تستهويك، وأنه يتعارض مع الغرض الأصلي من تصميم Discourse.

يعمل @don على إضافة جديدة تقدّم نظامًا جديدًا لنمط /feed وصفحة رئيسية. يعرض هذا النظام للمستخدمين المنشورات الجديدة الفعلية، ثم يزيلها إذا مرّ المستخدم عليها بالتمرير (باستخدام نافذة العرض). إذا تمت مشاهدة جميع المنشورات، يتم التحويل إلى /latest. هذا العمل ما زال قيد التطوير.

إعجاب واحد (1)

شكرًا جزيلًا لـ @don وخطّته الجديدة غير المُطلَقة بعد؛ فالإصدار أصبح يعمل الآن، مما يتيح للمستخدمين رؤية محتوى جديد دائمًا. ومع ذلك، حافظ على ردود العمل بنفس السلوك السابق، فهي لا تختفي عند تجاوز حدود العرض.

الآن، عند تسجيل المستخدمين الجدد، يعرض لهم جميع المنشورات من آخر 14 يومًا، لكن يمكن تعديل ذلك من خلال الإطار الزمني الافتراضي في الصفحة الرئيسية.

إعجابَين (2)

ما يلي على جدول الأعمال هو إنشاء مكوّن/إضافة لتخصيص الأخبار، على النحو التالي:

درجة الأخبار =

40% الاهتمامات
25% حداثة الخبر
15% السلوك السابق
10% شهرة الموقع
10% العشوائية/الاكتشاف

لذا سيبدو شريط الأخبار كالتالي:

إطلاق WARDOGS Early Access يوم الخميس
تحديث جديد لـ PS5 يسبب خللًا غريبًا في وحدة التحكم
شخص يبني سكوتر كهربائيًا بسرعة 70 ميلًا في الساعة
Netflix تؤكد إضافة جديدة لمسلسل Inbetweeners
قصة WTF من غلاسكو
قصة عشوائية شائعة عن الطعام والشراب

لمستخدم جديد، قد تكون النسب كالتالي:

25% الألعاب
15% التلفزيون والأفلام
15% أخبار WTF
15% التقنية
10% الطعام والشراب
10% الرياضة
10% المركبات والإثارة

ثم بعد أن يتصفح 30–50 منشورًا، يبدأ شريط الأخبار بالتكيّف.

أو فكرت في إنشاء مكوّن يختار فيه المستخدم اهتماماته (مثل الفئات) عند التسجيل:

ما هي اهتماماتك؟

:check_box_with_check: الألعاب
:check_box_with_check: أخبار WTF
:check_box_with_check: التقنية
☐ السياسة
:check_box_with_check: التلفزيون والأفلام
☐ الرياضة
:check_box_with_check: المركبات والإثارة
☐ الطعام والشراب

سيستغرق هذا الأمر وقتًا واختبارات.

إعجاب واحد (1)

أحبّ أن النقر على موضوع في الجوال يعرض لك معاينة للموضوع في نافذة منبثقة، حيث يمكنك اختيار المتابعة أو إغلاقها والعودة إلى صفحتك الرئيسية. عمل رائع!

إعجاب واحد (1)

هذا يعود إلى مكوّن سمة @don :wink: Topic Preview Modal

إعجابَين (2)

ما هو الهدف من هذه الرحلة؟ هل هو سمة، أو مكوّن، أو شيء موحّد؟ أم سمة مدمجة مع مكوّنات وما إلى ذلك؟

إنه شيء كنت أنتظره منذ سنوات. تجربة المستخدم في Discourse كانت دائمًا تمنعني من استخدامه. إنها… حقًا ليست… رائعة بقدر ما هو Discourse في حد ذاته.

أتمنى لك التوفيق في رحلتك.

عرضك التجريبي يبدو رائعًا على الجوال.

إعجاب واحد (1)

سيكون هناك دليل :slight_smile: سأرفع جميع المكونات التي قمت بإنشائها إلى GitHub مع روابط إلى مكونات قام آخرون بالفعل بإنشائها أو يعملون عليها. سيبدو الأمر خاطئًا مني أن أحزمها معًا نظرًا لأن الآخرين قد ساهموا بشكل كبير.

هذا بالضبط، الهيكل الأساسي رائع، ولهذا السبب استخدمت Discourse لأرى ما إذا كان بإمكاني تحقيق شيء لائق وليس Discourse المعتاد.

إعجاب واحد (1)

توجد بعض القوالب التي تتضمن مكوّنات مجمّعة. ربما ينبغي أخذ ذلك في الاعتبار. وربما يمكن استخدام أيقونات lucide بشكل عام؟

إعجاب واحد (1)

يبدو رائعًا حقًا. هناك إضافة theme-creator لتزيين منشورات صاحب الموضوع بعد نشره الأول.

حسنًا، عند النظر إلى موضوع آخر يحتوي على ردود، أرى أنك ربما تستخدم بالفعل شارة “مؤلف الموضوع” من Don.

عمل رائع جدًا.

إعجابَين (2)

لا، هذه بعض CSS مخصصة استخدمتها قبل أن أقوم بالتثبيت

إعجاب واحد (1)

مثل https://meta.discourse.org/t/topic-list-previews-tlp/209973/1؟

مثال جيد هنا: https://www.starzen.space/

ليس تمامًا، بل أكثر شيوعًا في الجزء الخلفي (Backend) وليس في المظهر البصري.

إعجاب واحد (1)

حسنًا، لقد قُدِّمتُ في مسار خاطئ بسبب هذه العبارة، وإذا كنت سأقيّم TLP بناءً على متطلباتك الأخرى:

  • افتح الصفحة الرئيسية وشاهد فورًا موجزًا للمواضيع ذات الصلة.

    :white_check_mark:

  • قم بالتمرير باستمرار من موضوع إلى آخر.

    :white_check_mark:

  • استعرض محتوى الموضوع دون فتح صفحة منفصلة.

    :white_check_mark: (على الرغم من أنه يمكن أن يكون أكثر تعقيدًا - لقد عملت على نسخة معدلة من Discourse تحتوي على نسخة أكثر تطورًا من هذه الميزة)

  • شاهد الصور والمقاطع الليلية والمقتطفات مباشرة في الموجز.

    2/3 :slight_smile: (لقد عملت على نسخة معدلة من Discourse تحتوي على نسخة أكثر تطورًا من هذه الميزة تعرض مقاطع فيديو حية في قائمة المواضيع :+1:)

  • أعجِب، أو احفظ، أو ردّ عندما يلفت انتباهك شيء ما.

    :white_check_mark:

  • انقل المحتوى الذي تم التمرير عليه مسبقًا بعيدًا عن النطاق تلقائيًا.

    :white_check_mark:

  • عد لاحقًا وشاهد مواضيع جديدة أو غير مقروءة بدلاً من رؤية نفس الصفحة الرئيسية في كل مرة.

    :white_check_mark:

  • خصّص الموجز تدريجيًا باستخدام الفئات والوسوم والمواضيع التي يتفاعل معها المستخدم.

    :cross_mark: ليس بعد، لكن على مستوى الخلفية (Back-end) الأمر مؤكد.

بالمناسبة، تم طرح هذا الموضوع من قبل، على سبيل المثال:

لقد قرأتها جميعها، لكن لا أحد قام بها فعليًا

إعجاب واحد (1)

أعرف على الأقل واحدًا، لكنه مغلوق المصدر.