Voglio sostituire l’animazione di avvio di Discourse con l’animazione Pulse. (controlla l’animazione in codepen)
Come dovrei fare?
Non lo so, ma vorrei sollevare un altro punto: se un utente vede l’animazione di avvio, ci sono problemi più grandi di come appare. E quando il googlebot lo vede e dà punteggi leggermente migliori, non gli importa come appare 
Il mio punto è
- come cambiare l’animazione non è importante
- correggere tutti i problemi per cui Discourse risponde così lentamente è qualcosa che dovrebbe essere risolto (principalmente a livello di server) e la soluzione su quell’asse potrebbe aver bisogno di supporto
Non ho visto più splash dopo… gli ultimi due aggiornamenti/upgrade. Ciò significa che Discourse è ora più veloce di prima.
1 Mi Piace
Il problema reale non è il problema del server o altro. Vengo dallo Sri Lanka. In questi giorni siamo in una massiccia crisi economica. A causa della crisi economica, le autorità stanno avviando tagli di corrente perché non possono gestire le centrali elettriche a combustibile. A causa di questi tagli di corrente, le società di telecomunicazioni hanno degradato la velocità dei loro servizi Internet per risparmiare il consumo di energia della batteria. Pertanto la nostra velocità Internet è troppo bassa in questi giorni.
5 Mi Piace
Beh, la situazione in Sri Lanka è davvero brutta, il tuo caso è un’eccezione, se/quando anche il tuo pubblico principale proviene dallo Sri Lanka.
Spero che qualcuno possa guidarti nella giusta direzione. Ma per quanto ne so, non può essere cambiato facilmente, però.
4 Mi Piace
Grazie amico. Vediamo come fare.
1 Mi Piace
Non credo sia possibile modificare da un tema, perché comporterebbe la modifica di un file erb; questo in particolare: discourse/app/views/common/_discourse_splash.html.erb at main · discourse/discourse · GitHub
Dato che la schermata di avvio si carica prima di gran parte dell’app Discourse, sospetto che sarebbe piuttosto complicato renderla personalizzabile? @Johani è corretto?
5 Mi Piace
È corretto 
La schermata di avvio viene caricata prima di qualsiasi JS/CSS principale. L’implementazione attuale non si concentra sulla personalizzazione, ma la v2 lo farà. Il piano è di servire l’immagine di avvio da localStorage per prestazioni leggermente migliori e poiché consente agli amministratori di impostare qualcosa di personalizzato tramite un tag script inline nel campo head_tag del tema.
Attualmente non c’è una data di scadenza per questo lavoro, e necessita di un po’ di test, ma è pianificato.
4 Mi Piace
Non è possibile modificare direttamente il template ERB dello splash da un tema, e poiché lo splash viene caricato prima del CSS/JS principale, la personalizzazione è complicata.
Il CSS che scrivi nelle normali schede CSS/SCSS del tema viene compilato e caricato solo dopo che viene visualizzato il caricatore splash. Quindi, anche se il tuo CSS funziona lì, i puntini originali appaiono brevemente al caricamento.
Detto questo, puoi sovrascrivere l’animazione splash iniettando CSS inline all’interno del head_tag del tema. Ciò garantisce che i tuoi stili vengano applicati immediatamente, evitando lo sfarfallio dei puntini predefiniti.
Ecco un esempio che sostituisce l’animazione predefinita dei puntini con un effetto Pulser simile a quello nel tuo 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>
Nota: il browser non può interpretare SCSS all’interno di un tag <style>. Quindi non puoi semplicemente inserire SCSS inline. Devi usare CSS invece di SCSS.
Il risultato:
Devi creare un nuovo componente tema, fare clic su Modifica codice, inserire il tag Head e incollare il blocco <style> sopra.
Salva e aggiorna il tuo sito con un ricaricamento forzato per vedere immediatamente la nuova animazione pulse allo splash.
Questa è una soluzione intelligente fino a quando Discourse non implementerà schermate splash più personalizzabili nell’aggiornamento pianificato v2.
5 Mi Piace