重构 Meta 品牌主题:新图标、自定义首页,以及 Blocks API 初探

我们刚刚发布了主题重构的第二版迭代。虽然第一次更新是在之前的 Meta Branded 主题基础上进行的视觉刷新,但这一版本实质上是一个从头开始重建的全新主题。新的品牌语言已在上一版本中引入,因此在这方面可见的变化并不多。此次更新带来的显著变化在于主题实现本身,以及它所展示的我们在 Discourse 自定义功能整体发展方向上的愿景。

我将逐步介绍一些实现细节,先从较小的改进开始:

Lucide 图标

Lucide 是一套开源的现代描边图标集,我们已在多个自定义项目中采用它。在此次迭代中,我们也将其集成到了 Meta Branded 主题中。Discourse 核心暂无计划替换 Font Awesome,但 Font Awesome 的免费版本仅提供有限的描边风格图标,不足以构成一套连贯的描边图标系统。该主题组件可在 github.com/discourse/discourse-lucide-icons 获取。

限制颜色方案的主题修饰符

我们新增了一个 only_theme_color_schemes 主题修饰符,用于限制特定主题可用的颜色方案,包括管理员界面和用户偏好设置中的选项。Meta 提供了多种用户可选的颜色方案,这些方案可能与 Meta Branded 主题的视觉识别体系产生冲突。通过该修饰符,仅将随主题捆绑的颜色方案作为选项提供。:link: 拉取请求:FEATURE: 添加用于限制主题颜色方案的修饰符

全宽布局

我们还在尝试对 Discourse 全宽组件 进行一些调整,以更好地将主要内容居中显示在页面上。由于页面头部存在大量动态元素,使得布局设置变得复杂,因此目前该功能仍处于实验阶段,仅在组件的一个分支上可用。

控制欢迎横幅显示的值转换器

我们使用了一个新的 welcome-banner-display-for-route 值转换器,以编程方式控制核心欢迎横幅在哪些路由上显示。我们利用该功能确保横幅仅显示在默认的自定义首页上,而不会出现在用户可能设置为个人落地页的其他页面上。:link: 拉取请求:DEV: 添加 welcome-banner-display-for-route 值转换器

接下来是两个更大的变更:

通过主题修饰符实现自定义首页

custom_homepage 主题修饰符已存在近两年,但这是我们首次将其用于塑造 Meta 自身的首页体验。我们推出了一款自定义落地页,其中包含精选组件。在初始发布版本中,该页面展示了精选分类以及最新讨论话题的预览。

这些精选组件是使用我们全新的实验性 Blocks API 构建的,这也引出了本次最大的变更:

Blocks API:首次生产环境应用

Blocks API 是 Discourse 中用于构建模块化、可组合布局的新框架。它允许主题开发者将页面由自包含、可复用的组件组装而成,并将这些组件放置到预定义的布局区域中。Meta 主题是我们首次在生产环境中部署该 API。

该框架提供丰富的开发者工具:启用开发者工具后,您可以使用内置覆盖层检查任何页面的块结构,该覆盖层可可视化所有活动的布局区域及其组件。

除了首页之外,我们还使用 Blocks 来渲染自定义分类横幅,展示每个分类的子分类:

这仍然是该系统在生产环境中的早期预览版本。我们计划很快发布相关文档和更多示例。:link: 拉取请求:DEV: 添加用于声明式、验证型 UI 扩展点的 Block API

14 个赞

这是一个很好的选择。当我在寻找适用于 Discourse 的图标集时,这套图标就引起了我的注意。它精致而优雅。

完全缺乏实心图标曾导致一些问题,例如未读指示器仅作为一个彩色圆圈显示,几乎不可见;或者深色/浅色模式切换按钮在没有实心部分的情况下难以正确渲染。

我注意到你在 meta 品牌主题中解决了这些问题。你为此添加了自定义图标吗?


顺便提一下,meta 品牌主题左上角的 Discourse 标志无法点击(据我所知,这种情况已经持续几个月了)::grimacing:

1 个赞

没有,我们只是没有将某些图标(如 circlesquare)映射到 Lucide 版本。更准确地说,对于这些图标,我们只映射了 Fontawesome 的描边版本(例如 far-circle 等)。可能还有其他情况需要我们继续改进映射。

例如,心形图标就比较棘手。我认为在已点赞时显示填充版本会更好,但到目前为止,我还不确定如何实现这一点。

我无法复现该问题,你能提供更多细节吗?

2 个赞

我很好奇,Blocks 带来了哪些 Plugin Outlets 所没有的区别?

仅在 Chrome 和 Edge 上进行了测试,且仅在桌面端出现此问题:

侧边栏切换 div 覆盖了标志,导致其无法点击。

(是的,带轮廓的点赞心形图标看起来确实不太美观:broken_heart)

1 个赞

我完全不喜欢当前“已回复”的图标:

我想这只是临时的,因为 Lucide 中没有合适的 FA 等价图标?


主题列表中的图标非常非常小:

2 个赞

我没想到会在官方主题中看到像 Lucide 这样的内容被加入,看起来真棒!不过,我希望心形图标是实心的。除了这个小细节外,在我看来,这个主题在移动端的表现非常出色。

看起来私信中正文部分没有内边距:

1 个赞

同意!

也同意上面的观点,空心爱心图标并不好。