كيفية تغيير الرسوم المتحركة لشاشة البداية في Discourse؟

الدعم
9

لا يمكنك تعديل قالب 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.

النتيجة:

pulsereffect

تحتاج إلى إنشاء مكون سمة جديد، والنقر فوق “تحرير الكود”، وإدخال علامة Head ولصق كتلة <style> أعلاه.

احفظ موقعك وأعد تحميله بتحديث قوي لرؤية الرسوم المتحركة النبضية المحدثة فورًا عند بدء التشغيل.

هذا حل بديل رائع حتى تنفذ Discourse شاشات تمهيدية أكثر قابلية للتخصيص في التحديث المخطط له v2.

5 إعجابات