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

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

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

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

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

ما هو؟

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

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

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

عرض محرر Markdown

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

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

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

20 إعجابًا

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

3 إعجابات

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

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

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

Screen-20251114144915@2x
Screen-20251114144924@2x

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

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