Je veux remplacer l’animation d’accueil de Discourse par l’animation Pulse. (veuillez vérifier l’animation dans codepen)
Comment dois-je faire ?
Je ne sais pas, mais j’aimerais soulever un autre point : si un utilisateur voit une animation de démarrage, il y a des problèmes plus importants que son apparence. Et quand le googlebot la voit et donne de meilleurs scores, il ne se soucie pas de son apparence 
Mon point est :
- changer l’animation n’est pas important
- corriger tous les problèmes qui font que Discourse répond si lentement est quelque chose qui devrait être corrigé (principalement au niveau du serveur) et la solution à cet axe pourrait nécessiter un certain soutien
Je n’ai pas vu d’animations de démarrage depuis… les deux dernières mises à jour/montées en version. Cela signifie que Discourse est maintenant plus rapide qu’auparavant.
1 « J'aime »
Le vrai problème n’est pas un problème de serveur ou autre. Je viens du Sri Lanka. Ces jours-ci, nous traversons une crise économique massive. En raison de la crise économique, les autorités procèdent à des coupures de courant car elles ne peuvent pas gérer les centrales électriques à combustible. En raison de ces coupures de courant, les sociétés de télécommunication ont réduit la vitesse de leurs services Internet pour économiser leur consommation d’énergie de batterie. Par conséquent, notre vitesse Internet est très faible ces jours-ci.
5 « J'aime »
Eh bien, la situation au Sri Lanka est vraiment mauvaise, votre cas est une exception, si/quand votre public principal vient aussi du Sri Lanka.
J’espère que quelqu’un pourra vous guider dans la bonne direction. Mais à ma connaissance, cela ne peut pas être facilement modifié, cependant.
4 « J'aime »
Merci, mon ami. Voyons comment faire.
1 « J'aime »
Je ne pense pas qu’il soit possible de modifier à partir d’un thème, car cela impliquerait de modifier un fichier erb ; celui-ci en particulier : discourse/app/views/common/_discourse_splash.html.erb at main · discourse/discourse · GitHub
Étant donné que l’écran de démarrage se charge avant une grande partie de l’application Discourse, je soupçonne qu’il serait assez compliqué de le rendre personnalisable ? @Johani est-ce exact ?
5 « J'aime »
C’est exact 
Le splash se charge avant tout JS/CSS principal. L’implémentation actuelle ne se concentre pas sur la personnalisation, mais la v2 le fera. Le plan est de servir l’image splash depuis localStorage pour des performances légèrement accrues et comme cela permet aux administrateurs de définir quelque chose de personnalisé via une balise script en ligne dans le champ head_tag du thème.
Il n’y a actuellement pas de date d’échéance pour ce travail, et il nécessite un peu de test, mais c’est prévu.
4 « J'aime »
Vous ne pouvez pas modifier directement le modèle ERB de l’écran de démarrage à partir d’un thème, et comme l’écran de démarrage se charge avant le CSS/JS principal, la personnalisation est délicate.
Le CSS que vous écrivez dans les onglets CSS/SCSS normaux du thème est compilé et chargé uniquement après l’affichage du chargeur de démarrage. Ainsi, même si votre CSS fonctionne là, les points d’origine apparaissent brièvement au chargement.
Cela dit, vous pouvez remplacer l’animation de démarrage en injectant du CSS en ligne dans la balise head_tag du thème. Cela garantit que vos styles s’appliquent immédiatement, évitant ainsi le scintillement des points par défaut.
Voici un exemple qui remplace l’animation par points par défaut par un effet Pulser similaire à celui de votre 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>
Remarque : le navigateur ne peut pas analyser le SCSS dans une balise <style>. Vous ne pouvez donc pas simplement mettre du SCSS en ligne. Vous devez utiliser du CSS au lieu du SCSS.
Le résultat :
Vous devez créer un nouveau composant de thème, cliquer sur Modifier le code, entrer dans la balise Head et coller le bloc <style> ci-dessus.
Enregistrez et actualisez votre site avec un rechargement forcé pour voir immédiatement la nouvelle animation d’impulsion au démarrage.
C’est une solution de contournement astucieuse en attendant que Discourse implémente des écrans de démarrage plus personnalisables dans la mise à jour v2 prévue.
5 « J'aime »