Magento2 --- 创建主题

1、主题包中的基础元素

a.Magento2中的主题结构

Magento2的MVC结构比Magento1中更加明了。Magento2模块将添加View元素到模块文件结构里。以Catalog为例：app/code/Magento/Catalog/

注意，View元素和Controller，Model在同一位置。展开View文件夹，你将看到：

你可以看到，这个结构下有3个元素，他们是从 标签移出来的。 文件结构展开以后包含layout, templates, web。例如，frontend有3个基础文件夹：

Layout（布局）文件夹包含所有模块的布局文件（类似于Magento 1.x，布局文件包含在主题文件夹的Layout里）。当然，这些布局的代码有不同的结构。我将在后面具体的部分说明。

Template（模板）文件夹有所有的.phtml文件，和Magento1中一样由php和html代码混合而成，用来渲染成html。

Web文件夹是Magento2中新出现的文件夹，你可以从下图看到它的组成：

不难看出，它里面包含了CSS，JS和Images文件夹。也就是说，在Magento2中，旧的skin文件夹被划分到每个模块中去了，使得模块更加独立。

b.Layout

在Magento2中，每个模块有默认的布局，可以被重写或被另一个布局扩展。

例如：app/code/Magento/Catalog/view/frontend/layout/default.xml

Magento用特别的句柄来分离布局文件。

句柄的声明和之前规则一样catalog_product_view是一个根据模块和控制器动作命名的句柄。定义页面则需要更加具体的声明：catalog_product_view_type_simple_id_128。或者我们可以调用其它句柄。这里是关于Catalog模块布局文件位置的示例：

模块中有两种布局，Base layout和Theme layout。

Base layout是每个模块默认的布局区域。如果不是你自定义的模块，我们是不建议你直接修改这些文件的。

例如：app/design/frontend/Magento/blank/Magento_Checkout/layout/

__app/code/<Namespace>/<Module>|__/view|__/<area>|__/layout|–<layout_file1>.xml|–<layout_file2>.xml

1

Theme layouts是模块的外部主题，允许通过报告主题文件中对应的<Namespace>_<lModule>来定制默认的主题布局。

例如：app/design/frontend/Magento/blank/Magento_Checkout/layout/

1
2
3

创建一个布局文件要遵循下面的规则：

每个布局文件调用一个句柄，其它被调用；
布局文件的名字就是布局句柄的名字，例如：checkout_cart_index
布局文件在布局文件夹中被调用
例如：

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<update handle="page_one_column" />
   <referenceContainer name="content">
   <!-- ... -->
   </referenceContainer>
</layout>

1
2
3
4
5
6

下面描述布局文件的读取和处理顺序：

如果布局文件属于不同的模块，那么执行的顺序将是：独立模块，相关模块，然后按字母顺序排列；
如果文件属于同一个模块，那么就按文件名字的字母顺序排列。
布局系统执行的步骤

读取所有默认布局文件组（base），包括关联的那个；

决定继承和重写文件的顺序；
添加所有被展开的布局，替换掉base中的布局，获取父类布局，替换被子类重写的父类布局。

下面是布局进程的模型：

由此看以看出，布局文件是由上自下被重写的，父类主题重写模块中的base主题，子主题（一般是我们定义的主题）重写父类。例如：Module_One模块的布局文件layout_2在重写文件夹中的父类主题parent_theme里被声明。因此，系统会用parent_theme > Module_One > override > layout_2.xml替换掉Module_One > layout_2.xml。

布局/块区域：

和magento1一样，它分为基础的布局区域：

Container（容器）：分配页面元素的区域

下面是一个布局内容示例：

<container name="container.1" label="Container 1"
as="container_1" output="1" htmlTag="div" htmlId="container-1"
htmlClass="container">
<block class="Magento\Module\Block\Class" name="block.1">
<container name="child.container" label="Child Container" as="child">
<block type="Magento\Module\Block\Class" name="block.2">
</container>
<block class="Magento\Module\Block\Class" name="block.3"/>
</container>
<container name="container.2" as="container_2" htmlTag="div"
htmlId="container-2" htmlClass="container"/>

1
2
3
4
5
6
7
8
9
10
11

c.新语言风格LESS介绍

在定义主题元素之前，我们需要学习新的语言风格-LESS。在Magento2中这个语言很有趣。由于有一些高级的功能，LESS的添加级别要高于CSS。它被翻译成CSS得益于php中的LESS库。我们仍然允许在源码中添加CSS URL直接使用。

LESS语言的预处理是通过lib/internal/Magento/Css/PreProcesso中的库完成的。在LESS文件中的导入方式是：

file.less

@magento_import “<some_id>”;
@import “path/to/dir1/some_file”;@import “path/to/file/file1.less”;@import “path/to/file/file2.less”;

1
2

d.Mage_page元素

之前Magento版本中的Mage_page元素被Mangento_Theme模块替代了。