أريد استبدال الرسوم المتحركة التمهيدية لـ Discourse بالرسوم المتحركة Pulse. (يرجى التحقق من الرسوم المتحركة في codepen)
كيف أفعل ذلك؟
لا أعرف، لكن أود طرح نقطة أخرى: إذا رأى المستخدم رسومًا متحركة للرش، فهناك مشكلات أكبر من شكلها. وعندما يراها جوجل بوت ويعطي درجات أفضل قليلاً، فهو لا يهتم كيف تبدو 
نقطتي هي
- كيفية تغيير الرسوم المتحركة ليست مهمة
- إصلاح جميع المشكلات التي تجعل Discourse يستجيب ببطء هو شيء يجب إصلاحه (في الغالب على مستوى الخادم) وقد يحتاج الحل على هذا المحور إلى بعض الدعم
لم أر أي رسوم متحركة للرش بعد… آخر تحديثين/ترقيات. هذا يعني أن Discourse أصبح أسرع الآن من ذي قبل.
إعجاب واحد (1)
المشكلة الحقيقية ليست مشكلة الخادم أو غيرها. أنا من سريلانكا. هذه الأيام نحن في أزمة اقتصادية هائلة. بسبب الأزمة الاقتصادية، بدأت السلطات في قطع التيار الكهربائي لأنها لا تستطيع إدارة محطات توليد الطاقة بالوقود. بسبب انقطاع التيار الكهربائي هذا، قامت شركات الاتصالات بتقليل سرعة خدمات الإنترنت الخاصة بها لتوفير استهلاك طاقة البطارية. لذلك فإن سرعة الإنترنت لدينا منخفضة للغاية هذه الأيام.
5 إعجابات
حسنًا، الوضع في سريلانكا سيء بالفعل، حالتك استثناء، إذا/عندما يكون جمهورك الرئيسي من سريلانكا أيضًا.
نأمل أن يرشدك أحدهم إلى الاتجاه الصحيح. ولكن على حد علمي، لا يمكن تغيير ذلك بسهولة.
4 إعجابات
شكرا يا صاح. لِنَرَى كيف نفعل ذلك.
إعجاب واحد (1)
لا أعتقد أنه من الممكن التعديل من سمة، لأن ذلك سيتضمن تعديل ملف erb؛ هذا الملف بالتحديد: discourse/app/views/common/_discourse_splash.html.erb at main · discourse/discourse · GitHub
نظرًا لأن شاشة البداية يتم تحميلها قبل جزء كبير من تطبيق Discourse، أشك في أنه سيكون من المعقد جدًا جعل هذا قابلاً للتخصيص؟ @Johani هل هذا دقيق؟
5 إعجابات
هذا صحيح 
يتم تحميل الشاشة المبدئية قبل أي ملفات JavaScript/CSS أساسية. لا يركز التنفيذ الحالي على التخصيص، ولكن الإصدار الثاني سيركز عليه. الخطة هي تقديم الصورة المبدئية من التخزين المحلي لتحسين الأداء بشكل طفيف، ولأنها تسمح للمسؤولين بتعيين شيء مخصص عبر علامة script مضمنة في حقل head_tag للقالب.
لا يوجد حاليًا موعد تقديري لهذا العمل، وهو يحتاج إلى بعض الاختبار، ولكنه مخطط له.
4 إعجابات
لا يمكنك تعديل قالب ERB التمهيدي مباشرة من سمة، ونظرًا لأن الشاشة التمهيدية تُحمّل قبل CSS/JS الأساسي، فإن التخصيص صعب.
يتم تجميع CSS الذي تكتبه في علامات تبويب CSS/SCSS العادية للسمة وتحميلها فقط بعد ظهور مُحمّل الشاشة التمهيدية. لذلك، حتى لو نجح CSS الخاص بك هناك، تظهر النقاط الأصلية لفترة وجيزة عند التحميل.
ومع ذلك، يمكنك تجاوز الرسوم المتحركة للشاشة التمهيدية عن طريق حقن CSS مضمن داخل head_tag للسمة. هذا يضمن تطبيق أنماطك على الفور، وتجنب وميض النقاط الافتراضي.
إليك مثال يستبدل الرسوم المتحركة الافتراضية للنقاط بتأثير Pulser مشابه للتأثير الموجود في Codepen الخاص بك:
<style>
:root {
--pulser-color-1: #ffcc00;
--pulser-color-2: #ff6347;
}
#d-splash .dots {
all: unset;
position: absolute;
width: 1.6em;
height: 1.6em;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#d-splash .dots[style*="--n:-2"] { transform: translate(-300%, -50%); }
#d-splash .dots[style*="--n:-1"] { transform: translate(-150%, -50%); }
#d-splash .dots[style*="--n:0"] { transform: translate(0%, -50%); }
#d-splash .dots[style*="--n:1"] { transform: translate(150%, -50%); }
#d-splash .dots[style*="--n:2"] { transform: translate(300%, -50%); }
#d-splash .dots::before,
#d-splash .dots::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid var(--pulser-color-1);
top: 0;
left: 0;
opacity: 0;
animation: pulse 1s ease-out infinite;
}
#d-splash .dots::before {
border-color: var(--pulser-color-2);
animation-delay: 0.3s;
}
@keyframes pulse {
0% {
transform: scale(0.5);
opacity: 0.6;
}
50% {
transform: scale(1.2);
opacity: 0.3;
}
100% {
transform: scale(1.8);
opacity: 0;
}
}
</style>
ملاحظة: لا يمكن للمتصفح تحليل SCSS داخل علامة <style>. لذلك، لا يمكنك ببساطة وضع SCSS مضمنًا. يجب عليك استخدام CSS بدلاً من SCSS.
النتيجة:
تحتاج إلى إنشاء مكون سمة جديد، والنقر فوق “تحرير الكود”، وإدخال علامة Head ولصق كتلة <style> أعلاه.
احفظ موقعك وأعد تحميله بتحديث قوي لرؤية الرسوم المتحركة النبضية المحدثة فورًا عند بدء التشغيل.
هذا حل بديل رائع حتى تنفذ Discourse شاشات تمهيدية أكثر قابلية للتخصيص في التحديث المخطط له v2.
5 إعجابات