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

[Lilly (Lillian)]

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

تثبيت مكون الموضوع هذا

مقدمة

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

نظرة عامة

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

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

---

التثبيت والتكوين

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

---

الإعدادات

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

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

لقطة شاشة لإعدادات المكون الافتراضية

---

لقطات شاشة

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

---

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

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

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

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

---

ملاحظات

• بعد إضافة أقسام مخصصة عامة جديدة إلى إعداد sidebar_menu_order، سيشاهد مستخدمو المنتدى ترتيب القائمة الصحيح الجديد عند إعادة تحميل متصفحهم أو طي/توسيع الشريط الجانبي.
• يمكن أن يؤدي إنشاء أقسام قائمة مخصصة عامة جديدة أثناء تفعيل هذا المكون إلى ظهور أقسام مكررة مؤقتًا للمسؤول حتى يتم إعادة عرض الشريط الجانبي، إما من خلال تحديث الصفحة أو من خلال الطي والتوسيع.
• ستظهر دائمًا أقسام القائمة المخصصة التي أنشأها المستخدم في أسفل الشريط الجانبي لذلك المستخدم، ولكنها لا تتأثر بأي حال من الأحوال.
• إذا تم تعيين إعداد الإدارة -> جميع إعدادات الموقع -> وضع الشريط الجانبي المنفصل للدردشة على دائمًا، فستظهر زر الدردشة كما هو معتاد في الأسفل، وسيهمل المكون أقسام قائمة الدردشة الافتراضية (chat-dms و chat-channels و chat-search).

---

تصفح مشاريعي الأخرى في Discourse

[David_Ghost]

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

[R23D_Printing]

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

[Moin]

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

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

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

[nathank (Nathan Kershaw)]

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

[nathank (Nathan Kershaw)]

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

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

   

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

[Lilly (Lillian)]

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

[nathank (Nathan Kershaw)]

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

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

Update settings.yml (#3)

[Moin]

@nathank

ما كان يسمى community يسمى الآن the-forum بدلاً من ذلك

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

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

[nathank (Nathan Kershaw)]

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

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

[Lilly (Lillian)]

يجب أن تكون قادرًا على تنفيذ بعض أوامر 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

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

[nathank (Nathan Kershaw)]

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

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

[Lilly (Lillian)]

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

[Lilly (Lillian)]

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

[tobiaseigen]

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

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

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

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

[Lilly (Lillian)]

@tobiaseigen

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

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

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

تعديل: تم

@Lilly

• في إعدادات إدارة المكون، تأكد من استخدام تنسيق التسمية بالـ slug للأقسام المخصصة وإلا سيتم تجاهلها (أي: استخدم custom-menu-name بدلاً من «Custom Menu Name»، و useful-links بدلاً من «Useful Links»، وهكذا).