تخصيص شاشة البدء لـ Discourse بصور SVG مخصصة

[awesomerobot (Kris)]

لقد طُلب هذا الإجراء بشدة هنا على Meta Personal branding for the splash screen .

لقد أضفنا الآن خيار إضافة SVG، سواء كان ثابتًا أو متحركًا، كصورة شاشة البدء ليحل محل مؤشر التحميل الافتراضي هذا:

إذا تم استخدام SVG ثابت، فإنه يظهر فوق الرسوم المتحركة لنقطة التحميل:

وإلا إذا تم استخدام SVG متحرك، فإنه يحل محل النقاط تمامًا:

ملاحظة: لأسباب تتعلق بالأداء، يجب أن تستخدم الرسوم المتحركة SVG فقط تحويل CSS (CSS transform) أو رسوم متحركة للشفافية (opacity animations) فقط. ^[1]
يمكنك تمكين هذه الوظيفة عبر نظام التغييرات القادمة (Upcoming Changes) لدينا ( /admin/config/upcoming-changes):

يتم استخدام إعداد الموقع splash screen image لهذا الغرض. يمكنك استخدام متغيرات CSS var(--primary) و var(--secondary) و var(--tertiary) داخل ملف SVG الخاص بك للإشارة إلى ألوان السمة الخاصة بك والتكيف مع الوضع الداكن.

من المهم ملاحظة أن تمكين هذه الوظيفة قد يكون له تأثيرات على درجة LCP الخاصة بك، لذا فإن إجراء التغيير، والانتظار لفترة، والتحقق مما إذا كان له أي تأثير على LCP أو الفهرسة في وحدة تحكم بحث Google هو أفضل طريقة لتجربة هذا.

---

1. حاولنا في الأصل السماح بعناصر رسوم SMIL المتحركة (<animate>، <animateTransform>، إلخ) ولكن سيتم إيقاف هذه الرسوم المتحركة مؤقتًا بواسطة المتصفح عند تنفيذ جافاسكريبت، مما يسبب التلعثم. لا يتم حظر رسوم تحويل CSS أو رسوم الشفافية بواسطة JS، وتتجنب هذه المشكلة. ↩︎

[philh]

هممممم Discourse Logo with Throbber

[eisammy (Sammy)]

كيف يمكنني استبدال هذه النقاط؟ يظهر لي فقط لوضع شعار SVG الخاص بي

[Don]

مرحباً

@awesomerobot

إذا تم استخدام صورة SVG ثابتة، فإنها تظهر فوق الرسوم المتحركة للنقطة المتحركة، وإلا فإذا تم استخدام صورة SVG متحركة فإنها تحل محلها:

لذا سيتم استبدالها إذا استخدمت صورة SVG متحركة.

[ばこん (ばこん(bac0n))]

لقد طبقتُ رسومًا متحركة بصيغة SVG، لكنها تظهر صغيرة جدًا.

هل هناك طريقة لتكبيرها؟

[awesomerobot (Kris)]

ليس لدينا حاليًا طريقة لإضافة تنسيق CSS مخصص لأن هذه الشاشة تُحمَّل قبل جزء كبير من التطبيق وهناك المزيد من القيود. هل يمكنك مشاركة صورة SVG التي تستخدمها هنا (أو إرسالها لي على رسالة خاصة)؟ يمكنني إجراء بعض الاختبارات ومعرفة ما إذا كان من الممكن أن تكون الإعدادات الافتراضية لدينا أكثر ملاءمة.

[ばこん (ばこん(bac0n))]

إليك هو

[awesomerobot (Kris)]

شكرًا على الإشارة!

أنا أضيف تغييرًا سيسمح بأبعاد أكبر قليلاً، وسيقوم بمركزة الشاشات ذات الشعارات الثابتة بشكل أفضل: UX: better centering and slightly larger experimental splash by awesomerobot · Pull Request #37574 · discourse/discourse · GitHub

لاحظت أيضًا أن ملف SVG الخاص بك يحتوي على مساحة كبيرة في الأعلى مما يؤثر على التوسيط، لست متأكدًا مما إذا كان هذا مقصودًا، ولكن هذا الإصدار يزيلها

[ばこん (ばこん(bac0n))]

شكراً جزيلاً!

[awesomerobot (Kris)]

لاحظ أن هناك تغييرًا طفيفًا فيما نسمح به لتحريك SVG (وقد قمت بتحديث المنشور الأصلي ليعكس ذلك). في الأصل، كنا نسمح بتحريكات SMIL في ملفات SVG، ولكن اتضح أن هذه التحريكات تتقطع لأن المتصفح يوقف هذا النوع من التحريك أثناء تنفيذ جافاسكريبت (javascript).

لذا، بدلاً من ذلك، التوصية هي استخدام تحريكات transform و opacity فقط في ملفات SVG الخاصة بك، حيث لا يتم حظر هذه التحريكات بواسطة JS.

إذا ألقيت نظرة على SVG الخاص بـ @ばこん أعلاه… فإنه يقدم مثالاً جيدًا لتحريك مسموح به:

@keyframes unique-slide {
  0% { transform: translateX(-80px); }
  100% { transform: translateX(260px); }
}

كن حذرًا أيضًا في إعطاء تحريكاتك أسماء فريدة حتى لا تتعارض مع التحريكات الأخرى في Discourse (الأسماء مثل “blink” أو “rotate” أو “fade” وما إلى ذلك قد تكون عامة جدًا). استخدام بادئة مثل unique- هي طريقة رائعة لتجنب ذلك.