如何在 Drupal 8 中创建自定义布局构建器

已发表: 2019-10-15

Drupal 8 使内容作者的工作变得更加容易。最重要的原因之一是在核心 Drupal 8 中添加了布局构建器模块。凭借简单的拖放界面、预览和自定义功能，布局构建器很快成为最受欢迎的页面构建和设计工具。

在我之前的文章中，我写了如何开始安装和使用 Drupal 8 的布局构建器。在这里，我想分享我关于根据独特要求定制布局构建器的知识。

如果您的 drupal 网站需要具有多个块的多个部分，那么您不能使用 Drupal 提供的默认部分。为此，您可以创建自己的自定义布局。

开始使用布局生成器：

我们将首先为我们的自定义布局构建器创建一个自定义布局构建器模块，我们将文件夹命名为 custom_layout。接下来，我们将创建一个 info.yml 文件。我们应该为它指定基本的键。 drupal 8 中的自定义布局构建器将依赖于布局构建器模块。让我们在这里指定它。

 代码：
名称：'自定义布局'
类型：模块
描述：'提供了一种构建布局的方式'
核心：8.x
包：'自定义'
依赖项：
 - layout_builder:layout_builder

接下来我们将创建 layouts.yml 文件来为我们的自定义布局指定区域。

custom_layout：我们的自定义布局构建器布局的键。
label：我们自定义布局构建器布局的标签。
category：我们的自定义布局构建器布局的类别。
default_region：默认区域是所有类型布局中默认的区域。
icon_map：当我们选择布局时会显示的图标。

例如：

要创建上面的图标地图，我们需要按照以下步骤操作。

1. 第一行是“Header Left”和“Header Right”
我们已经指定 - [ header_left, header_left, header_right ] - header_left 是
定义 2 次，因此它将占据屏幕总宽度的 2 部分，然后 header_right 将占据其余部分，因此比率将为“75%/25%”。
2. 第二行是“内容”和“侧边栏”
我们已经指定 - [ content, content, sidebar ] 与上述逻辑相同。
3. 第三行是“Footer Left”和“Footer Right”
我们已经指定 - [ footer_left, footer_right] - 因为只有 2 个区域，每个区域将占用 50%。

区域：我们布局所需的区域。我们有 header_left、header_right、sidebar、content、footer_left、footer_right。

代码：

 自定义布局：
 标签：'自定义布局'
 类别：“自定义布局”
 default_region: 内容
 图标地图：
   - [header_left, header_left, header_right]
   - [内容，内容，侧边栏]
   - [内容，内容，侧边栏]
   - [内容，内容，侧边栏]
   - [footer_left，footer_right]

 地区：
   头左：
     标签：页眉左
   header_right:
     标签：标题右
   侧边栏：
     标签：侧边栏
   内容：
     标签：内容
   页脚_左：
     标签：左页脚
   页脚_右：
     标签：右页脚

接下来，让我们为我们的布局创建一个 html 结构。我们将在我们的模块中创建一个名为“layouts”的文件夹。在文件夹中，我们将创建另一个名为“custom_layout”的文件夹

在该文件夹中，我们将创建名为“custom-layout.html.twig”的树枝文件

我们必须在 layouts.yml 中指定 twig 文件

path：它指定您的html结构将写入哪个文件夹
模板：它指定路径下的布局使用哪个树枝模板。

 代码：

自定义布局：
 标签：'自定义布局'
 路径：布局/custom_layout
 类别：“自定义布局”
 模板：自定义布局
 default_region: 内容
 图标地图：
   - [header_left, header_left, header_right]
   - [内容，内容，侧边栏]
   - [内容，内容，侧边栏]
   - [内容，内容，侧边栏]
   - [footer_left，footer_right]

 地区：
   头左：
     标签：页眉左
   header_right:
     标签：标题右
   侧边栏：
     标签：侧边栏
   内容：
     标签：内容
   页脚_左：
     标签：左页脚
   页脚_右：
     标签：右页脚

接下来，我们将在“custom-layout.html.twig”文件中为我们的区域编写 html 结构。
我们将设置类具有“layout”和“layout--custom-layout”，并将整个内容包裹在其中。
我们将指定在 layouts.yml 中定义的区域，我们可以访问这些区域，如“{{ content.header_left }}”

代码：

{% 设置类 = [
'布局'，
'布局--自定义布局',
] %}
{% 如果内容 %}
<div{{ attributes.addClass(classes) }}>
{% if content.header_left %}
<div {{ region_attributes.header_left.addClass('layout__region', 'layout__region--header_left') }}>
{{ content.header_left }}
</div>
{％万一％}
{% if content.header_right %}
<div {{ region_attributes.header_right.addClass('layout__region', 'layout__region--header_right') }}>
{{ content.header_right }}
</div>
{％万一％}
{% if content.content %}
<div {{ region_attributes.content.addClass('layout__region', 'layout__region--content') }}>
{{ content.content }}
</div>
{％万一％}
{% if content.sidebar %}
<div {{ region_attributes.sidebar.addClass('layout__region', 'layout__region--sidebar') }}>
{{ content.sidebar }}
</div>
{％万一％}
{% if content.footer_left %}
<div {{ region_attributes.footer_left.addClass('layout__region', 'layout__region--footer_left') }}>
{{ content.footer_left }}
</div>
{％万一％}
{% if content.footer_right %}
<div {{ region_attributes.footer_right.addClass('layout__region', 'layout__region--footer_right') }}>
{{ content.footer_right }}
</div>
{％万一％}
</div>
{％万一％}

html结构写好之后，我们就要为每个区域写css。我们现在将在我们的自定义模块中创建 libraries.yml。

代码：

 自定义布局：
版本：版本
css：
   主题：
     css/custom_layout.css：{}

我们将在 layouts.yml 中定义该库

代码：

 自定义布局：
 标签：'自定义布局'
 路径：布局/custom_layout
 类别：“自定义布局”
 模板：自定义布局
 库：custom_layout/custom_layout
 default_region: 内容
 图标地图：
   - [header_left, header_left, header_right]
   - [内容，内容，侧边栏]
   - [内容，内容，侧边栏]
   - [内容，内容，侧边栏]
   - [footer_left，footer_right]

 地区：
   头左：
     标签：页眉左
   header_right:
     标签：标题右
   侧边栏：
     标签：侧边栏
   内容：
     标签：内容
   页脚_左：
     标签：左页脚
   页脚_右：
     标签：右页脚

现在让我们从样式我们的区域块开始。我们将为每个区域指定结构如下-

代码：

 .layout--自定义布局{
 显示：-webkit-box；
 显示：-ms-flexbox；
 显示：弹性；
 -ms-flex-wrap：包裹；
 flex-wrap: 包裹;
}

@media 屏幕和（最小宽度：40em）{
 .layout--custom-layout .layout__region--header_left {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 70%;
   弹性：0 1 70%；
 }

 .layout--custom-layout .layout__region--header_right {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 30%;
   弹性：0 1 30%；
 }

 .layout--custom-layout .layout__region--content {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 70%;
   弹性：0 1 70%；
 }

 .layout--custom-layout .layout__region--sidebar {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 30%;
   弹性：0 1 30%；
 }

 .layout--custom-layout .layout__region--footer_left {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 50%;
   弹性：0 1 50%；
 }

 .layout--custom-layout .layout__region--footer_right {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 50%;
   弹性：0 1 50%；
 }
}

接下来，让我们启用我们的自定义模块

让我们转到Structure -> Content types 并单击任何内容类型的“管理显示”。现在我们将使用“文章”内容类型。

在我们选择我们的自定义布局之后——