إعادة ترتيب قائمة الشريط الجانبي في Discourse

تخصيص مكون السمة
1
:information_source: ملخص يسمح بإعادة ترتيب أقسام القائمة الجانبية الافتراضية والمخصصة
:eyeglasses: معاينة https://discourse.theme-creator.io/theme/Lilly/discourse-sidebar-menu-reorder
:hammer_and_wrench: المستودع https://github.com/Lillinator/discourse-sidebar-menu-reorder
:question: دليل التثبيت كيفية تثبيت سمة أو مكون سمة

تثبيت مكون السمة هذا

:bulb: مقدمة

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

:woman_technologist:t2: نظرة عامة

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

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

:wrench: التثبيت والإعداد

  • قم بتثبيت مكون السمة هذا وفقًا لـ دليل المبتدئين لاستخدام سمات Discourse.
  • يشير قسم community إلى القسم العلوي الافتراضي في القائمة الجانبية - القائمة التي تحتوي على عنوان المواضيع وتشمل القائمة الفرعية المنسدلة المزيد؛ يُوصى بنقل قسم واحد أو اثنين كحد أقصى (افتراضي أو مخصص) فوق قسم community.
  • لا تحذف أيًا من الأقسام الافتراضية في الإعداد، وإلا ستخرج عن الترتيب (يمكنك دائمًا إضافتها مرة أخرى أو إعادة تعيين الإعداد).
  • أفضل طريقة لإعداد هذا المكون هي فتح شاشة إدارة المكون مع إعداد قائمة إعادة الترتيب في نافذة متصفح واحدة، وعرض القائمة الجانبية للمنتدى كمستخدم تجريبي في نافذة أخرى بجانبها؛ قم بتحديث الصفحة بعد كل تغيير في ترتيب قسم القائمة في القائمة.
  • في إعداد إدارة المكون، تأكد من استخدام تنسيق التسمية (slug) للأقسام المخصصة وإلا سيتم تجاهلها (أي: استخدم custom-menu-name لـ “Custom Menu Name”، و useful-links لـ “Useful Links”، وهكذا).

:gear: الإعدادات

الإعداد الوصف
Sidebar menu order إعداد قائمة يحتوي على أقسام القائمة الافتراضية. (community هو القسم العلوي الافتراضي في القائمة الجانبية ويشمل القائمة الفرعية المنسدلة More. ) أعد ترتيب أقسام القائمة باستخدام الأسهم للأعلى والأسفل على الجانب. يمكن إضافة أقسام مخصصة مرئية عالميًا أيضًا - استخدم اسم القائمة (slug) (على سبيل المثال، لقائمة مخصصة بعنوان Test Menu، أضف test-menu في الإعداد).

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

screenshot of default component setttings

image
image1632×2188 262 KB

:camera_flash: لقطات الشاشة

تُظهر لقطات الشاشة أدناه قسم community، وقسمين مخصصين كمثالين للقوائم يُدعيان “Dev Links” (dev-links) و “Toolbox” (toolbox) كما يبدوان في لوحة إدارة المكون على اليسار، وللمستخدم العادي على اليمين. تُظهر الأسهم لتحريك قسم القائمة للأعلى والأسفل في إعداد إدارة المكون داخل المربع الأحمر الصغير.

image
image1709×1200 222 KB

هنا، تم تكوين الإعداد لإظهار قسم categories الافتراضي فوق قسم community (في وضعي الانكماش والتمديد):

image
image1632×2188 279 KB

image
image1363×2188 193 KB

image
image1462×2188 307 KB

إليك مثال باستخدام قسمين مخصصين: أحدهما يُسمى dev-links ويقع فوق قسم community الافتراضي، والآخر يُسمى toolbox ويقع أسفل قسم tags الافتراضي.

image
image1632×2188 281 KB

image
image1411×2188 280 KB

image
image1425×2188 266 KB

أيضًا، لاحظ القسم المسمى inbox-section في لقطة شاشة الإدارة أعلاه - هذا هو قسم Messages الذي يدرجه مكون قسم الرسائل للقائمة الجانبية في القائمة الجانبية (تحت القائمة المخصصة toolbox أعلاه)، مما يُظهر أن هذا المكون يمكن استخدامه لنقله أيضًا.

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

:backhand_index_pointing_right: ملاحظات

  • بعد إضافة أقسام مخصصة عالمية جديدة إلى إعداد sidebar_menu_order، سيرى مستخدمو المنتدى الترتيب الصحيح الجديد للقائمة عند إعادة تحميل متصفحهم أو طي/تمديد القائمة الجانبية.
  • قد يؤدي إنشاء أقسام قائمة مخصصة عالمية جديدة بينما يكون هذا المكون مفعّلًا إلى ظهور أقسام مكررة مؤقتة للمسؤول حتى يتم إعادة عرض القائمة الجانبية، إما عن طريق تحديث الصفحة أو عن طريق طيها وتمديدها.
  • ستظهر دائمًا أقسام القائمة المخصصة التي ينشئها المستخدم في أسفل القائمة الجانبية لذلك المستخدم، لكنها لا تتأثر بأي شكل آخر.
  • إذا تم تعيين إعداد Admin -> All Site Settings -> Chat Separate Sidebar Mode إلى Always، فستظهر زر الدردشة كالمعتاد في الأسفل، وسيتجاهل المكون أقسام قائمة الدردشة الافتراضية (chat-dms، chat-channels، و chat-search).
اطّلع على أشياء Discourse الأخرى الخاصة بي
27 إعجابًا
Configuring the default sidebar for your users
Discourse Group Sidebar Menus
Messages section for sidebar
2

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

4 إعجابات
3

هل ما زال هذا مدعومًا؟ حاولت التثبيت وحصلت على الخطأ التالي. لقد حاولت من هنا وكذلك باستخدام التعليمات اليدوية.

Screenshot_20260225-174622
Screenshot_20260225-1746221008×2244 182 KB

4

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

أو جرب هذا الزر

تثبيت مكون السمة هذا

إعجابَين (2)
5

لقد قمت للتو بتصحيح الرابط في زر التثبيت في المنشور الأصلي (OP) لذا كل شيء على ما يرام الآن.

4 إعجابات
6

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

هكذا أريده أن يبدو:

image
image458×851 33.5 KB
   
image
image1059×862 74.5 KB

عندما تكون لدي شاشة ذات حجم غريب (يبدو أن العرض يتراوح بين 640-820 تقريبًا)، أفقد الترتيب:

image
image670×862 60.9 KB

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

يا إلهي، عودة الشريط الجانبي ذي العمودين. اعتقدت أن هذا الشيء قد اختفى؟ سألقي نظرة…

4 إعجابات
8

لقد كنت أنا بالفعل غبياً بعض الشيء! كنت أستخدم المكون القديم ولم ألاحظ ذلك حتى.

ومع ذلك، لاحظت شيئًا واحدًا - ما كان يسمى community أصبح يسمى الآن the-forum. إليك طلب سحب (PR) لتنظيف ذلك في الإعدادات الافتراضية:

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

في المنتدى الخاص بي لا يزال يسمى community وهنا في ميتا أيضًا.

image
image1258×159 35.2 KB

أتساءل كيف قمت بتغييره.

إعجابَين (2)
10

هذا غريب بالفعل! أتذكر أنني غيرت النص عليه في مرحلة ما عندما أفكر في الأمر الآن. لكنني لست متأكداً كيف وصل ذلك إلى HTML!

سأقوم بسحب طلب السحب (PR) هذا وأفكر ملياً. قد يظل الأمر “غرابة” في موقعي!

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

يجب أن تكون قادرًا على تنفيذ بعض أوامر rails لإعادة تسميته. إذا كان القسم الخاص بك يسمى بالفعل the-forum، فأعتقد أن هذا يجب أن يعمل من وحدة تحكم rails:

cd /var/discourse
./launcher enter app
rails c

section = SidebarSection.find_by(title: 'the-forum', public: true)
if section
  section.update!(title: 'community')
  puts "تم: تمت إعادة التسمية إلى 'community'."
else
  puts "لم يتم العثور على القسم."
end

تأكد من عمل نسخة احتياطية أولاً.

3 إعجابات
12

لقد جربت هذا (أخيرًا). لكنه لم يعثر على القسم:

image
image1147×245 29.6 KB

أعتقد أن هذا قد يظل مجرد غرابة في الموقع، أليس كذلك؟

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

(حذف المنشور من قبل المؤلف)

إعجابَين (2)
14

ملاحظة: لقد قمت للتو بدفع بعض الإصلاحات الخاصة بالجوال لهذا المكون - فقد بدأ في عرض الخطوط الأفقية بين أقسام الشريط الجانبي والتي يجب أن تظهر فقط في عروض سطح المكتب/الأجهزة اللوحية.

إعجابَين (2)
15

أنا أستخدم هذا المكوّن الجميل للثيم جنبًا إلى جنب مع مكوّن ليلي الجميل بنفس القدر: Discourse Group Sidebar Menus. حالة الاستخدام الخاصة بي هي إنشاء قوائم مخصصة للعملاء، بحيث يتمكن كل فرد في المنظمة من الوصول إلى روابط سريعة ذات صلة به تحديدًا، مباشرة في الأعلى، بعد قسم المجتمع.

أود أن أشير للمسافرين في المستقبل (بمن في ذلك أنا) أن اسم قسم الشريط الجانبي حساس للغاية ويجب أن يطابق تمامًا، مع تحويل المسافات في الاسم إلى شرطات. إذن، “Doing business” تصبح “doing-business”.

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

هذه الميزات مهمة جدًا بالنسبة لي، لذا سأقدّر حقًا إذا تم النظر في إضافتها إلى النواة الأساسية، لتكون متاحة بسهولة أكبر وسهلة الاستخدام على أي موقع Discourse. :folded_hands:

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

شكرًا لك يا توبياس. لقد ذكرت بالفعل استخدام أسماء الأقسام (slugs) في وصف الإعداد، وهو ما يُشار إليه أيضًا في أمثلة لقطات الشاشة (انظر «dev-links» = DEV LINKS).[quote=“Lilly, post:1, topic:394049”]
يمكن إضافة أقسام مخصصة مرئية عالميًا أيضًا — استخدم اسم القائمة (slug) (على سبيل المثال، لقائمة مخصصة بعنوان «Test Menu»، أضف test-menu في الإعداد).
[/quote]

ربما يجب أن أضيف ذلك في مكان آخر غير أوصاف الإعدادات. :thinking:

تعديل: تم

4 إعجابات