如何在 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 並單擊任何內容類型的“管理顯示”。 現在我們將使用“文章”內容類型。

編輯佈局構建器

在我們選擇我們的自定義佈局之後——

自定義佈局