如何更改 Discourse 启动动画？

支持
9

您无法直接从主题中编辑 ERB 启动模板，并且由于启动加载早于核心 CSS/JS，因此自定义起来很棘手。

您在主题的常规 CSS/SCSS 选项卡中编写的 CSS 会在启动加载器显示之后进行编译和加载。因此，即使您的 CSS 在那里有效，原始的点在加载时也会短暂出现。

话虽如此，您可以通过在主题的 head_tag 中注入内联 CSS 来覆盖启动动画。这可确保您的样式立即生效，从而避免默认的点闪烁。

下面是一个示例，它用类似于您在 Codepen 中的 Pulser 效果替换了默认的点动画：

<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>

请注意：浏览器无法在 <style> 标签中解析 SCSS。因此，您不能简单地将 SCSS 内联。您必须使用 CSS 而不是 SCSS。

结果：

pulsereffect

您需要 创建一个新的主题组件，点击“编辑代码”，进入“Head”标签并粘贴上面的 <style> 块。

保存并硬重新加载您的站点，即可立即在启动时看到更新的脉冲动画。

这是 Discourse 在计划中的 v2 更新中实现更可自定义的启动屏幕之前的一种巧妙的解决方法。

5 个赞