Magento 2.1模板如何自定义？-网站模板-锦华智联科技

Magento 2 的模板系统非常强大和灵活，它遵循了模型-视图-控制器的设计模式，并引入了 XML Layout（布局） 和 Blocks（块） 的核心概念来组织前端页面，对于 Magento 2.1 这套系统是基础且至关重要的。

下面我将从核心概念、文件结构、自定义方法等多个方面进行详细说明。

核心概念

在 Magento 2 中，一个页面的渲染过程不是直接由一个 .phtml 文件完成的，而是由多个组件协同工作完成的，理解以下三个核心概念是掌握 Magento 2 模板的关键：

Layout (布局)

作用：Layout 是一个“蓝图”或“骨架”，它定义了页面上有哪些区域（Header, Main Content, Footer）,以及在每个区域中应该显示哪个块和模板。
文件格式：XML 文件，通常位于 view/frontend/layout/ 目录下。
工作方式：
- 当一个页面被请求时（catalog/product/view），Magento 会查找对应的布局文件，如 catalog_product_view.xml。
- 这个 XML 文件会引用不同的 Block,并指定它们的顺序和位置。
- 它还可以通过 <referenceContainer> 和 <block> 标签来修改、添加或删除页面上的元素。

Block (块)

作用：Block 是 PHP 类，它负责：
1. 数据准备：从数据库或其他地方获取数据,并将其准备好传递给模板。
2. 模板渲染：它持有一个模板文件（.phtml）的引用，并负责调用该模板文件来渲染 HTML。
文件格式：PHP 类文件，通常位于 Block/ 目录下。
工作方式：
- 每个 Block 都有一个对应的模板文件。
- 在模板文件中，你可以通过 echo $this->someMethod() 来调用 Block 类中的方法,从而获取并显示数据。

Template (模板)

作用：Template 是纯粹的 HTML 文件，其中混合了 PHP 代码和特定的 Magento 辅助函数，它负责将 Block 提供的数据最终渲染成用户看到的 HTML。
文件格式：.phtml 文件，通常位于 view/frontend/templates/ 目录下。
工作方式：
- 模板文件本身不应该包含复杂的业务逻辑，它的职责是“显示”。
- 它通过 <?php ?> 标签调用其所属 Block 类中的方法来获取数据。
- 它可以使用 Magento 提供的辅助函数（如 __() 用于翻译，getUrl() 用于生成 URL 等）。

三者关系总结： Layout (XML) 决定页面上有哪些 Block (PHP)，每个 Block 又决定使用哪个 Template (.phtml) 来渲染内容。

文件结构

Magento 2 的模板文件遵循严格的命名和目录结构，这被称为 “Area” (区域) 和 “Theme” (主题) 系统。

Area (区域)

Magento 2 有三个主要的 Area：

Frontend：面向客户的商店前端。
Adminhtml：管理员后台界面。
Base：包含所有 Area 的默认文件,作为最后的回退源。

Theme (主题)

主题是自定义 Frontend 或 Adminhtml 界面的方式，一个主题可以继承另一个主题，形成“主题层次结构”。

典型的主题文件结构如下：

app/
└── design
    ├── frontend
    │   └── [Vendor_Name]/
    │       └── [Theme_Name]/
    │           ├── theme.xml                 // 主题声明文件
    │           ├── registration.php          // 主题注册文件
    │           ├── web/                      // 静态资源 (CSS, JS, images)
    │           │   ├── css/
    │           │   ├── js/
    │           │   └── images/
    │           └── Magento_Theme/             // 主题可以覆盖的模块模板
    │               ├── layout/
    │               │   └── default.xml        // 主题级别的默认布局
    │               └── templates/
    │                   ├── page/
    │                   └── header.phtml       // 覆盖默认的头部模板
    └── adminhtml
        └── [Vendor_Name]/
            └── [Theme_Name]/
                ├── layout/
                └── templates/

重要提示：在 Magento 2.1 中，registration.php 和 theme.xml 文件对于主题的正确加载是必需的。

如何自定义模板

这是最常见的需求，以下是几种自定义模板的方法,从推荐到不推荐排序。

最佳实践 - 使用 `etc/view.xml` 覆盖模板

这是官方推荐的方法，用于覆盖特定模块的模板文件,而无需修改核心文件。

场景：你想覆盖 Magento_Catalog 模块的 product/list.phtml 模板。

步骤：

在你的主题目录下创建 etc/view.xml 文件。
- 路径：app/design/frontend/[Vendor_Name]/[Theme_Name]/etc/view.xml
在 view.xml 中添加如下内容：

<?xml version="1.0"?>
<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/etc/view.xsd">
    <vars>
        <!-- 其他变量 -->
    </vars>
    <modules>
        <Magento_Catalog>
            <file>templates/product/list.phtml</file>
        </Magento_Catalog>
    </modules>
</view>

原理：这个配置告诉 Magento，当系统需要加载 Magento_Catalog 模块的 list.phtml 时，不要去 vendor/magento/module-catalog/view/frontend/templates/ 目录下找，而是去你的主题目录 app/design/frontend/[Vendor_Name]/[Theme_Name]/Magento_Catalog/templates/product/list.phtml 下找。

优点：

干净：不需要修改任何核心代码。
可维护性高：升级 Magento 时,你的修改不会丢失。

创建自定义模块

如果你需要创建一个全新的页面，或者你的自定义逻辑非常复杂,应该创建一个自定义模块。

步骤：

创建模块目录结构：

app/
└── code
    └── [Vendor]/
        └── [Module]/
            ├── registration.php
            ├── etc/
            │   └── module.xml
            └── view/
                └── frontend/
                    ├── layout/
                    │   └── [your_module_index.xml]
                    └── templates/
                        └── [your_template.phtml]

创建布局文件 ([your_module_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>
        <referenceContainer name="content">
            <block class="[Vendor]\[Module]\Block\Custom" name="custom.block" template="[Vendor]_[Module]::custom.phtml" />
        </referenceContainer>
    </body>
</page>

创建 Block 类 ([Vendor]\[Module]\Block\Custom.php)：这个类负责准备数据。

namespace [Vendor]\[Module]\Block;
class Custom extends \Magento\Framework\View\Element\Template
{
    public function getHelloMessage()
    {
        return "Hello from my custom module!";
    }
}

创建模板文件 (custom.phtml)：这个文件显示数据。

<?php
/**
 * @var $block \[Vendor]\[Module]\Block\Custom
 */
?>
<h1><?= $block->getHelloMessage() ?></h1>

创建路由 (在 etc/frontend/routes.xml 中配置)，以便通过 URL 访问这个页面。

直接修改核心文件（不推荐！）

直接修改 vendor 目录下的文件是绝对错误的做法，当你下次运行 composer update 或升级 Magento 时，你的所有修改都会被覆盖,导致网站崩溃。

常用模板文件和布局

了解一些关键文件的位置可以帮助你快速定位和修改。

页面布局文件

定义了页面的基本结构，比如是 1-column, 2-left, 3-columns 等。

位置：vendor/magento/module-theme/view/frontend/page_layout/
你的主题可以覆盖它：app/design/frontend/[Vendor]/[Theme]/Magento_Theme/page_layout/

默认主布局文件

所有页面在没有指定其他布局文件时,都会回退到这个文件。

位置：vendor/magento/module-theme/view/frontend/layout/default.xml
你的主题可以覆盖它：app/design/frontend/[Vendor]/[Theme]/Magento_Theme/layout/default.xml

常见页面布局文件

首页: vendor/magento/module-cms/view/frontend/layout/cms_index_index.xml
产品列表页: vendor/magento/module-catalog/view/frontend/layout/catalog_category_view.xml
产品详情页: vendor/magento/module-catalog/view/frontend/layout/catalog_product_view.xml

调试模板

在 Magento 2.1 中调试模板非常有用。

启用模板路径提示

这是一个非常有用的功能,它会直接在页面上显示每个块对应的模板文件路径。

方法：在 URL 后面添加 ?___store=default&___from_store=default&tp=1
- https://your-magento-store.com/home-page?___store=default&___from_store=default&tp=1
效果：页面上会出现半透明的提示框,告诉你当前块的名称和模板文件路径。

使用 Xdebug

如果你需要调试 PHP 代码（Block 类），配置 Xdebug 是最专业的方法，你可以设置断点,一步步跟踪代码的执行流程。

检查缓存

Magento 2 有强大的缓存系统，在你修改了模板、布局或 Block 之后，一定要清理缓存,否则你可能看不到任何变化。

命令行清理：bin/magento cache:clean
后台清理：System > Cache Management，选择所有缓存类型,然后刷新。

对于 Magento 2.1,掌握模板系统的关键在于：

理解 Layout-Block-Template 的关系：这是所有自定义的基础。
遵循主题层次结构：永远优先在你的主题目录下进行覆盖，而不是修改 vendor 目录。
使用 view.xml 进行模板覆盖：这是最简单、最安全的覆盖方式。
为复杂逻辑创建自定义模块：保持核心代码的纯净。
善用调试工具：模板路径提示是你的好朋友。

希望这份详细的指南能帮助你更好地理解和使用 Magento 2.1 的模板系统！

Magento 2.1模板如何自定义？