Comment changer l'animation de démarrage de Discourse ?

Soutien
9

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 :

pulsereffect

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 »