Drupal - 主题与布局

Drupal - 主题与布局

主题（Themes）控制着您 Drupal 站点的视觉外观，包括其样式、观感和响应式行为。布局（Layouts）决定了内容在不同页面上的排列方式。现代 Drupal 为这两者都提供了强大的工具。

Drupal 10+ 默认包含 ‘Olivero’ 作为前台主题，‘Claro’ 作为管理主题。Drupal.org 主题仓库还提供了许多其他免费和付费主题。

查找和安装主题

步骤 1: 查找主题

访问 Drupal 官方主题页面 (https://www.drupal.org/project/project_theme)。您可以按 Drupal 版本兼容性、维护状态和功能筛选主题。选择适合您需求的主题。

步骤 2: 安装主题

安装主题主要有两种方法：

方法 1: 使用 Composer (推荐)

Composer 是标准的 PHP 依赖管理器，也是向您的 Drupal 站点添加主题和模块的首选方法。

1. 打开终端或命令提示符，导航到您的 Drupal 项目根目录。

2. 运行命令：composer require drupal/theme_machine_name (例如，composer require drupal/bootstrap5)。将 theme_machine_name 替换为在 Drupal.org 页面上找到的实际主题机器名。

3. Composer 将会下载主题及其依赖项到 themes/contrib 目录。

方法 2: 使用 Drupal 管理界面 (Admin UI)

1. 在主题的 Drupal.org 页面上，找到兼容 Drupal 版本的 .tar.gz 或 .zip 文件的下载链接。您可以将此文件下载到您的计算机，或复制其 URL。

2. 在您的 Drupal 站点中，导航到 ‘管理’ > ‘外观’ (通常是 /admin/appearance)。

3. 点击 ’+ 安装新主题’ 按钮。

4. 您可以将复制的 URL 粘贴到 ‘通过 URL 安装’ 字段，或使用 ‘上传模块或主题存档文件安装’ 字段上传下载的文件。点击 ‘安装’。

Drupal 将会上传并解压主题到 themes/contrib 目录。

步骤 3: 启用并设为默认

1. 安装完成后，回到 ‘外观’ 页面 (‘管理’ > ‘外观’)。

2. 向下滚动到 ‘未安装的主题’ 部分。找到您新添加的主题，点击其 ‘安装’ 链接。

3. 安装后，它将移动到 ‘已安装的主题’ 部分。要将其设为站点的活动主题，点击其 ‘设为默认’ 链接。

有些主题有自己的设置页面，通过外观页面上主题旁的 ‘设置’ 链接即可访问。这允许进行主题特定的自定义（例如，配色方案、上传标志等）。

使用布局构建器管理布局

Drupal 的核心模块 ‘布局构建器’（Layout Builder） 提供了一个强大且直观的可视化界面，用于自定义内容布局。它允许站点构建者在每种内容类型的基础上，甚至针对单个内容项，将字段、区块和其他元素排列到节和区域中。

为内容类型启用布局构建器

1. 确保 ‘布局构建器’（Layout Builder）和 ‘布局发现’（Layout Discovery）模块已启用（‘管理’ > ‘扩展’）。

2. 前往 ‘管理’ > ‘结构’ > ‘内容类型’ (通常是 /admin/structure/types)。

3. 对于您想要自定义的内容类型（例如，‘文章’），点击 ‘操作’ 列中的下拉按钮，选择 ‘管理显示’。

4. 滚动到底部，勾选 ‘使用布局构建器’。如果您需要针对每个内容项进行布局覆盖，可能还需要勾选 ‘允许每个内容项自定义其布局’。

5. 点击 ‘保存’。现在将出现一个 ‘管理布局’ 按钮。

使用布局构建器

1. 点击内容类型的 ‘管理布局’ 按钮。

2. 布局构建器界面将会打开。您可以：

• 添加节：从预定义布局（例如，一列、两列、三列）中选择，以构建页面结构。
• 在节内添加区块：点击区域中的 ‘添加区块’ 以放置内容。这可以包括内容字段（如标题、正文、图像）、自定义区块、视图区块等等。
• 配置区块：每个区块都可以进行配置（例如，隐藏标题、自定义 CSS 类）。
• 拖放：轻松地重新排列节和区块。

3. 对布局满意后，点击 ‘保存布局’。

此布局现在将应用于该内容类型的所有内容。如果您启用了按内容项自定义，则在查看或编辑单个内容项时会看到一个 ‘布局’ 选项卡，允许为特定页面设置独特布局。

主题区域和区块布局

虽然布局构建器对于主要内容区域很强大，但主题也定义了 ‘区域’（例如，页眉、页脚、侧边栏）。您可以通过 ‘管理’ > ‘结构’ > ‘区块布局’（通常是 /admin/structure/block）将区块放置到这些主题区域中。这对于站点范围的元素很有用，例如标志、主导航或在许多页面上显示的侧边栏区块。

现代主题被设计为响应式的，使用 CSS 媒体查询使其布局适应不同的屏幕尺寸（桌面、平板电脑、移动设备）。具体的响应式设置通常由主题的 CSS 处理，而不是像一些旧的、高度专业化的主题那样通过直接的 Drupal UI 像素调整来处理。