自定义一个layout布局的东西需要的东西

  1. 布局定义：注解->regions

  2. html模板：注解->template

  3. js/css库：注解->library->.libraries.yml

注解说明

  1. <?php
  3. namespace Drupal\my_module\Plugin\Layout;
  5. use Drupal\layout_builder\Plugin\Layout\LayoutBase;
  7. /**
  8.  * Provides a custom layout.
  9.  *
  10.  * @Layout(
  11.  *   id = "my_custom_layout",
  12.  *   label = @Translation("My Custom Layout"),
  13.  *   category = @Translation("My Custom Category"),
  14.  *   path = "layouts/custom",
  15.  *   template = "my-custom-layout",
  16.  *   regions = {
  17.  *     "header" = {
  18.  *       "label" = @Translation("Header"),
  19.  *     },
  20.  *     "content" = {
  21.  *       "label" = @Translation("Content"),
  22.  *     },
  23.  *     "footer" = {
  24.  *       "label" = @Translation("Footer"),
  25.  *     },
  26.  *   }
  27.  * )
  28.  */
  29. class MyCustomLayout extends LayoutBase {
  30.   // Your class logic here.
  31. }

注解字段说明

id

唯一标识此布局的ID，用于在代码中引用。 示例：”my_custom_layout” label

布局的可读名称，用于UI显示。 示例：@Translation(“My Custom Layout”) category

布局分类，用于在布局选择界面中分组。 示例：@Translation(“My Custom Category”) path

模板文件的路径，基于模块的根目录。 示例：”layouts/custom” template

模板文件的名称，不带扩展名（默认扩展为 .html.twig）。 示例：”my-custom-layout” regions

定义布局的可用区域，每个区域都有一个 label。 示例：

  1. "header" = {
  2.   "label" = @Translation("Header"),
  3. }

配置模板文件

在 layouts/custom 路径下创建 my-custom-layout.html.twig，定义布局的结构，例如：

  1. <div class="layout">
  2.   <div class="layout-header">
  3.     {{ content.header }}
  4.   </div>
  5.   <div class="layout-content">
  6.     {{ content.content }}
  7.   </div>
  8.   <div class="layout-footer">
  9.     {{ content.footer }}
  10.   </div>
  11. </div>

安装与使用

首先，清除缓存。

然后，导航到/admin/structure/types/manage/cklb_landing_page/display/admin/structure/types/manage/cklb_landing_page/display

展开Layouts available for sections，勾选刚刚添加的Layout.