把浏览器窗口拖窄,是体验主题最快的办法。四个主题的断点策略完全不同,值得逐一对比。
观察点
- 导航: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 起步。
- 层级感:标题、导语、正文、引用必须有清晰的视觉阶梯。
- 安静:装饰元素不应与内容争夺注意力。
好的内容主题像一间光线充足的房间——你注意到的永远是内容,而不是墙纸。
本站用同一套文章内容分别在四种主题下渲染,建议重点观察列表页的节奏感和文章页的阅读体验。