2018年3月6日星期二

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模块替代了。

没有评论:

发表评论

注意:只有此博客的成员才能发布评论。

Also Read: