使用自定义 SVG 图像为 Discourse 启动画面添加品牌标识

[awesomerobot (Kris)]

此功能在 Meta Personal branding for the splash screen 上被高度请求。

我们现在添加了添加静态或动画 SVG 作为启动画面图像的选项，以替换默认的加载点指示器：

如果使用静态 SVG，它会出现在加载点动画的上方：

否则，如果使用动画 SVG，它会完全替换这些点：

请注意，出于性能原因，动画 SVG 应仅使用 CSS transform 或 opacity 动画。[^\text{1}]

您可以通过我们的“即将进行的更改”系统（/admin/config/upcoming-changes）启用此功能：

splash screen image（启动画面图像）站点设置用于此目的。您可以在 SVG 中使用 var(--primary)、var(--secondary) 和 var(--tertiary) CSS 变量来引用主题的颜色并适应深色模式。

需要注意的是，启用此功能可能会影响您的 LCP 分数，因此最好的尝试方法是进行更改，等待一段时间，然后检查它是否对 LCP 或 Google Search Console 中的索引有任何影响。

[philh]

hmmmmm Discourse Logo with Throbber

[eisammy (Sammy)]

如何替换这些点？对我来说只显示放置我的 svg 标志

[Don]

你好

@awesomerobot

如果使用静态 SVG，它会出现在加载点动画的上方，如果使用动画 SVG，它会替换加载点动画：

所以如果你使用动画 SVG，它将被替换。

[ばこん (ばこん(bac0n))]

我应用了一个 SVG 动画，但它看起来非常小。

有没有办法把它放大？

[awesomerobot (Kris)]

我们目前没有添加自定义 CSS 的方法，因为此屏幕在应用程序的大部分内容加载之前加载，并且存在更多限制。您能在这里分享您正在使用的 SVG 图像（或私信我）吗？我可以进行一些测试，看看我们的默认设置是否可以提供更多兼容性。

[ばこん (ばこん(bac0n))]

在这里

[awesomerobot (Kris)]

感谢您的参考！

我正在添加一个更改，它将允许稍大一点的尺寸，并更好地居中带有静态标志的屏幕：UX: better centering and slightly larger experimental splash by awesomerobot · Pull Request #37574 · discourse/discourse · GitHub

我还注意到您的 SVG 顶部有很大的空白，这影响了居中，不确定这是否是故意的，但这个版本将其移除了

[ばこん (ばこん(bac0n))]

非常感谢！

[awesomerobot (Kris)]

请注意，我们在允许的 SVG 动画方面有了一个细微的改动（我已经更新了 OP 以反映这一点）。最初我们允许 SVG 中的 SMIL 动画，但事实证明这些动画会卡顿，因为浏览器在 JavaScript 执行时会暂停此类动画。

因此，现在的建议是只在 SVG 中使用 CSS transform 和 opacity 动画，因为这些不会被 JS 阻塞。

如果您看一下上面 @ばこん 的 SVG……它提供了一个可允许的动画的好例子：

@keyframes unique-slide {
  0% { transform: translateX(-80px); }
  100% { transform: translateX(260px); }
}

另外，请注意为您的动画指定唯一的名称，以免与 Discourse 中的其他动画冲突（“blink”、“rotate”、“fade”等名称可能过于通用）。使用像 unique- 这样的前缀是避免这种情况的好方法。