如何更改 Discourse 启动动画？

支持
1

我想用 Pulse 动画替换 Discourse 的启动动画。（请在 codepen 中查看动画）

我该怎么做？

2

我不知道，但我想提出另一点：如果用户看到启动动画，那么存在比外观更严重的问题。而且当 Googlebot 看到它并给出稍好的分数时，它并不在乎外观 :wink:

我的观点是：

  • 更改动画不重要
  • 修复 Discourse 回复缓慢的所有问题是应该修复的（主要在服务器级别），并且 Axel 的解决方案可能需要一些支持

在……最近两次更新/升级后，我没有看到任何启动动画。这意味着 Discourse 现在比以前更快了。

1 个赞
3

实际问题并非服务器或其他问题。我来自斯里兰卡。这些天我们正经历严重的经济危机。由于经济危机，当局正在开始停电，因为他们无法管理燃料发电厂。由于这些停电，电信公司为了节省电池功耗而降低了互联网服务的速度。因此，我们这些天的网速太慢了。

5 个赞
4

这是现在的网速 :smiling_face_with_tear:

Screenshot 2022-07-28 at 3.53.30 PM
Screenshot 2022-07-28 at 3.53.30 PM1920×1200 84.9 KB

1 个赞
5

是的，斯里兰卡的情况确实很糟糕，如果你的主要受众也来自斯里兰卡，那么你的情况是个例外。

希望有人能指导你走向正确的方向。但据我所知，这并不容易改变。

4 个赞
6

谢谢，伙计。让我们看看怎么做。

1 个赞
7

我认为无法从主题进行编辑，因为它会涉及到编辑一个 erb 文件；具体来说是这个文件：discourse/app/views/common/_discourse_splash.html.erb at main · discourse/discourse · GitHub

由于启动屏幕在 Discourse 应用加载很多内容之前加载，我怀疑要使其可自定义会相当复杂？@Johani 是这样吗？

5 个赞
8

这是正确的 :+1:

闪屏会在任何核心 JS/CSS 加载之前加载。当前实现不侧重于自定义，但 v2 会。计划是从 localStorage 提供闪屏图像以略微提高性能，并且因为它允许管理员通过主题 head_tag 字段中的内联 <script> 标签设置自定义内容。

目前还没有此工作的 ETA，它需要一些测试，但它已计划。

4 个赞
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 个赞