6. Magento2 --- 创建主题

http://www.360magento.com/blog/magento2-theme-1/


1、主题包中的基础元素

a.Magento2中的主题结构

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

6. Magento2 --- 创建主题_第1张图片

注意,View元素和Controller,Model在同一位置。展开View文件夹,你将看到:
6. Magento2 --- 创建主题_第2张图片

你可以看到,这个结构下有3个元素,他们是从 标签移出来的。 文件结构展开以后包含layout, templates, web。例如,frontend有3个基础文件夹:
6. Magento2 --- 创建主题_第3张图片

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

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

Web文件夹是Magento2中新出现的文件夹,你可以从下图看到它的组成:
6. Magento2 --- 创建主题_第4张图片

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

b.Layout

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

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

Magento用特别的句柄来分离布局文件。
6. Magento2 --- 创建主题_第5张图片

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

模块中有两种布局,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
Theme layouts是模块的外部主题,允许通过报告主题文件中对应的<Namespace>_<lModule>来定制默认的主题布局。

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

6. Magento2 --- 创建主题_第7张图片
创建一个布局文件要遵循下面的规则:

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

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

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

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

读取所有默认布局文件组(base),包括关联的那个;

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

下面是布局进程的模型:
6. Magento2 --- 创建主题_第8张图片

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

布局/块区域:

和magento1一样,它分为基础的布局区域:

Container(容器):分配页面元素的区域
6. Magento2 --- 创建主题_第9张图片

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

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

class="Magento\Module\Block\Class" name="block.3"/>

name="container.2" as="container_2" htmlTag="div"
htmlId="container-2" htmlClass="container"/>

c.新语言风格LESS介绍

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

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

file.less

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

6. Magento2 --- 创建主题_第10张图片

d.Mage_page元素

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

你可能感兴趣的:(6. Magento2 --- 创建主题)