شريط التقدم

[Canapin (Coin-coin le Canapin)]

	الملخص	أضف شريط تقدم إلى موقعك
	المعاينة	\[todo\]
	المستودع	\u003chttps://github.com/Canapin/Discourse-progress-bar\u003e
	دليل التثبيت	كيفية تثبيت سمة أو مكون سمة
	جديد في سمات Discourse؟	دليل المبتدئين لاستخدام سمات Discourse

Install this theme component

شريط تقدم Discourse

الوصف

يضيف هذا المكون شريط تقدم إلى أي منفذ متاح في موقعك.

يُفضل استخدامه مع البرامج النصية التي تقوم بتحديث قيمة شريط التقدم تلقائيًا عن طريق إرسال طلب PUT إلى /admin/theme/[theme_component_ID]/setting مع حمولة {\"name\":\"current_value\",\"value\":\"[yourNewValue]\"}.

تم تحسين شريط التقدم ليناسب المنافذ التالية:

• above-main-container
• above-site-header
• before-header-panel
• below-site-header
• before-sidebar-sections

حالة الاستخدام

تم تطوير هذا المكون لعرض تقدم التبرع بشكل علني في منتدى ممول مجتمعيًا.

استخدم برنامج نصي مخصص خطافات الويب الخاصة بـ Ko-fi لتحديث شريط التقدم ديناميكيًا لكل تبرع.

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

يمكن استخدام شريط التقدم هذا لأغراض أخرى بالطبع. شارك ما تستخدمه من أجله!

لقطات الشاشة

سطح المكتب

above-main-container

before-sidebar-sections

above-site-header

before-header-panel (سطح المكتب فقط)

below-site-header

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

above-main-container و below-site-header

before-sidebar-sections

above-site-header

الإعدادات

الإعداد	الوصف
content_before	النص المعروض فوق شريط التقدم (يُسمح بـ HTML). الافتراضي: \u003cstrong\u003eتقدم التبرعات\u003c/strong\u003e
content_after	النص المعروض أسفل شريط التقدم (يُسمح بـ HTML). الافتراضي: فارغ
progress_bar_width	عرض غلاف شريط التقدم. الافتراضي: 50%
progress_bar_height	ارتفاع شريط التقدم. الافتراضي: 10px
max_value	القيمة القصوى لشريط التقدم. الافتراضي: 300
current_value	القيمة الحالية لشريط التقدم. الافتراضي: 150
value_display	تنسيق عرض القيمة المعروض بجوار شريط التقدم. العناصر النائبة المتاحة: {current}، {max}، {percentage}. أمثلة: {percentage}% يعرض 33%. {current} of {max} rubber ducks يعرض 9 of 15 rubber ducks. الافتراضي: {percentage}%
hide_when_full	إخفاء شريط التقدم عندما يمتلئ. الافتراضي: false
outlet_name	موقع الموقع حيث يتم عرض شريط التقدم. المنافذ الموصى بها: above-main-container، above-site-header، before-header-panel، below-site-header، before-sidebar-sections. الافتراضي: above-main-container
display_on_mobile	إظهار شريط التقدم على أجهزة الهاتف المحمول. الافتراضي: true
display_on_homepage	إظهار شريط التقدم على الصفحة الرئيسية. الافتراضي: true
url_must_contain	عناوين URL التي يتم عرض شريط التقدم فيها. الافتراضي: `/latest
progress_bar_color	قيمة خلفية CSS صالحة. أمثلة: #FC0FC0 rgb(252,15,192) var(--tertiary) linear-gradient(0deg, white 0%, var(--tertiary) 100%) ملاحظة: إذا كانت فارغة، يتم استخدام لون ديناميكي من الأحمر (0%) إلى الأخضر (100%). الافتراضي: var(--tertiary)

شكرًا

شكرًا @Arkshine، على المساعدة العامة في التعليمات البرمجية والنصيحة