把浏览器窗口拖窄,是体验主题最快的办法。四个主题的断点策略完全不同,值得逐一对比。

观察点

• 导航:Olivero 抽屉式 / Bootstrap 折叠按钮 / Radix 汉堡菜单。
• 卡片栅格:Bootstrap 系主题的 col-md-4 在中屏折叠为单列。
• 表格:SaaS 页的定价表在小屏上的可读性差异明显。

提示:手机上可以在任意 URL 后加 ?theme= 参数快速切换。

UI Suite Bootstrap 的思路是「把 Bootstrap 组件注册成 Drupal 的 Pattern」,编辑通过 SDC/布局选择组件并填参数,而不是写 HTML。

Site Builder 的体验差异

• 组件有参数表单:变体、尺寸、颜色、图标都可以配置。
• 样式与结构分离,UI Styles 提供所见即所得的样式选项。
• 同一组件在列表、区块、布局里复用,一致性天然保证。

体验地址:/builder-landing(建议配合 ?theme=ui_suite_bootstrap)。

SaaS 落地页的要素非常固定:Hero、功能三栏、定价表、行动召唤。Bootstrap 5 的组件库几乎就是为这类页面准备的。

为什么是 Bootstrap5 主题

• 开箱即用的栅格与工具类,营销页搭建速度极快。
• 表单、模态、折叠面板等交互组件自带 JS,无需额外依赖。
• 子主题 Starterkit 让定制成本可控。

体验地址:/saas-landing(建议配合 ?theme=themelab_bs5)。

Olivero 是 Drupal 9.5 起的核心前台主题,名字来自贡献者 Rachel Olivero。它证明了核心主题也可以有杂志级的排版水准。

值得注意的细节

• 导航栏滚动时自动收缩,移动端抽屉式菜单原生无障碍。
• 文章页有专门的窄版正文宽度,长文阅读非常舒服。
• 全部样式基于 CSS 变量,子主题换色只需十行代码。

在本站顶部导航切换到 ?theme=olivero 即可体验。

Drupal 11 时代,主题选型已经从「找一个全能主题」转向「按产品形态选栈」。本站把 ChatGPT 给出的四个 Profile 搭成一个可切换的实验环境,逐一体验。

四个 Profile

• Content — Olivero / 自定义 Starterkit,适合编辑部、杂志、文档站。
• Application — Bootstrap5 子主题,适合小工具、SaaS 落地页。
• Component — Radix 6,适合组件化开发的复杂产品。
• Site Builder — UI Suite Bootstrap,适合 Wix 式的搭建型产品。

每个 Profile 对应的编辑方式、代码量和自由度差异很大,详情见关于本站。

读者在 3 秒内决定是否继续阅读,而这三秒几乎完全交给主题去发挥。排版密度、行宽、字体层级、留白节奏——这些看起来是「设计细节」的东西,实际上是内容站的核心转化率指标。

内容站的三个评判标准

• 可读性:正文行宽建议 60–75 字符,行高 1.6 起步。
• 层级感:标题、导语、正文、引用必须有清晰的视觉阶梯。
• 安静:装饰元素不应与内容争夺注意力。

好的内容主题像一间光线充足的房间——你注意到的永远是内容,而不是墙纸。

本站用同一套文章内容分别在四种主题下渲染,建议重点观察列表页的节奏感和文章页的阅读体验。