Ich möchte die Discourse-Splash-Animation durch die Pulse-Animation ersetzen. (Bitte überprüfen Sie die Animation in codepen)
Wie mache ich das?
Ich weiß es nicht, aber ich möchte noch einen Punkt ansprechen: Wenn ein Benutzer eine Splash-Animation sieht, gibt es größere Probleme als das Aussehen. Und wenn der Googlebot es sieht und ein wenig bessere Bewertungen gibt, ist es ihm egal, wie es aussieht 
Mein Punkt ist
- wie man die Animation ändert, ist nicht wichtig
- Beheben Sie alle Probleme, warum Discourse so langsam antwortet, ist etwas, das behoben werden sollte (hauptsächlich auf Serverebene) und die Lösung dafür könnte etwas Unterstützung benötigen
Ich habe keine Spritzer mehr gesehen… die letzten beiden Updates/Upgrades. Das bedeutet, dass Discourse jetzt schneller ist als zuvor.
1 „Gefällt mir“
Das eigentliche Problem ist nicht das Serverproblem oder etwas anderes. Ich komme aus Sri Lanka. In diesen Tagen befinden wir uns in einer massiven Wirtschaftskrise. Aufgrund der Wirtschaftskrise beginnen die Behörden mit Stromabschaltungen, da sie die Kraftwerke nicht mit Treibstoff versorgen können. Aufgrund dieser Stromabschaltungen haben Telekommunikationsunternehmen die Geschwindigkeit ihrer Internetdienste reduziert, um ihren Batterieverbrauch zu senken. Daher ist unsere Internetgeschwindigkeit in diesen Tagen zu niedrig.
5 „Gefällt mir“
Nun, die Situation in Sri Lanka ist tatsächlich schlecht. Ihr Fall ist eine Ausnahme, wenn Ihr Hauptpublikum ebenfalls aus Sri Lanka stammt.
Hoffentlich kann Ihnen jemand in die richtige Richtung weisen. Aber meines Wissens kann es nicht einfach geändert werden.
4 „Gefällt mir“
Danke, Kumpel. Mal sehen, wie es geht.
1 „Gefällt mir“
Ich glaube nicht, dass es möglich ist, von einem Theme aus zu bearbeiten, da dies das Bearbeiten einer erb-Datei beinhalten würde; speziell dieser hier: discourse/app/views/common/_discourse_splash.html.erb at main · discourse/discourse · GitHub
Da der Splashscreen geladen wird, bevor ein Großteil der Discourse-App geladen ist, vermute ich, dass es ziemlich kompliziert wäre, dies anpassbar zu machen? @Johani Ist das korrekt?
5 „Gefällt mir“
Das ist richtig 
Der Splashscreen wird geladen, bevor jeglicher Kern-JS/CSS geladen wird. Die aktuelle Implementierung konzentriert sich nicht auf die Anpassung, aber v2 wird dies tun. Der Plan ist, das Splash-Bild aus dem localStorage zu laden, um die Leistung leicht zu verbessern, und da es Administratoren ermöglicht, etwas Benutzerdefiniertes über ein Inline-<script>-Tag im head_tag-Feld des Themes festzulegen.
Es gibt derzeit keinen Zeitplan für diese Arbeit, und sie erfordert einiges an Tests, aber sie ist geplant.
4 „Gefällt mir“
Sie können die ERB-Splash-Vorlage eines Themes nicht direkt bearbeiten, und da der Splash vor dem Kern-CSS/JS geladen wird, ist die Anpassung schwierig.
Das CSS, das Sie in den normalen CSS/SCSS-Tabs des Themes schreiben, wird kompiliert und erst nachdem der Splash-Loader angezeigt wird, geladen. Selbst wenn Ihr CSS dort funktioniert, erscheinen die ursprünglichen Punkte beim Laden kurz.
Das heißt, Sie können die Splash-Animation überschreiben, indem Sie Inline-CSS in den head_tag des Themes einfügen. Dies stellt sicher, dass Ihre Stile sofort angewendet werden und das Standardflackern der Punkte vermieden wird.
Hier ist ein Beispiel, das die Standard-Punkteanimation durch einen Pulser-Effekt ersetzt, ähnlich dem in Ihrem 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>
Hinweis: Der Browser kann SCSS nicht innerhalb eines <style>-Tags parsen. Sie können also nicht einfach SCSS inline einfügen. Sie müssen stattdessen CSS anstelle von SCSS verwenden.
Das Ergebnis:
Sie müssen eine neue Theme-Komponente erstellen, auf “Code bearbeiten” klicken, den Head-Tag eingeben und den obigen <style>-Block einfügen.
Speichern Sie und aktualisieren Sie Ihre Website mit einem Hard Reload, um die aktualisierte Pulse-Animation sofort beim Splash zu sehen.
Dies ist eine clevere Problemumgehung, bis Discourse in der geplanten v2-Aktualisierung besser anpassbare Splash-Screens implementiert.
5 „Gefällt mir“