manuel
2026 年4 月 7 日 09:44
1
我们刚刚发布了主题重构的第二个版本。虽然第一次更新是在之前的 Meta Branded 主题基础上进行的视觉刷新，但这一版本本质上是一个从头开始重建的全新主题。新的品牌语言已在上一版本中引入，因此在这一方面并没有太多可见的变化。此次更新带来的显著变化是主题本身的实现方式，以及它所展示的我们在 Discourse 自定义方向上的整体愿景。
我将逐步介绍一些实现细节，先从较小的改进开始：
Lucide 是一套开源的现代描边风格图标，我们已在多个自定义项目中开始采用它。在此次迭代中，我们也将其集成到了 Meta Branded 主题中。Discourse 核心目前没有计划替换 Font Awesome，但 Font Awesome 的免费层级仅提供有限的描边风格图标，不足以构成一套统一的描边图标系统。该主题组件可在 Discourse Lucide 图标 页面获取。
我们新增了一个名为 only_theme_color_schemes 的主题修饰符，用于限制特定主题可用的颜色配色方案，既适用于管理员，也适用于用户在界面偏好设置中的选择。Meta 拥有多个用户可选的配色方案，这些方案可能会与 Meta Branded 主题的视觉识别系统产生冲突。通过该修饰符，仅将随主题捆绑的配色方案作为选项提供。FEATURE: 添加限制主题配色方案的修饰符
我们还对 Discourse 全宽组件 进行了一些调整，以更好地将页面主要内容居中显示。由于页头包含大量动态元素，使得布局设置变得复杂，因此目前该功能仍处于实验阶段，仅在组件的某个分支中可用。
我们使用了一个新的值转换器 welcome-banner-display-for-route，以编程方式控制核心欢迎横幅在哪些路由上显示。我们利用该功能确保横幅仅显示在默认的自定义主页上，而不会出现在用户可能设置为个人落地页的其他页面上。DEV: 添加 welcome-banner-display-for-route 值转换器
接下来是两项更大的变更：
custom_homepage 主题修饰符已存在近两年，但这是我们首次将其用于塑造 Meta 本身的主页体验。我们推出了一自定义落地页，其中包含精选组件。在初始发布阶段，该页面包括高亮的精选分类以及最新讨论主题的预览。
这些精选组件是使用我们新的实验性 Blocks API 构建的，这也引出了本次最大的变更：
Blocks API 是一个用于在 Discourse 中构建模块化、可组合布局的新框架。它允许主题开发者将页面由自包含、可复用的组件组装而成，这些组件可放置到预定义的布局区域中。Meta 主题是我们首次在生产环境中部署该框架。
该框架提供丰富的开发者工具支持：启用开发者工具后，您可以使用内置覆盖层检查任何页面的区块结构，该覆盖层可可视化所有活动的布局区域及其组件。
除了主页之外，我们还使用区块来渲染自定义分类横幅，展示每个分类的子分类：
这仍然是该系统在生产环境中的早期预览版本。我们计划很快发布相关文档和更多示例。DEV: 添加用于声明式、验证型 UI 扩展点的 Block API
19 个赞
Canapin
2026 年4 月 7 日 10:18
5
这是一个很好的选择。当我在寻找适用于 Discourse 的图标集时，这套图标就引起了我的注意。它精致而优雅。
完全缺乏实心图标曾导致一些问题，例如未读指示器仅作为一个彩色圆圈显示，几乎不可见；或者深色/浅色模式切换按钮在没有实心部分的情况下难以正确渲染。
我注意到你在 meta 品牌主题中解决了这些问题。你为此添加了自定义图标吗？
顺便提一下，meta 品牌主题左上角的 Discourse 标志无法点击（据我所知，这种情况已经持续几个月了）：
1 个赞
manuel
2026 年4 月 7 日 10:26
6
没有，我们只是没有将某些图标（如 circle 和 square）映射到 Lucide 版本。更准确地说，对于这些图标，我们只映射了 Fontawesome 的描边版本（例如 far-circle 等）。可能还有其他情况需要我们继续改进映射。
例如，心形图标就比较棘手。我认为在已点赞时显示填充版本会更好，但到目前为止，我还不确定如何实现这一点。
我无法复现该问题，你能提供更多细节吗？
3 个赞
我很好奇，Blocks 带来了哪些 Plugin Outlets 所没有的区别？
2 个赞
Canapin
2026 年4 月 7 日 12:25
8
仅在 Chrome 和 Edge 上进行了测试，且仅在桌面端出现此问题：
侧边栏切换 div 覆盖了标志，导致其无法点击。
（是的，带轮廓的点赞心形图标看起来确实不太美观：broken_heart）
1 个赞
Canapin
2026 年4 月 7 日 12:45
9
我完全不喜欢当前“已回复”的图标：
我猜这只是临时的，因为 Lucide 中没有合适的 FA 等价图标？
主题列表上的图标非常非常小：
编辑：在其他主题中也是如此。
分类图标看起来比标签图标小，这很奇怪。我觉得所选分类图标的整体尺寸受到了方框分类样式的限制，导致可用空间较少……
3 个赞
我没想到会在官方主题中看到像 Lucide 这样的内容被加入，看起来真棒！不过，我希望心形图标是实心的。除了这个小细节外，在我看来，这个主题在移动端的表现非常出色。
看起来私信中正文部分没有内边距：
2 个赞
嗯……我觉得有一处可以调整：将聊天图标从 message-square-text 改为 message-square？那些线条看起来有点分散注意力。这样改动会让界面更“清爽”，是个不错的调整。
1 个赞
manuel
2026 年4 月 7 日 16:20
13
感谢大家关于图标的所有反馈！我刚刚为这套图标创建了一个专属话题：Discourse Lucide 图标 。
理想情况下，我们希望在那里收集更多反馈，并在过程中不断完善这套图标。
ToddZ
2026 年4 月 8 日 09:20
14
同意，当前 0.74em 下的图标几乎无法辨认。它们需要大约 1em 的大小。
1 个赞
ToddZ
2026 年4 月 9 日 13:19
15
是我的错觉，还是话题列表中的垂直内边距今天变大了？要么内容没那么紧凑了，要么是我变笨了。
1 个赞
我也注意到了这一点，尝试手动回退（因为我更看重信息密度而非外观），但没成功：(
manuel
2026 年4 月 9 日 16:55
17
从设计角度来看，主要区别在于 PluginOutlet 是一个插入点。你需要将组件直接注入到核心模板中。每一次自定义实际上都会改变应用的结构。
而 BlockOutlet 是一个布局框架。你可以将一个或多个组件注册到该框架中。随后，自定义操作在该框架内进行，而不是在应用模板中。因此，我们能够获得更可预测且更稳定的布局。
另一个重大区别是，Blocks API 能够处理完整的条件渲染逻辑。你无需在组件中添加这些逻辑。块组件可以专注于内容和模板，从而大幅减少重复逻辑。
1 个赞
darkpixlz:
但运气不佳
如果任何人希望拥有一个更紧凑的主题列表，以下是我成功的做法：
.topic-list .topic-list-data {
padding: 8px 0px;
line-height: 0px;
}
Canapin
2026 年4 月 10 日 11:50
19
新的 Meta 品牌主题在移动端对我来说留白过多。
屏幕边缘与内容容器之间有 1 个单位的间距
页面容器与实际内容之间有 2 个单位的间距
其他主题都没有这个屏幕边缘与内容容器之间的第一处间隙。
这使得内容在水平方向上显得有些“挤压”，可用空间非常有限。在“我的帖子”页面上与 Horizon 主题对比时尤为明显：
Horizon 主题可以在不牺牲可读性的前提下展示更多内容。
我理解设置紫色“轮廓”背景的用意，是为了让主题的品牌元素在全内容页面上得以体现，但我认为在那些狭窄的屏幕上，我们因此损失了太多空间。
还有一些小批评：
左上角的图标并非完美的圆形，而是略微呈扁圆形。
分类/标签弹出窗口中的文本区域有轻微溢出（不确定是否与当前主题有关）：
。如果能将其完全覆盖会更好。
1 个赞
拉取请求：FEATURE: 添加限制主题配色方案的修饰符
