مكون عرض صندوق الفئات المحسّن

[oca]

discourse-theme-category-homepage

لقد عملتُ بشكل كبير على صفحة رئيسية جديدة بـ category-box لمجتمع منتداي. إنها مخصصة جدًا لاحتياجاتنا وقد لا تكون مفيدة للكثير من الأشخاص، لكن يمكن لأحد أن يستلهم منها أفكارًا.

بعد/قبل

حالة الاستخدام الخاصة بنا

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

تشكل كبار السن جزءًا كبيرًا من أعضائنا، وأي إجراء يستغرق أكثر من 3 نقرات يعتبر صعبًا جدًا بالنسبة لهم (لذا فإن إدارة مستوى الإشعارات بالطريقة المعتادة غير ممكنة بالنسبة لهم).

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

تنظيم المواضيع

تُستخدم الفئات الرئيسية كاستضافة للأهداف الرئيسية للمجتمع.
أي موضوع لا يشير إلى مجموعة ينتمي إلى الفئة الرئيسية الأقرب، ويمكن تسميته بعلامات (Tags). العلامة غالبًا ما تكون موجودة ضمن فئة رئيسية، لكن ليس بالضرورة.

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

وبالتالي، يمكن للمستخدم العثور بسهولة على جميع المحتوى المتعلق بأحد أهدافنا الرئيسية (الفئة الرئيسية)، أو حول موضوع محدد (علامة قد تكون مشتركة بين عدة أهداف)، أو حول مجموعة محددة (فئة فرعية عامة)، إلخ.

الميزات

• تمييز كل فئة لجعلها تبدو وكأنها قسم كامل من الموقع.
  • الكتابة بخط عريض وإضافة أيقونة لأي شيء يمكن النقر عليه، مما يسهل التركيز على الأشياء المهمة.
• إضافة عناصر إضافية لكل فئة:
  • العدد المعتاد للمشاركات
  • محدد مستوى الإشعارات
  • رابط “انقر هنا لعرض جميع المشاركات المتعلقة بهذا المجال” لتكون أكثر وضوحًا
• إضافة علامات مرتبطة بهذه الفئة
  • إضافة رأس لجعل هذه العناصر واضحة جدًا كالمواضيع الرئيسية التي نناقشها
  • يتم اختيار هذه العلامات من خلال إعدادات السمة (Theme)
  • تم تصميم عرض العلامات بحيث تبدو العلامات فعليًا كعلامات، بحيث يفهم المستخدم ما نتحدث عنه عند استخدام كلمة «علامة».
  • ملاحظة: يتم تحسين العرض بواسطة مكون أيقونة العلامة (Tag icon component)
• إضافة رأس للفئات الفرعية لجعلها واضحة جدًا بأن هذه الفئات مخصصة للإعلانات، ورأس آخر لجعلها واضحة جدًا بأن هذه الفئات الفرعية خاصة (نعم، يوجد قفل ويفهم أي مستخدم من المستوى المتوسط ذلك. ولكن…)
  • ملاحظة: يتم تحسين العرض بواسطة مكون أيقونة الفئة (Category icon component)
• معظم هذه الميزات يمكن تبديلها (toggle-able).

التثبيت

ملاحظة: هذا المكون لا يزال قيد التطوير. ما زلت أقوم بتحديثه، وإصلاح أخطاء CSS التي قمت بنشرها في أماكن أخرى، إلخ. يرجى التحلي بالرحمة وإخباري إذا بدا أي شيء غريبًا.

قم بتثبيت المكون كما هو معتاد. كيف أقوم بتثبيت سمة أو مكون سمة؟
المستودع: https://framagit.org/oca/discourse-theme-category-homepage.git

خارطة الطريق للتحسينات المستقبلية

[مكتمل] إصلاح العدد الهائل من أخطاء CSS.
[مكتمل] إصلاح الأمر الذي يفرض عرض فاصل/رأس للفئات الفرعية حتى لو لم تكن هناك فئة فرعية عامة أو خاصة.
[مكتمل] إنشاء صفحة فئة جميلة تعرض مربعات الفئات الفرعية والمواضيع.
[مكتمل] تحديث كل شيء بمجرد أن يقرر فريق Discourse أن الفئات الفرعية-الفرعية قد تصبح حقيقة (أعلم، دعني أتمنى…).

أنا منفتح على اقتراحات ميزات جديدة، لكنني سأضيفها في هذا المكون فقط إذا كانت تخدم حالة الاستخدام الخاصة جدًا بي أو إذا كانت سهلة التنفيذ للغاية. أي ميزة جديدة مضافة ستكون قابلة للتبديل (toggle-able).

[HAWK]

@oca

هل يمكن لأحد إضافة وضع الويكي حتى أتمكن من تحديث المنشور العلوي عند الحاجة وإضافة وسم theme-component؟

لا مشكلة، تم ذلك.

[torstensson (Per Torstensson)]

شكرًا جزيلاً لك على إنشاء هذا المكون الرائع، إنه مذهل!

سؤال واحد: هل من الممكن تفعيله مع إعداد الفئة “الصناديق مع المواضيع المميزة”؟ إذا لم يكن كذلك، فهل هذه ميزة يمكن تنفيذها، أم تتوقع أي مشاكل مع ذلك؟

كل التوفيق، ومجددًا شكرًا جزيلاً على إنشائك لهذا!

[oca]

@torstensson

سؤال واحد: هل من الممكن تفعيله مع إعداد الفئة “الصناديق مع المواضيع المميزة”؟ إذا لم يكن كذلك، فهل هذه ميزة يمكن تنفيذها، أم تتوقع أي مشاكل مع ذلك؟

مرحبًا، شكرًا لك.
ليس ممكنًا كما هو الحال حاليًا (فهو ليس الصندوق نفسه الذي يتم تعديله)، لكنه شيء يمكن تنفيذه بسهولة تمامًا. يمكنني مساعدتك في ذلك إذا أردت التحدث عبر الرسائل الخاصة، أو ربما ألقي نظرة عندما أجد بعض الوقت، لكن في هذه الحالة، أحتاج منك أن ترسم لي مخططًا لما تود (وكيف سيتم عرض الأشياء).

[torstensson (Per Torstensson)]

فهمت تمامًا.

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

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

كل التوفيق.

[oca]

واجهتُ بعض الصعوبات في فعل ذلك، لكن في النهاية لم يكن الأمر صعبًا إلى هذا الحد.

في مكون السمة (theme component)، قم بتعديل مكون هيندلبار (handlebar) ليشمل هذا الكود:

{{#each categories as |c|}}
  
  ...بعض الأشياء قبل الجرس...

  {{category-notifications-button
    value=c.notification_level
    onChange=(action "changeCategoryNotificationLevel" c)
  }}

  ...بعض الأشياء بعد الجرس...

{{/each}}

إذا لم تكن تعرف كيفية القيام بذلك، فإن دليل جوهاني هو “أول مكان جيد للنظر فيه”.

وإذا عثرت على طريقة للقيام بنفس الشيء مع الوسوم (tags)، فالرجاء إخباري! لم أتمكن من إيجاد طريقة للقيام بذلك.

[pmusaraj (Penar Musaraj)]

@oca لقد أجريت تغييرًا حديثًا في النواة يتسبب في فشل تجميع SCSS لمكون هذا السمات. الإصلاح بسيط جدًا، حيث يجب إزالة السطرين التاليين من ورقة الأنماط:

@import "common/foundation/variables";
@import "theme_variables";

(السطر الثاني يتسبب في خطأ تجميع SCSS لأن الملف لم يعد موجودًا. ومع ذلك، فإن كلا السطرين غير ضروريين، حيث يتم حقن متغيرات النواة والسمات الآن قبل تجميع أي ملف SCSS.)

[oca]

شكرًا للتوضيحات.

تم الإزالة.

[Fma965]

عمل رائع! هل هذا لا يعمل على الهاتف المحمول؟

CyanLabs Official Community

الهاتف المحمول

سطح المكتب

[Fma965]

أتمنى لو أستطيع معرفة كيفية جعل هذا يعمل على الهاتف المحمول، يبدو رائعًا على سطح المكتب ولكن إذا لم يكن قابلاً للاستخدام على الهاتف المحمول فهو بلا فائدة، أنا متأكد من أن هناك طريقة بسيطة ولكنني لست متأكدًا من كيفية القيام بذلك، هل لدى أي شخص أي اقتراحات؟

[Fma965]

عذرًا على النشر المتعدد

لقد تمكنت من تجميع Categories Layout Override ليعمل على الهاتف المحمول فقط

ثم باستخدام نسختي المعدلة GitHub - cyanlabs/discourse-categories-layout-override

يمكنني الآن تحديد التجاوز على أنه categories_boxes

مما يجبر عرض الهاتف المحمول على العرض المطلوب لكي يعمل هذا المكون الإضافي

جهاز لوحي

هاتف محمول

من الواضح أنها ليست حلاً مثاليًا ولكنه يعمل، لذا حتى يجد شخص ما حلاً أفضل، إليك حل بديل

[hoangphuctran93 (Hoàng Phúc Trần)]

شكراً لتخصيص المكون “Categories Layout Override”، ولكن هل يمكنك مشاركتي تخصيص المكون “Enhanced category-box display component”؟ لقد زرت موقعك، وأنا أقدر استخدامك لـ “background-color” للفئة “category-logo”

[hoangphuctran93 (Hoàng Phúc Trần)]

شكراً للتخصيصات الأخيرة، ولكن مع الترقية الأخيرة إلى الإصدار 3.2.0.beta 4-dev لم تعمل مكونات الثيم. آمل أيضاً أن يتم دمج تخصيصات العرض على الهاتف المحمول في جوهر Discourse. لأنني أريد تجربة متزامنة من سطح المكتب إلى الهاتف المحمول.

[Fma965]

للأسف ليس لدي فكرة عن كيفية إصلاحه.

[hoangphuctran93 (Hoàng Phúc Trần)]

مؤخرًا عند الترقية إلى أحدث إصدار، لم يعد مكون السمة “discourse theme category homepage” يعمل على الهاتف المحمول، وأستمر في تلقي الرسالة التالية

هذا هو موقعي https://businesslab.vn/categories

[david (David Taylor)]

مرحباً @hoangphuctran93، لقد نقلت مشاركتك إلى موضوع المكون ذي الصلة (تحية @oca)

[stephtara (Stephanie Booth)]

أوه، هذا يبدو وكأنه شيء سيكون مفيدًا جدًا لي! مجتمع دعم نشط مع مجموعة واسعة من المواضيع ولكن أشخاص من المرجح أن يبقوا في جزء فرعي صغير من الحديقة الضخمة، ومحو الأمية الرقمية منخفضة جدًا لدى الكثيرين. من المحزن رؤية أنه يبدو معطلاً، سأحاول استخدامه على أي حال. @oca هل ما زلت تستخدمه بنشاط من جانبك؟

[hellekin]

احذر من وسم #broken، فهو سوف يتعطل.

@stephtara

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

أقترح كتم جميع الفئات افتراضيًا، وإعداد مواضيع موسومة بـ #welcome لتقديم نظرة عامة على الفئات المتاحة. عندما تربط مجموعة بمتابعة فئة، يمكنك إنشاء تجربة تدريجية، حيث يمكن للأشخاص الانضمام إلى مجموعات لإلغاء كتم/اكتشاف الفئات. من خلال عدد قليل جدًا من المواضيع الترحيبية، يمكنك تزويد القراء بنظرة عامة عما هو متاح ومنحهم الخيار للمكان الذي يريدون المشاركة فيه. توثيق الإشعارات مهم أيضًا لتجنب الحمل الزائد للمعلومات.

[stephtara (Stephanie Booth)]

@hellekin

احذر من وسم #broken::tag، فهو سوف يتعطل.

شكرًا على التنبيه، ربما يجب أن أبتعد إذن…

@hellekin

توثيق الإشعارات مهم أيضًا لتجنب الحمل الزائد للمعلومات.

بالتأكيد!

[hellekin]

يمكنك محاولة تثبيت مكون السمة… ولكن ليس على نظام الإنتاج الخاص بك