Magento模板开发教程从哪开始学？-网站模板-锦华智联科技

Magento 模板开发终极教程

Magento 的模板系统基于 XML 配置 和 PHTML 模板文件，其核心思想是布局和块，理解这两个概念是掌握 Magento 开发的关键。

（图片来源网络，侵删）

第一部分：核心概念理解
- 1. Magento 的“三驾马车”：布局、块、模板
- 2. 主题的作用
- 3. 关键文件和目录结构
第二部分：实战演练 - 创建你的第一个主题
- 1. 环境准备
- 2. 创建主题目录结构
- 3. 注册主题
- 4. 激活主题
第三部分：深入布局与块
- 1. 什么是布局文件？
- 2. 什么是块？
- 3. 块的类型
- 4. 模板文件
第四部分：常用模板修改实战
（图片来源网络，侵删）
- 1. 修改产品详情页
- 2. 修改首页内容
- 3. 重写块模板
- 4. 添加自定义静态块
第五部分：进阶主题开发
- 1. 使用 LESS/SASS 进行样式开发
- 2. 添加 JavaScript 文件
- 3. 主题继承
- 4. 调试技巧

第一部分：核心概念理解

1. Magento 的“三驾马车”：布局、块、模板

这是 Magento 模板系统的基石，请务必理解它们的关系：

布局:
- 是什么: 一个 XML 文件，负责定义页面由哪些“块”组成，以及这些块的层级结构和显示顺序。
- 作用: 它像建筑物的蓝图，告诉你哪里放客厅，哪里放卧室，但不会告诉你客厅的沙发是什么颜色。
- 文件位置: app/design/frontend/{Vendor}/{theme}/Magento_Theme/layout/
块:
（图片来源网络，侵删）
- 是什么: 一个 PHP 类，负责处理业务逻辑、获取数据，并决定调用哪个模板文件来渲染自己。
- 作用: 它像建筑物的承重墙和功能区，产品信息块负责获取当前产品的数据，并决定使用 product/view.phtml 这个模板来展示。
- 文件位置: app/code/{Vendor}/{Module}/Block/
模板:
- 是什么: 一个 .phtml 文件，包含 HTML 和 PHP 代码，负责将数据最终渲染成用户可见的 HTML。
- 作用: 它像建筑物的内部装修，它使用从“块”传递过来的数据，生成最终的 HTML 输出。
- 文件位置: app/design/frontend/{Vendor}/{theme}/Magento_Catalog/templates/product/

三者关系流程:

用户访问一个页面（如 example.com/product/123）。
Magento 的路由系统找到对应的布局文件（如 catalog_product_view.xml）。
布局文件声明了需要渲染的块（如 ProductInfo）。
每个块知道它应该使用哪个模板文件（如 product/view.phtml）。
Magento 执行块的 PHP 代码，获取数据。
将数据和模板文件结合,生成最终的 HTML 页面。

2. 主题的作用

主题是一套完整的视觉和交互设计,包括模板、布局、样式、字体、图片等，Magento 允许多个主题共存，并可以轻松切换。

Vendor/Theme: 主题的唯一标识，Vendor/luma-theme 或 Vendor/custom-theme。
父主题: 一个主题可以继承另一个主题，如果某个文件在子主题中不存在，Magento 会自动去父主题中寻找，这大大减少了重复代码。
Luma 主题: Magento 2 官方提供的基于 Blank 主题的示例主题，它已经包含了基础的样式和结构，是开发新主题的绝佳起点。

3. 关键文件和目录结构

一个典型的 Magento 2 主题目录结构如下：

app/design/frontend/Vendor/CustomTheme/
├── registration.php          # 主题注册文件
├── theme.xml                 # 主题元数据文件
├── composer.json             # (可选) 用于依赖管理
├── web/                      # 静态资源目录
│   ├── css/
│   ├── fonts/
│   ├── images/
│   └── js/
└── Magento_Theme/            # 模板和布局覆盖目录
    ├── layout/               # 覆盖模块的布局文件
    │   └── default.xml       # 默认布局，影响所有页面
    │   └── cms_index_index.xml # 首页布局
    │   └── catalog_product_view.xml # 产品页布局
    └── templates/            # 覆盖模块的模板文件
        └── page/
        │   └── html/
        │       └── header.phtml # 头部模板
        └── products
            └── list.phtml     # 产品列表模板

第二部分：实战演练 - 创建你的第一个主题

我们将创建一个名为 Vendor/custom-theme 的主题，它继承自官方的 luma 主题。

1. 环境准备

确保你已经安装了 Magento 2，并且具有文件写入权限，建议在开发模式下进行：bin/magento deploy:mode:set developer。

2. 创建主题目录结构

在 app/design/frontend/ 目录下创建你的主题文件夹：

mkdir -p app/design/frontend/Vendor/custom-theme
mkdir -p app/design/frontend/Vendor/custom-theme/Magento_Theme
mkdir -p app/design/frontend/Vendor/custom-theme/web

3. 注册主题

创建 registration.php 文件，告诉 Magento 这个主题的存在。

app/design/frontend/Vendor/custom-theme/registration.php:

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Vendor/custom-theme',
    __DIR__
);

4. 创建主题元数据文件

创建 theme.xml 文件，定义主题的基本信息，特别是指定它的父主题。

app/design/frontend/Vendor/custom-theme/theme.xml:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">Custom Theme</title> <!-- 在后台管理中显示的主题名称 -->
    <parent>Magento/luma</parent> <!-- 指定父主题为 luma -->
    <media>
        <preview_image>media/preview.jpg</preview_image> <!-- (可选) 主题预览图 -->
    </media>
</theme>

5. 激活主题

你需要通过命令行或后台管理来激活这个主题。

使用命令行 (推荐)

bin/magento theme:list

你会看到你的 Custom Theme 在列表中，然后运行：

bin/magento config:set design/theme/theme_id Vendor_custom-theme

Vendor_custom-theme 是主题的代码，由 Vendor 和 theme 字段组合而成。

在后台管理激活

登录 Magento 后台。
进入 Content > Design > Configuration。
点击你要修改的 Store View（通常是 "Default Store View"）旁边的 "Edit"。
在 "Design Theme" 下拉菜单中，选择 "Custom Theme"。
点击 Save Config。

6. 清理缓存并验证

bin/magento cache:clean layout
bin/magento cache:clean block_html

现在刷新你的网站,它应该看起来和 Luma 主题一模一样，因为我们的 custom-theme 目前还没有任何自定义内容。

第三部分：深入布局与块

1. 什么是布局文件？

布局文件定义了页面的结构。default.xml 是所有页面的基础布局。

app/design/frontend/Vendor/custom-theme/Magento_Theme/layout/default.xml:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <!-- 在这里可以添加 CSS, JavaScript, meta 标签等 -->
        <css src="Vendor_custom-theme::css/custom.css"/> <!-- 引入自定义 CSS -->
    </head>
    <body>
        <referenceBlock name="header.panel">
            <!-- 可以移除或修改某个块 -->
            <arguments>
                <argument name="class" xsi:type="string">header panel</argument>
            </arguments>
        </referenceBlock>
        <!-- 可以添加一个新的块 -->
        <block class="Magento\Framework\View\Element\Template" name="my.custom.block" template="Vendor_custom-theme::my-custom-block.phtml" after="content"/>
    </body>
</page>

2. 什么是块？

块是 PHP 类，你可以通过重写块来改变其行为，你想修改产品页面的 "Add to Cart" 按钮，你可能需要重写 Magento\Catalog\Block\Product\View 这个块。

3. 块的类型

Structural Block (结构性块): 定义页面的主要区域，如 header, main.content, footer，它们通常在 page_layout.xml 中定义。
Content Block (内容块): 包含实际的内容，如产品列表、分类描述、购物车等，它们通常由模块在布局文件中声明。

4. 模板文件

模板文件是 .phtml 文件，在模板中，你可以使用以下变量和方法：

$block: 当前的块对象。
$this: 在模板中，$this 指向的是当前的块对象。
$viewModel: 在较新的 Magento 版本中，推荐使用 View Model 来分离逻辑和视图。
__('Hello World'): 用于翻译文本。
$block->getSomeData(): 调用块的方法来获取数据。

第四部分：常用模板修改实战

1. 修改产品详情页

假设你想在产品详情页的价格上方添加一段自定义文本。

找到布局文件: 产品详情页的布局文件是 catalog_product_view.xml，我们将在主题中覆盖它。创建文件：app/design/frontend/Vendor/custom-theme/Magento_Catalog/layout/catalog_product_view.xml

修改布局文件: 我们将在价格块之前添加一个新的自定义块。

app/design/frontend/Vendor/custom-theme/Magento_Catalog/layout/catalog_product_view.xml:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <!-- 找到名为 product.info.price 的块，并在它之前插入我们的自定义块 -->
        <referenceBlock name="product.info.price">
            <block class="Magento\Framework\View\Element\Template" name="custom.product.message" template="Vendor_custom-theme/product/custom-message.phtml" before="product.info.price"/>
        </referenceBlock>
    </body>
</page>

创建模板文件: 创建 custom-message.phtml 文件。创建文件：app/design/frontend/Vendor/custom-theme/Magento_Catalog/templates/product/custom-message.phtml

app/design/frontend/Vendor/custom-theme/Magento_Catalog/templates/product/custom-message.phtml:
```
<?php
/**
 * @var $block \Magento\Framework\View\Element\Template
 */
?>
<div class="product-custom-message">
    <p>This is a custom message added above the price!</p>
</div>
```
清理缓存并查看效果:
```
bin/magento cache:clean layout
bin/magento cache:clean block_html
```
访问任意产品详情页,你应该能看到价格上方出现了你的自定义文本。

2. 修改首页内容

通常由 CMS 页面驱动，最简单的方法是使用静态块。

在后台创建静态块:
- 进入 Content > Elements > Blocks。
- 点击 "Add New Block"。
- Block Title: Welcome Message
- Identifier: welcome_message (这个 ID 会在模板中用到)
- Content: 输入你的 HTML 内容，<h2>Welcome to our store!</h2><p>We are glad to see you here.</p>
- 点击 "Save Block"。

在首页布局中调用静态块: 首页的布局文件是 cms_index_index.xml。创建文件：app/design/frontend/Vendor/custom-theme/Magento_Cms/layout/cms_index_index.xml

app/design/frontend/Vendor/custom-theme/Magento_Cms/layout/cms_index_index.xml:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <!-- 在 main.content 区域的末尾添加我们的静态块 -->
        <referenceContainer name="main.content">
            <block class="Magento\Cms\Block\Block" name="home.welcome.block">
                <arguments>
                    <argument name="block_id" xsi:type="string">welcome_message</argument>
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>

清理缓存并查看效果: 首页现在应该会显示你创建的静态块内容。

第五部分：进阶主题开发

1. 使用 LESS/SASS 进行样式开发

Magento 2 默认使用 LESS，你的主题可以继承父主题的 LESS 文件，并添加自己的变量和文件。

创建 styles.less: 在 app/design/frontend/Vendor/custom-theme/web/css/source/ 目录下创建 styles.less 文件。如果目录不存在，请手动创建。

在 default.xml 中引入: 修改 app/design/frontend/Vendor/custom-theme/Magento_Theme/layout/default.xml，将你的 LESS 文件编译后的 CSS 引入到 <head> 中。

<head>
    <link rel="stylesheet" type="text/css" href="css/styles-m.css"/> <!-- 这是 Magento 默认的主样式文件 -->
    <css src="Vendor_custom-theme::css/styles.css"/> <!-- 你的主题样式文件 -->
</head>

定义变量: 创建 _theme.less 文件来覆盖父主题的变量。 app/design/frontend/Vendor/custom-theme/web/css/source/_theme.less:
```
@theme-color__primary: #ff5722; // 覆盖主色调为橙色
```

2. 添加 JavaScript 文件

在 default.xml 的 <head> 部分添加你的 JS 文件。

<head>
    <!-- ... -->
    <script src="Vendor_custom-theme::js/custom-script.js"/>
</head>

3. 主题继承

我们已经通过 theme.xml 中的 <parent> 标签实现了继承，继承的好处是：

代码复用: 你只需要修改或添加文件，无需复制整个父主题。
易于升级: 当父主题更新时，你的子主题可以轻松合并更新。

4. 调试技巧

启用模板路径提示: 在后台进入 Stores > Configuration > Advanced > Developer > Debug。勾选 "Add Line to Template Hints" 和 "Add Block Names to Hints"。清理缓存后，页面上会显示每个块对应的模板文件路径和名称，这对于定位模板文件非常有用。
查看原始布局文件: 当你不确定某个块是从哪个模块的布局文件中来的，可以查看 var/page_cache/** 目录下的缓存文件，或者使用开发者工具的 "Elements" 面板，检查 HTML 元素的 data-block 属性。
使用 Xdebug: 对于复杂的 PHP 逻辑调试，配置 Xdebug 是最专业的方法。

Magento 2 的模板开发虽然初看起来有些复杂，但一旦你理解了 布局 -> 块 -> 模板 这个核心流程，以及 主题继承 的概念，就会发现它非常强大和灵活。

开发流程总结:

规划: 明确你要修改哪个页面的哪个部分。
定位: 使用模板路径提示或分析布局文件，找到需要修改的 .xml 布局文件和 .phtml 模板文件。
覆盖: 在你的主题目录下创建对应的文件路径，并复制原始内容进行修改。不要直接修改核心文件！
测试: 清理相关缓存，刷新页面查看效果。
进阶: 使用 LESS/JS 等丰富你的主题。

希望这份教程能为你打开 Magento 模板开发的大门，多动手实践，很快你就能熟练掌握它！

Magento模板开发教程从哪开始学？