如何在Magento2中创建主题（第一部分）

redmaomail 2024-07-24 18:13 阅读数 71 #Magento

嘿，伙计。你已经积累多少Magento2知识了，有没有想要和大家分享的？我在Magento2中发现了一些有趣的功能。不论你是插件或主题开发人员，你都应该花时间读读这篇文章。因为你将明白更多关于Magento2主题和模版结构的知识。

我把这个教程分成了两个部分。今天的这篇是第一部分，关于主题包中的基础元素。第二部分将展示如何在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

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

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

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

每个布局文件调用一个句柄，其它被调用；
布局文件的名字就是布局句柄的名字，例如：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中的布局，获取父类布局，替换被子类重写的父类布局。

下面是布局进程的模型：

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

布局/块区域：

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

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

Block（块）：容器中默认Magento块元素所在的区域

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

<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"/>

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”;

想要了解更多关于LESS语言，你可以访问http://lesscss.org/或者http://less.eten.vn/

默认的LESS库文件结构是：

lib/web/ ├── css/

│ ├── docs/ (Library documentation)

│ ├── source/

│ │ ├── lib/ (Library source files)

│ │ │ ├── abstract.less

│ │ │ ├── actions-toolbar.less

│ │ │ ├── breadcrumbs.less

│ │ │ ├── buttons.less

│ │ │ ├── dropdowns.less

│ │ │ ├── forms.less

│ │ │ ├── icons.less

│ │ │ ├── layout.less

│ │ │ ├── lib.less

│ │ │ ├── loaders.less

│ │ │ ├── messages.less

│ │ │ ├── navigation.less

│ │ │ ├── pages.less

│ │ │ ├── popups.less

│ │ │ ├── rating.less

│ │ │ ├── resets.less

│ │ │ ├── responsive.less

│ │ │ ├── sections.less

│ │ │ ├── tables.less

│ │ │ ├── tooltips.less

│ │ │ ├── typography.less

│ │ │ ├── utilities.less

│ │ │ └── variables.less

│ │ └── theme.less

│ └── styles.less

├── fonts/

│ └── Blank-Theme-Icons/ (Library custom icons font)

├── images/

│ └── blank-theme-icons.png (Library icons sprite)

└── jquery/ (Library javascript files)