←返回博客

如何通过代码创建自定义 Drupal 布局以用于布局生成器

2024-02-10•5 分钟阅读

今天，让我们探讨如何通过代码创建自定义 Drupal 布局以用于布局生成器。

Drupal 的布局生成器提供了一种强大而直观的方式，无需深入代码即可设计灵活的网页布局。它使内容编辑者能够使用拖放界面将内容排列成视觉上吸引人的结构。在本博文中，我们将探讨布局生成器是什么，如何启用它，并演示如何创建自定义模板以获得更大的控制力。

什么是布局生成器？

其核心是，布局生成器是一个 Drupal 模块，可让您直观地构建页面布局。您不再受限于主题的僵化结构，而是可以自由地：

  • 定义区域： 在页面中指定部分（例如，页眉、页脚、主内容、侧边栏）。
  • 使用区块组装布局： 使用拖放功能将不同的内容区块（文本、图像、菜单等）放置在这些区域中。
  • 创建自定义模板： 为特定布局制作模板文件，以精确控制 HTML 和区域放置。

为内容类型启用布局生成器

假设您想在“文章”内容类型上使用布局生成器。以下是启用它的方法：

  1. 安装模块： 确保您已启用核心布局生成器模块（通常是默认的）。
  2. 管理显示： 导航到 / admin / structure / types / manage / article / display （将“article”替换为您的内容类型的机器名称）。
  3. 启用布局生成器： 在“布局选项”部分，勾选“使用布局生成器”复选框。
  4. 保存您的更改： 单击“保存”。
启用布局生成器

您还可以选择允许单个节点（在此上下文中为文章）拥有其唯一的布局覆盖。这意味着每篇文章都可以拥有与您为“文章”内容类型设置的默认布局不同的布局。

如何创建自定义 Drupal 布局

虽然您的 Drupal 主题和一些模块可能提供一些预构建的布局，但创建自定义模板可提供更大的控制力和灵活性。您可能需要自定义布局的原因如下：

  • 量身定制的页面设计：构建完美契合您内容的布局，而不是局限于通用的主题或模块布局。
  • 轻松编辑：提供与您的网站风格匹配的即用型布局，让您的内容编辑者生活更轻松。
  • 一致的外观：确保您的网站在每个页面上看起来都很棒，即使在使用主题中未包含的布局时也是如此。

要创建自定义布局，请按照以下步骤操作：

  1. THEME.layouts.yml 文件：
    • 在主题的根目录中创建一个名为 THEME.layouts.yml 的文件（将 THEME 替换为您的实际主题名称）。
    • 让我们以带右侧边栏的布局为例。添加以下代码，并请记住将“EXAMPLE”替换为适合您项目的合适前缀：
example_layout_right_sidebar:
  label: 'EXAMPLE: 内容带右侧边栏'
  path: templates/layout/example/sidebar
  template: layout--right-sidebar
  category: '示例列：2'
  default_region: first
  icon_map: 
    - [top] 
    - [first, first, second]  
    - [bottom, bottom, bottom] 
  regions: 
    top:
      label: 顶部 
    first:
      label: 主要内容 
    second:
      label: 侧边栏 
    bottom:
      label: 底部

代码说明：

  • example_layout_right_sidebar: 布局的唯一名称。
  • label: 布局生成器中此布局的用户友好名称。
  • path: 布局模板文件的位置。
  • template: 定义布局 HTML 结构的主模板文件。
    • 您需要在指定路径中有一个相应的 layout--right-sidebar.html.twig 文件。
  • category: 有助于在布局生成器界面中对布局进行分组。
  • default_region: 指定内容区块最初放置的位置（在此情况下为“first”区域）。
  • icon_map:
    • 这会在布局生成器中显示基本视觉预览：
      • 顶部有一行（[top]）
      • 一行三列：两列较宽的“first”列和一列较窄的“second”列。
      • 底部有一行（[bottom, bottom, bottom]）
  • regions:
    • 定义可以放置内容的命名区域：
      • top: 跨越布局顶部的区域。
      • first: 主要内容区域（可能是左列）。
      • second: 侧边栏区域（可能是右列）。
      • bottom: 跨越布局底部的区域。
    • 您将使用 {{ content.top }}, {{ content.first }}, 和 {{ content.second }} 在 twig 模板中定位您的内容。
  1. 模板文件：
    • 在您的 .layouts.yml 文件中 path 下指定的文件夹中（例如，templates / layout / example / sidebar），创建 Twig 模板文件，如 layout--right-sidebar.html.twig。
    • 这是模板示例：
{#
/**
 * @file
 * 媒体布局的默认主题实现。
 *
 * 可用变量：
 * - content: 此布局的内容。
 * - attributes: 布局<div>的 HTML 属性。
 *
 * @ingroup themeable
 #}
{% if content %}
 <div{{ attributes.addClass('row example-sidebar-layout example-right-sidebar') }}>

  <div class="example-container">

   {% if content.top %}
    <div {{ region_attributes.top.addClass('region--top example-sidebar-layout-top') }}>
     {{ content.top }}
    </div>
   {% endif %}

   <div class="example-sidebar-layout-middle">

    <div{{ region_attributes.first.addClass('col-sm-9 example-sidebar-column-left') }}>
     {{ content.first }}
    </div>

    <div{{ region_attributes.second.addClass('col-sm-3 example-sidebar-column-right') }}>
     {{ content.second }}
    </div>

    </div>

   {% if content.bottom %}
    <div {{ region_attributes.bottom.addClass('region--bottom example-sidebar-layout-bottom') }}>
     {{ content.bottom }}
    </div>
   {% endif %}

  </div>

 </div>
{% endif %}
  1. 清除缓存：清除 Drupal 的缓存以注册您的新模板。

使用您的自定义模板

  1. 编辑“文章”（或您选择的内容类型）节点时，切换到“布局”选项卡。
  2. 您的自定义布局现在应该可供选择。
  3. 选择布局后，您可以开始将内容区块添加到其指定的区域。
使用您的自定义模板

最后的想法

布局生成器和自定义模板让您更灵活地按照您想要的方式设计您的 Drupal 网站。可能需要一些练习才能适应，但创建完美满足您需求的布局的能力是值得的。随意尝试并看看您能创造出什么。祝您调试愉快！

分类：

Drupal