Skip to content
W3S101

Drupal - 区块与区域

Drupal - 理解区块 (Blocks) 和区域 (Regions)

Section titled “Drupal - 理解区块 (Blocks) 和区域 (Regions)”

区块 (Blocks) 和区域 (Regions) 是 Drupal 中用于构建和显示网站内容的两个基本概念。区块是独立的内容单元（例如搜索栏、最新文章列表或自定义 HTML），可以放置到主题中称为区域的特定位置（例如侧边栏、头部或底部）。

什么是区块 (Blocks)？

Section titled “什么是区块 (Blocks)？”

区块是可以呈现在网站布局不同部分的盒子状内容单元。Drupal 提供了多种类型的区块，包括：

  • **核心区块 (Core Blocks)：**由 Drupal 核心模块提供（例如，‘搜索表单 Search form’、‘用户登录 User login’、‘网站品牌 Site branding’、‘Powered by Drupal’）。
  • **自定义区块 (Custom Blocks)：**通过用户界面 (UI) 由网站管理员创建，用于显示自定义文本、HTML 或富媒体内容。这些在 ‘自定义区块库 Custom block library’ 中进行管理。
  • **模块提供的区块 (Module-Provided Blocks)：**许多贡献模块 (Contributed modules) 提供它们自己的区块（例如，一个显示内容列表的 Views 区块，一个菜单区块）。
  • **通过编程定义的区块 (Programmatically Defined Blocks)：**开发者可以使用 Drupal 的插件 API (Plugin API) 通过自定义模块创建区块。

什么是区域 (Regions)？

Section titled “什么是区域 (Regions)？”

区域是主题中预定义的区域，区块可以放置在这些区域中。每个主题都定义了自己可用的区域集合。常见的区域包括：

  • 头部 (Header)
  • 主菜单 (Primary Menu)
  • 侧边栏第一区 (Sidebar First) / 侧边栏第二区 (Sidebar Second)
  • 内容区域 (Content)（主要内容区域，通常不直接用于放置通用区块，而是用于显示主要页面内容）
  • 底部 (Footer)

您可以通过导航至 ‘结构’ > ‘区块布局’ (Structure > Block layout) 并点击 ‘演示区块区域 (Olivero)’ (Demonstrate block regions (Olivero)) 链接来可视化区域（请将 ‘Olivero’ 替换为您当前启用的主题名称）。

管理区块：区块布局页面

Section titled “管理区块：区块布局页面”

用于管理区块并将其放置到区域中的主要界面是 ‘区块布局’ 页面。

步骤 1：导航至区块布局

在 Drupal 后台管理菜单中，导航至 ‘结构’ > ‘区块布局’ (/admin/structure/block)。

说明：此页面显示所有主题区域及其当前已放置的区块列表。

创建自定义区块

Section titled “创建自定义区块”

让我们创建一个包含一些文本的简单自定义区块。

步骤 2：访问自定义区块库

在 ‘区块布局’ 页面上，点击 ‘自定义区块库’ (Custom block library) 选项卡（或导航至 /admin/structure/block/block-content）。

点击 ’+ 添加自定义区块’ (+ Add custom block) 按钮。

说明：您可以在此管理可重复使用的自定义区块。

步骤 3：定义自定义区块

将出现一个表单。填写详细信息：

  • **区块描述 (Block description)：**此区块的管理名称（例如，‘欢迎消息区块’ Welcome Message Block）。这将显示在区块列表中。
  • **主体 (Body)：**使用富文本编辑器输入您的区块内容。您可以添加文本、图片、链接等。选择合适的 ‘文本格式’ (Text format)（例如，基础 HTML Basic HTML、完整 HTML Full HTML）。

点击 ‘保存’ (Save)。

说明：保存后，此自定义区块现在可在您的库中使用并进行放置。

将区块放置到区域中

Section titled “将区块放置到区域中”

现在，让我们将自定义区块（或任何其他区块）放置到主题区域中。

步骤 4：返回区块布局并放置区块

返回到 ‘区块布局’ 选项卡 (/admin/structure/block)。

找到您想要放置区块的区域（例如，侧边栏第一区 Sidebar first）。点击该区域名称旁边的 ‘放置区块’ (Place block) 按钮。

将出现一个模态窗口，列出所有可用区块。找到您的自定义区块（例如，‘欢迎消息区块’ Welcome Message Block）或您希望放置的任何其他区块，然后点击其旁边的 ‘放置区块’ (Place block)。

说明：这将启动配置并将该区块实例添加到区域的过程。

步骤 5：配置区块实例

将出现针对此特定区块实例的配置表单。关键设置包括：

  • **标题 (显示标题) Title (Display title)：**可选地，在网站上显示此区块的标题。您可以取消勾选 ‘显示标题’ (Display title) 以隐藏它。
  • **可见性设置 (Visibility Settings)：**这是一个强大的功能。您可以根据各种条件控制区块在哪里以及对谁显示：
  • **区域 (Region)：**如果需要，您可以在此处更改此区块实例的区域。

配置完成后，点击 ‘保存区块’ (Save block)。

说明：该区块现已放置在选定的区域中，并将根据其可见性设置显示。您可以通过在区块布局页面上拖动来重新排序区域内的区块。

布局构建器 (Layout Builder) (高级布局管理)

Section titled “布局构建器 (Layout Builder) (高级布局管理)”

对于更复杂的页面布局，特别是针对单个内容项目或特定类型的内容，Drupal 提供了核心模块 ‘布局构建器’ (Layout Builder)。布局构建器允许内容编辑者在实体层面或按实体视图模式可视化地安排区块和字段在各个部分和区域中的位置，这提供了比传统区块/区域系统更精细的控制。

实际场景示例：一个大学网站使用区块在侧边栏显示’近期活动’ (Upcoming Events)，在头部显示’搜索’ (Search) 区块，并在底部显示自定义区块用于’联系信息’ (Contact Information)。他们使用布局构建器为’课程’ (Course) 页面和’教师资料’ (Faculty Profile) 页面定义独特的布局。

更多资源：