Templates

LAPLACE Chat 采用了现代的 CSS 架构，方便开发者对样式进行定制。配置器使用了 VS Code 的同款编辑器，为开发者提供了最好的开发体验

目前 LAPLACE Chat 提供了三种模版载入方式：

• 内置模版：由本站作者和第三方作者提供的内置免费模版，满足绝大多数的使用场景
• 远程模版：由第三方作者提供的远程模版，满足特定的使用场景和客制化的需求
• 高级 CSS 编辑器（自定义 CSS 样式）：由开发者或主播自行编写的 CSS 样式，满足任意定样式定制需求

云端载入（限内置模版）

当您开启本选项时，将会从本站内置的云端载入模版，该功能具有如下特性：

• 您不需要再在 OBS 中复制冗长的 CSS 样式，样式将始终保持最新状态
• 同时支持云端模版与自定义 CSS 样式，样式之间不冲突，自定义 CSS 样式将总是覆盖云端载入的样式
• 该选项可以用来解决一些主播不会配置样式的问题。以及由于弹幕机更新导致样式失效后无法及时更新样式的问题
• 解决个别第三方推流程序（例如哔哩哔哩直播姬）无法加载较长的自定义 CSS 的问题

该功能于 Apr 21, 2025 上线

远程模版

当您开启本选项时，将会从提供的 URL 中拉取可用的 CSS 样式。该特性可以方便开发者和设计师为 LAPLACE Chat 提供远程交付的 CSS 样式

测试模版：https://d3ksmgl05f2csh.cloudfront.net/assets/bubble-alt.css

该功能于 Apr 22, 2025 上线

高级 CSS 编辑器（自定义 CSS 样式）

最传统的模版定制方式，您可以在这里编写任意的 CSS 样式，然后将其复制到 OBS 中即可应用模版，该功能具有如下特性：

• 当您在配置器中载入了某个内置模版时，该模版的完整 CSS 代码将被载入到 CSS 编辑器中，您可以在此编辑此模版并提供实时的预览
• 如果您激活了「云端载入」功能时，此时 CSS 编辑器中的内容为参考样式，您可以删除其中大部分内容，仅保留您需要覆盖的 CSS 样式，然后将其复制到 OBS 的「自定义 CSS」中，即可覆盖云端模版的样式

模版优先级

LAPLACE Chat 的模版优先级按照下列顺序从低到高排列：

1. @layer template - 云端载入（内置模版）
2. @layer remote-css - 远程模版
3. @layer custom-css - 高级 CSS 编辑器（自定义 CSS 样式）

也就是说，自定义 CSS 将总是覆盖远程模版的样式；远程模版将总是覆盖云端载入的模版。三种载入方式可以同时存在

因此，利用此特性，您可以实现：

• 通过云端载入一款你喜欢的内置模版
• 在远程载入由他人基于此模版修改的二创样式
• 在自定义 CSS 中添加您自定义的样式

开发者：如何交付远程模版

作为开发者，如果您需要远程交付模版，则需要满足如下几个条件：

• 您需要提供一个可用的 CSS 文件，并且可以稳定的通过 HTTPS 访问
• CSS 的内容与您直接在配置器中编辑的自定义 CSS 相同，不需要额外的格式
• 不需要额外嵌套 @layer 层叠层
• CSS 文件尺寸小于 1024 KB（图片素材不计算在内）
• 放行所有来自 Cloudflare Workers 的 IP。通常来说不需要额外设置，如果您需要白名单放行，请参考 Cloudflare IP Ranges
• 放行所有来自 LAPLACE-Chat/* CSS-Preprocesssor 的 User Agent 请求（例如 LAPLACE-Chat/1.0 CSS-Preprocesssor）。通常来说不需要额外设置

鉴权

本站不会参与任何与鉴权、验证相关的流程，如果您提供的是付费模版，为了防止交付物被无授权使用，您可能需要自行实现鉴权逻辑，可能的方案为：

• 为不同的客户提供不同的 URL 地址，例如：
  • https://example.com/templates/12345.css
  • https://example.com/templates/67890.css
• 为不同的客户提供不同的验证参数，例如：
  • https://example.com/templates/bubble.css?token=1234567890
  • https://example.com/templates/bubble.css?token=0987654321

技术细节

• 本站的 CSS 预处理程序将会对模版的内容进行验证，以确认是合法的 CSS 样式
• CSS 预处理器会将模版缓存至多 30 分钟，因此当您交付的模版更新时，客户需要至多 30 分钟才能收到更新