布局概述

入门

Magento应用程序实现了模型-视图-控制器(MVC)架构模式;意思是,Magento软件被架构成层layers,包括视图层view layer。 Magento程序视图层的主要部分是布局(layout)。在功能上,布局是一个页面结构,由元素的层次结构(元素树)表示,它可以是两种类型:块和容器。技术上,布局是在.xml文件,其中包含元素声明和元素操作说明。 本文描述了为定制主题创建布局所需的基本概念。

术语

布局句柄 Layout handle

布局句柄是一组惟一确定的布局指令集,作为布局文件的名称。

有三种布局句柄:

  • page type layout handles – 页面类型句柄,页类型标识符的同义词。对应控制器操作的“完整操作名称(full action names)”,例如 catalog_product_view.
  • page layout handles – 页面布局句柄,标识特定的页面。对应于带有识别特定页面参数的控制器操作,例如,catalog_product_view_type_simple_id_128.
  • arbitrary handles - 其他句柄,不与任何页面类型相对应,但是其他的句柄使用它们。

基本布局元素

Magento页面设计的基本组件是块和容器。

容器 container的存在是为了将内容结构分配到页面。除了包含元素的内容外,容器没有其他内容。容器的例子包括头(header)、左列(left column)、主列(main column)和页脚(and footer)。

下面的图显示了一个例子:

block 块 表示页面上的每个功能,并使用模板生成HTML,以插入其父结构块。块示例包括分类列表、迷你购物车、产品标签和产品列表。

下面的图显示了一个例子:

.

基本布局

所有Magento前台页面的基本视图在Magento_Theme模块的两个页面配置布局文件中定义:

  • <Magento_Theme_module_dir>/view/frontend/layout/default.xml: 定义页面布局。
  • <Magento_Theme_module_dir>/view/frontend/layout/default_head_blocks.xml:定义js脚本,图像, META包括在页面 <head>中.

这些基本的页面配置布局扩展到其他的Magento模块和Magento主题。

您还可以在定制主题中扩展重写这些文件。

布局文件类型和约定

布局文件类型:按角色role

对于特定的页面,它的布局是由两大布局组件定义的: 页面布局 文件和 页面配置 文件(或者是在AJAX请求、邮件中返回的页面等 通用布局)。

以下是每个布局文件类型的定义:

  • Page layout: 页面布局,一个XML文件,在HTML页面标记的 <body> 部分中声明一个页面框架,例如,两列页面布局(two-column page layout).
  • Page configuration: 页面配置,一个XML文件,声明一个页面的详细结构、内容和元信息(包括 <html >、<head>和<body>部分的html页面标签)。
  • Generic layout: 通用布局,XML文件在HTML页面标记的body部分中声明页面详细结构和内容。用于返回由AJAX请求、电子邮件、HTML片段等返回的页面。

更多内容请参考页面布局类型.

在这个指南中,我们使用 布局文件 来讨论类似于所有这些类型的布局文件的概念。

模块和主题布局文件

以下术语用于区分不同应用程序组件提供的布局:

  • Base layouts: 基础布局,模块提供的布局文件。一般位置在
    • 页面配置和普通布局文件: <module_dir>/view/frontend/layout
    • 页面布局文件: <module_dir>/view/frontend/page_layout
  • Theme layouts: 主题布局,布局文件由主题提供。一般位置在置:
    • 页面配置和普通布局文件: <theme_dir>/<Namespace>_<Module>/layout
    • 页面布局文件: <theme_dir>/<Namespace>_<Module>/page_layout

自定义布局

为了确保您的自定义在升级过程中被删除,不要直接修改原始的Magento模块和主题布局。

为了进行必要的更改,我们建议在您的自定义主题中创建扩展重写布局文件。

布局文件处理

Magento2按照以下顺序处理布局文件:

  1. 从模块中集合所有xml布局文件。并由app/etc/config.php模块列表中的模块顺序决定排序。
  2. 继承主题序列[<parent_theme>, ..., <parent1_theme>] <current_theme>
  3. 从上一位父级主题迭代到当前的主题序列:

    a. 将所有扩展主题布局文件添加到列表中。

    b. 替换列表中覆盖的布局文件。

  4. 将所有布局文件从列表中合并。

忽略了属于非活动模块或带有禁用输出的模块的布局文件.

相关主题