Discourse Qingwa Timelines - BBCode مخصص لتخطيطات جداول زمنية جميلة

[scavin]

	ملخص	مكون سمة Discourse لإنشاء تخطيطات خطوط زمنية جميلة
	معاينة	https://meta.appinn.net/t/topic/76953
	المستودع	GitHub - scavin/discourse-qingwa-timelines
	دليل التثبيت	كيفية تثبيت سمة أو مكون سمة
	جديد في سمات Discourse؟	دليل المبتدئين لاستخدام سمات Discourse

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

يسعدني أن أشارك مكون سمة جديد يضيف تخطيطات خطوط زمنية أنيقة إلى مجتمع Discourse الخاص بك!

هذا هو أول مكون سمة لي، تم بناؤه بمساعدة LLM.

ما هو؟

Discourse Timelines هو مكون سمة ينفذ BBCode مخصص [timelines]...[/timelines] لإنشاء تخطيطات خطوط زمنية جميلة وبسيطة. مثالي لخرائط طريق المشاريع، والأدلة خطوة بخطوة، وتواريخ الشركات، وتقسيم الفصول، والمزيد.

تأثير الخط الزمني المنشور

زر شريط أدوات المحرر

عرض محرر Markdown

الميزات الرئيسية

BBCode مخصص - بناء جملة بسيط [timelines]
زر شريط أدوات المحرر - لا حاجة لكتابة العلامات يدويًا (يحل مشكلة هروب الأقواس في المحرر الجديد!)
تصميم جميل - خط تدرج عمودي بجمالية نظيفة وبسيطة
دعم Markdown - يحافظ على جميع التنسيقات داخل الخطوط الزمنية
متعدد اللغات - ترجمات مدمجة لـ 9 لغات (EN, ZH_CN, ZH_TW, DE, ES, FR, JA, KO, RU)
متوافق مع السمات - يعمل مع الوضعين الفاتح والداكن
قابل للتخصيص - تغيير الألوان بسهولة عبر إعدادات المسؤول
متجاوب - تخطيط مناسب للجوال
آمن - حماية XSS مدمجة
لا تبعيات - يستخدم واجهات برمجة تطبيقات Discourse الأصلية فقط

الاستخدام

استخدام زر شريط الأدوات (الأسهل!)

1. افتح المحرر
2. انقر على زر قائمة “+” (خيارات)
3. حدد “إدراج خط زمني”
4. قم بتحرير المحتوى الخاص بك
5. انشر!

يحل زر شريط الأدوات المشكلة حيث يقوم محرر Discourse الجديد تلقائيًا بتهريب الأقواس المربعة المكتوبة يدويًا.

مثال على بناء الجملة

[timelines]
## يناير 2024 - إطلاق المشروع
تم إطلاق المشروع رسميًا، وتم تشكيل الفريق.
​
## مارس 2024 - الإصدار الأول
اكتمل تطوير الوظائف الأساسية وبدأت الاختبار التجريبي.
​
## يونيو 2024 - الإصدار 2.0
تحديث رئيسي بميزات جديدة:
- الميزة أ
- الميزة ب
- الميزة ج
[/timelines]

التخصيص

يمكن تخصيص جميع الألوان عبر إعدادات السمة:

• timeline_gradient_start - لون التدرج العلوي (الافتراضي: #ff7a18)
• timeline_gradient_end - لون التدرج السفلي (الافتراضي: #ffb800)
• timeline_heading_color - لون نص العنوان (الافتراضي: #d96d14)
• timeline_dot_color - لون نقطة الخط الزمني (الافتراضي: #ff7a18)
• timeline_heading_color_dark - لون العنوان في الوضع الداكن (الافتراضي: #ff9854)
• timeline_dot_border_color_dark - حدود النقطة في الوضع الداكن (اختياري)

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

[Heliosurge (Dan DeMontmorency)]

هذه مكونات لطيفة جداً! مفيدة جداً.

[Heliosurge (Dan DeMontmorency)]

هل يدعم هذا أيضًا الصور/الفيديو؟

[scavin]

نعم، إنه يدعم الصور ومقاطع الفيديو.

إليك عرض توضيحي سريع[رابط العرض التوضيحي]

[Heliosurge (Dan DeMontmorency)]

حلو جداً بالفعل. عمل رائع!

[jordanjay29]

هل يعمل هذا مع DiscoTOC؟

يبدو أنه يعتمد على العناوين الأكبر، مما يجعله أقل مرونة قليلاً مع التسلسل الهرمي لجدول المحتويات.

[scavin]

لقد اختبرته باستخدام DiscoTOC ولم أجد أي مشاكل.

لقد أضفت جدول محتويات في صفحة العرض التجريبي — لا تتردد في فتحه ورؤية كيف يعمل.

[jordanjay29]

شكرًا لك على هذا المرجع.

عند استخدامه في منشور مع جدول المحتويات التلقائي (autoTOC)، فإنه يبرز بالاعتماد على تنسيق العنوان 2 والعنوان 3 (markdown). هل هناك أي طريقة لتحويله لاستخدام العنوان 4 أو 5 بدلاً من ذلك/بالإضافة إليه لمزيد من المرونة؟

إذا ظهر المخطط الزمني في مكان أبعد في التسلسل الهرمي لجدول المحتويات، مثل بعد عنوان 2 أو 3، فإنه يتسبب في أن يبدو جدول المحتويات غير مرتب بصريًا.

تعديل: يمكنني وضع هذا داخل وسوم [details] وهذا يزيل عناوين المخطط الزمني من الظهور في جدول المحتويات. حل بديل معقول لأغراضي على أي حال.

[scavin]

شكرًا على الاقتراح! سأبحث في كيفية تحسين هذا.

[scavin]

يمكنك الآن إبقاء عناوين الخط الزمني خارج جدول المحتويات (TOC) دون حلول بديلة:

استخدم العناوين الزائفة داخل [timelines] عن طريق إضافة البادئة ##! (لتنسيق H2) أو ###! (لتنسيق H3).

مثال:

[timelines]

##! 2020 – Foundation
المحتوى...
[/timelines]

يتم عرض هذه العناوين كـ H2/H3 داخل الخط الزمني ولكن لا يتم التعامل معها كعناوين حقيقية، لذا يظل جدول المحتويات التلقائي (autoTOC) مرتبًا بغض النظر عن مكان وجود الخط الزمني.

إذا كنت تريد أن تبقى عناوين الخط الزمني في جدول المحتويات، فاستمر في استخدام ##/### العادية.

في الوقت الحالي، إذا كان هناك حتى ##! واحد (أو ###!) داخل [timelines]، فسوف يتخطى جدول المحتويات الخط الزمني بأكمله.

خلط كلا النمطين في نفس الخط الزمني غير مدعوم بعد.

يمكنك مزجها الآن: لا يزال ##/### يظهران في جدول المحتويات، بينما يتم عرض ##!/###! فقط داخل الخط الزمني ويبقى خارج جدول المحتويات.

يرجى تحديث المكون وتجربته.

[jordanjay29]

هذه فكرة حل بديلة ذكية!

بدا أن هذا يعمل بشكل جيد لـ

[timelines]
##! 2020 - Foudnation
Content...
###! March
Content
[/timelines]

ولكن ليس لرأس زائف ثانٍ يتبع قائمة تنسيق أخرى:

[timelines]
##! 2020 - Foundation
* Listicle
###! March
Dooooooom!
[/timelines]

يفضل الرأس الزائف الأول أيضًا أن يكون متداخلاً مع وسم الفتح [timelines] لتجنب تنسيق سطر فارغ أعلاه. مثل:

[timelines]##! 2020 - Foundation
Content...
[/timelines]

وإلا سيكون هناك فجوة فوق الرأس الزائف الأول كما لو كان سطر كتلة زمنية عاديًا غير رأسي.

شكرًا لك على عملك في هذا الأمر، فقد أصبح مرنًا للغاية في الاستخدام الآن.

[scavin]

شكرًا على التنبيه.

أرى نفس الشيء. حاليًا، يتم عرض هذه بشكل صحيح:

  [timelines]##! 2020 - Foundation
  Content...
  [/timelines]

و

  [timelines]

  ##! 2020 - Foundation
  Content...
  [/timelines]

لكن هذا لا يعمل:

  [timelines]
  ##! 2020 - Foundation
  Content...
  [/timelines]

أنا أبحث في الأمر ولكني لم أستقر على الإصلاح الصحيح بعد.

[jordanjay29]

يبدو أن الشفرة تقوم بالتنشيط أيضًا في أي مكان يوجد فيه [timelines] في المنشور، حتى لو كان مغلفًا بعلامات اقتباس خلفية مثل أعلاه. لا يبدو أن الهروب باستخدام الشرطة المائلة العكسية \\[timelines] يحدث فرقًا أيضًا.

تحديث: تبدو علامات [timelines] و [/timelines] وكأنها تهرب من فواصل الأسطر وتظهر في نفس السطر مع أقرب نص في كتل الشفرة بثلاث علامات اقتباس خلفية ```

لذا

[timelines]
Blah
Blah
[/timelines]

يظهر كـ

[timelines]Blah
Blah[/timelines]

واجهت هذا أثناء كتابة دليل لاستخدامه، لذا من المحتمل أن تكون حالة طرفية فقط.