تخصيص شاشة البدء لـ 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- هي طريقة رائعة لتجنب ذلك.

[Falco]

أطلقت جوجل للتو Gemini Pro 3.1، وكان أبرز ما سلطت الضوء عليه للنموذج هو صور SVG المتحركة. وبشكل طبيعي، حاولت إنشاء أداة تحميل لـ https://discourse-on-a-pi5.falco.dev/ وحصلت على هذا بعد مجرد موجهين (prompts)

يتناسب بشكل جيد مع هذه الميزة الجديدة!

[Bas (Bas van Leeuwen)]

هذا مذهل يا فالكو

أحتاج أن أرى ما يمكن لـ Gemini فعله بشعار Discourse

[Falco]

نعم، لقد كنت سعيدًا جدًا بالنتيجة! كنت أحاول هذا لفترة طويلة مع النماذج، وهذا هو أول نموذج يمكنه التعامل معه بشكل جيد.

إليك الأمر الموجه (الـ prompt):

قم بإنشاء SVG متحرك سيتم استخدامه كرسوم متحركة للتحميل في منتدى حول لوحة الكمبيوتر المصغرة (mini board pc) من راسبيري باي. يجب أن يتم تنفيذ الرسوم المتحركة باستخدام CSS مضمن في SVG.

والذي أنتج:

ثم تابعت بـ:

هذا رائع! هل يمكنك تغيير حبات التوت (raspberry) نفسها، والسداسيات الحمراء، والرسوم المتحركة؟ إنها تتحرك قطريًا من أعلى اليسار إلى أسفل اليمين، لكنها خارج المركز ويبدو الأمر غريبًا. ربما نحتفظ بها ثابتة وفي المنتصف مع رسوم متحركة أكثر دقة؟

والذي أنتج النسخة التي شاركتها بعد ذلك:

نقطة الخلاف الوحيدة هي أن كود SVG يحتوي على الكثير من تعليقات CSS مثل:

/* Base Animation & Board Styles */

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

[Bas (Bas van Leeuwen)]

أنت تحصل على نتائج أفضل بكثير مني.

بعد التخلي عن بضع تكرارات، كان هذا أفضل ما حصلت عليه

[تعديل]، دعني أضف حالتين وسيطتين أخريين:
كان هذا جيدًا جدًا.. باستثناء أن الشعار كان معطلاً:

اعتقدت أن هذا كان الأكثر إثارة للاهتمام، لكنه لم ينجح حقًا كرسوم متحركة للشعار (ولسبب غير واضح تم عرضه كفيديو بصوت بدلاً من SVG):

---

آسف جميعًا لأخذ هذا الموضوع خارج المسار لنعد إلى الإعجاب بعمل فالكو ومناقشة شاشة البداية!

[Falco]

@Bas

أداؤك يتحسن كثيراً عن أدائي.

الاستسلام بعد بضع تكرارات

أخشى أن يكون قيد شعار Discourse صارماً للغاية بالنسبة له.

لقد جربت

قم بإنشاء SVG متحرك سيتم استخدامه كرسوم متحركة للتحميل في منتدى نقاش. يعمل المنتدى على Discourse، لذا يمكنه استخدام بعض زخارفه في ملف SVG، مثل فقاعات الكلام الملونة بألوان قوس قزح ربما؟ يجب أن يتم الرسوم المتحركة باستخدام CSS مضمن في SVG.

وحصلت على

[Falco]

يجب أن نقيم مسابقة لشعار Discourse متحرك!

[Canapin (Coin-coin le Canapin)]

@Bas

نتائجك أفضل بكثير من نتائجي.

هل فكرت في ضبط Gemini على الوضع “الاحترافي” (pro)؟ قد لا يكون هذا هو الوضع الافتراضي.

[keegan (Keegan George)]

@Falco

يجب أن نقيم مسابقة لشعار Discourse المتحرك!

لقد حاولت إنشاء واحد يتماشى مع أسلوب العلامة التجارية الجديد

[noahl (Noah Lovell)]

@Falco

يجب أن نقيم مسابقة لشعار Discourse متحرك!

حسنًا - أعتقد أنني أنضم الآن إلى هذا الاتجاه

الموجه

حوّل هذا إلى SVG متحرك.

القواعد:

• يجب أن يكون SVG متحركًا
• سيعمل كأيقونة تحميل بين الصفحات، لذا يجب أن يكون خفيًا وبسيطًا.

الفكرة:

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

يجب عليك الحفاظ على هوية العلامة التجارية، وعدم كسر تصميمها العام - هذا أمر ضروري للعلامة التجارية.

الناتج (بعد 3 مراجعات):