magento模板制作教程-建站教程-锦华智联科技

Magento 模板制作终极指南

Magento (Adobe Commerce) 是一个功能极其强大的电商平台，其模板系统也相对复杂,理解其核心架构是成功制作模板的关键。

（图片来源网络，侵删）

第一部分：核心概念理解

在开始动手之前，你必须先理解 Magento 的三个核心概念：模块、主题和布局，它们协同工作,共同决定了你的网站最终呈现的样子。

模块

模块是 Magento 功能的基本单元,每个模块都负责特定的功能，

Catalog: 商品管理
Checkout: 结账流程
Customer: 客户账户
Cms: 静态页面和块

每个模块都包含自己的布局文件 和 PHTML 模板文件，它们定义了功能的“骨架”和“血肉”。

主题

主题是你网站的“皮肤”或“外观”，它负责定义网站的视觉呈现，包括颜色、字体、图片和布局，一个 Magento 网站可以同时激活一个父主题 和一个子主题。

（图片来源网络，侵删）

父主题: 包含所有基础的模板文件、静态文件和布局文件。
子主题: 继承父主题的所有内容，并允许你覆盖或添加文件来自定义外观。最佳实践是始终创建一个子主题，这样在升级父主题时,你的自定义修改不会被覆盖。

布局

布局是连接“模块功能”和“主题模板”的桥梁，它是一个 XML 文件，负责定义页面上有哪些元素,以及它们的显示顺序。

布局文件: 位于 app/design/frontend/{Vendor}/{theme}/Magento_XXX/layout/ 目录下，它们以 .xml 为后缀。
布局指令: 布局文件通过指令来操作页面，最常见的指令是：
- <block>: 定义一个块，可以是一个容器（<block class="Magento\Framework\View\Element\Html\Header" name="header" template="Magento_Theme::html/header.phtml"/>）或一个可渲染的内容块。
- <move>: 移动一个块到页面的另一个位置（<move element="catalog.topnav" destination="header.panel" before="-"/>）。
- <referenceContainer>: 引用一个容器，并对其进行操作（如删除 <referenceContainer name="content"> <remove name="content"/> </referenceContainer>）。
- <referenceBlock>: 引用一个块，并对其进行操作（如禁用 <referenceBlock name="catalog.topnav"> <action method="unsetChild"><name>catalog.topnav</name></action> </referenceBlock>）。

块和 PHTML 模板

块: 是一个 PHP 类，负责获取和准备数据。ProductList 块会从数据库中获取产品列表,块不负责显示。
PHTML 模板: 是一个包含 HTML 和 PHP 代码的文件，负责显示块准备好的数据，每个块都关联一个 PHTML 模板文件。

工作流程：

Magento 根据当前页面（如首页、产品详情页）加载对应的布局文件。
布局文件通过 <block> 和 <referenceBlock> 指令定义页面结构。
每个 <block> 指令都指定了一个模板文件。
Magento 实例化这些块，执行其 PHP 代码来获取数据。
将块的数据传递给其关联的 PHTML 模板，并渲染出最终的 HTML。

第二部分：实战制作一个自定义主题

我们将遵循 Magento 的最佳实践，创建一个基于官方 Magento/luma 主题的子主题。

步骤 1：规划主题目录结构

在 app/design/frontend/ 目录下创建你的主题目录，命名规范为 {Vendor}/{theme_name}。

（图片来源网络，侵删）

假设我们的供应商是 MyCompany，主题名是 my_custom_theme。

app/
└── design/
    └── frontend/
        └── MyCompany/
            └── my_custom_theme/  <-- 这就是我们的子主题目录

步骤 2：创建主题文件和配置

录下,创建以下基本文件和目录：

app/design/frontend/MyCompany/my_custom_theme/
├── registration.php
├── theme.xml
├── composer.json
└── web/
    └── images/
    └── css/
    └── js/
└── etc/
│   └── view.xml
└── Magento_Theme/
    └── layout/
    └── templates/

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

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

theme.xml 这个文件定义了主题的基本信息,最重要的是指定它的父主题。

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

composer.json 用于包管理和依赖声明。

{
    "name": "mycompany/my-custom-theme",
    "description": "N/A",
    "require": {
        "php": "~7.0.13|~7.1.0|~7.2.0",
        "magento/framework": "100.1.0|100.1.1|100.1.2|100.1.3|100.1.4|100.1.5|100.1.6|100.1.7|100.1.8|100.1.9|100.1.10|100.1.11|100.1.12|100.1.13|100.1.14|100.1.15|100.1.16|100.1.17|100.1.18|100.1.19|100.1.20|100.1.21|100.1.22|100.1.23|100.1.24|100.1.25|100.1.26|100.1.27|100.1.28|100.1.29|100.1.30|100.1.31|100.1.32|100.1.33|100.1.34|100.1.35|100.1.36|100.1.37|100.1.38|100.1.39|100.1.40|101.0.0|101.0.1|101.0.2|101.0.3|101.0.4|101.0.5|101.0.6|101.0.7|101.0.8|101.0.9|101.0.10|101.0.11|101.0.12|101.0.13|101.0.14|101.0.15|101.0.16|101.0.17|101.0.18|101.0.19|101.0.20|101.0.21|101.0.22|101.0.23|101.0.24|101.0.25|101.0.26|101.0.27|101.0.28|101.0.29|101.0.30|101.0.31|101.0.32|101.0.33|101.0.34|101.0.35|101.0.36|101.0.37|101.0.38|101.0.39|101.0.40|102.0.0|102.0.1|102.0.2|102.0.3|102.0.4|102.0.5|102.0.6|102.0.7|102.0.8|102.0.9|102.0.10|102.0.11|102.0.12|102.0.13|102.0.14|102.0.15|102.0.16|102.0.17|102.0.18|102.0.19|102.0.20|102.0.21|102.0.22|102.0.23|102.0.24|102.0.25|102.0.26|102.0.27|102.0.28|102.0.29|102.0.30|102.0.31|102.0.32|102.0.33|102.0.34|102.0.35|102.0.36|102.0.37|102.0.38|102.0.39|102.0.40|103.0.0|103.0.1|103.0.2|103.0.3|103.0.4|103.0.5|103.0.6|103.0.7|103.0.8|103.0.9|103.0.10|103.0.11|103.0.12|103.0.13|103.0.14|103.0.15|103.0.16|103.0.17|103.0.18|103.0.19|103.0.20|103.0.21|103.0.22|103.0.23|103.0.24|103.0.25|103.0.26|103.0.27|103.0.28|103.0.29|103.0.30|103.0.31|103.0.32|103.0.33|103.0.34|103.0.35|103.0.36|103.0.37|103.0.38|103.0.39|103.0.40|104.0.0|104.0.1|104.0.2|104.0.3|104.0.4|104.0.5|104.0.6|104.0.7|104.0.8|104.0.9|104.0.10|104.0.11|104.0.12|104.0.13|104.0.14|104.0.15|104.0.16|104.0.17|104.0.18|104.0.19|104.0.20|104.0.21|104.0.22|104.0.23|104.0.24|104.0.25|104.0.26|104.0.27|104.0.28|104.0.29|104.0.30|104.0.31|104.0.32|104.0.33|104.0.34|104.0.35|104.0.36|104.0.37|104.0.38|104.0.39|104.0.40",
        "magento/theme-frontend-luma": "100.1.*"
    },
    "type": "magento2-theme",
    "version": "1.0.0",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

步骤 3：部署和激活主题

部署主题 在你的 Magento 根目录下,运行以下命令来注册你的新主题：

bin/magento setup:upgrade

激活主题 登录你的 Magento 后台，进入 Content > Configuration，在 Store View 下拉菜单中选择你要应用的主题，然后点击 Edit，在 Theme 字段中，选择 My Company Custom Theme，然后点击 Save Config。

编译和清理缓存

bin/magento setup:static-content:deploy en_US # 根据你的网站语言替换
bin/magento cache:clean

现在访问你的前台网站，你应该能看到和 Luma 主题一模一样的网站,因为我们的子主题目前还没有任何自定义内容。

步骤 4：自定义模板文件

这是最核心的部分,我们通过覆盖父主题的模板文件来自定义网站。

示例 1：修改页头

在父主题 luma 中，页头的模板文件是 app/design/frontend/Magento/luma/Magento_Theme/templates/html/header.phtml。
我们想在子主题中修改它，所以在我们的子主题中创建同样的目录结构：app/design/frontend/MyCompany/my_custom_theme/Magento_Theme/templates/html/header.phtml。
打开这个新创建的 header.phtml 文件，进行修改，在 logo 下方添加一句欢迎语：

// ... 原有的 header.phtml 代码 ...
<div class="panel header">
    <!-- ... -->
    <div class="header content">
        <strong class="logo">
            <!-- ... logo 代码 ... -->
        </strong>
        <!-- 在这里添加我们的自定义内容 -->
        <div class="custom-welcome-message">
            <h2>Welcome to My Awesome Store!</h2>
        </div>
        <!-- ... 菜单、搜索框等 ... -->
    </div>
</div>
// ... 原有的 header.phtml 代码 ...

示例 2：通过布局文件添加一个块

假设我们想在首页的页脚上方添加一个自定义的 "关于我们" 链接。

创建 PHTML 模板文件 在我们的子主题中创建模板文件： app/design/frontend/MyCompany/my_custom_theme/Magento_Theme/templates/custom/about-link.phtml 如下：

<a href="/about-us" class="custom-about-link">Learn More About Us</a>
<style>
    .custom-about-link {
        display: block;
        text-align: center;
        padding: 10px;
        background-color: #f0f0f0;
        color: #333;
        text-decoration: none;
        font-weight: bold;
    }
</style>

创建布局文件来调用这个模板 我们需要修改首页的布局，在子主题中创建布局文件： app/design/frontend/MyCompany/my_custom_theme/Magento_Theme/layout/cms_index_index.xml 如下：

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <!-- 
            在 before="footer" 的位置，添加一个名为 custom.about.link 的新块。
            这个块使用我们刚刚创建的 about-link.phtml 模板。
        -->
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" name="custom.about.link" template="Magento_Theme::custom/about-link.phtml" before="footer"/>
        </referenceContainer>
    </body>
</page>

清理缓存并查看效果
```
bin/magento cache:clean
```
刷新你的首页，你应该就能在页脚上方看到新添加的 "Learn More About Us" 链接了。

第三部分：高级技巧和最佳实践

使用 Less/Sass 进行样式定制

Magento 默认使用 Less (Luma 主题) 或 Sass (Blank 主题)，不要直接修改 PHTML 中的 <style> 标签,这很糟糕。

方法：覆盖 Less 文件
1. 从父主题 luma 复制 app/design/frontend/Magento/luma/web/css/source/_module.less 到你的子主题 app/design/frontend/MyCompany/my_custom_theme/web/css/source/_module.less。
2. 在你的 _module.less 中进行修改，修改主色调：
```
// 在你的 _module.less 文件中
@primary__color: #ff5500; // 将主色调改为橙色
```
3. 运行 bin/magento setup:static-content:deploy 命令，Less 文件会被自动编译成 CSS。

使用静态块和 CMS 页面

对于不常变动的文本、图片或 HTML 片段（如公司简介、广告语）,不要写在模板里。

创建静态块:
1. 后台进入 Content > Elements > Blocks。
2. 点击 Add New Block，设置标识符（Identifier，如 home_about_us和内容。
3. 在模板中调用它：<?= $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('home_about_us')->toHtml(); ?>

调试技巧

查看布局句柄: 在页面的某个位置添加 <?php echo $this->getLayout()->getUpdate()->getHandles(); ?>，可以看到当前页面加载了哪些布局文件（如 default, cms_index_index, catalog_category_view 等）。
检查块名称: 使用浏览器的开发者工具，找到你想修改的 HTML 元素，然后查看其 data-block 或 class 属性,通常能找到块的名称。
使用 Xdebug: 设置 Xdebug 可以让你在修改模板文件时直接在 IDE（如 VS Code, PhpStorm）中打断点调试,极大提高效率。

性能优化

最小化自定义代码：只修改你需要的部分。
合理使用缓存：Magento 有多层缓存,确保在修改后正确清理相关缓存。
合并和压缩 CSS/JS：在后台 Content > Design > Configuration > Edit (你的主题) > HTML Head 中开启。

制作 Magento 模板是一个系统性的工程，关键在于理解 模块-布局-主题 三者之间的关系。

核心流程回顾：

创建子主题目录结构 (app/design/frontend/...)。
配置主题文件 (registration.php, theme.xml)。
部署并激活主题 (setup:upgrade, 后台设置)。
自定义：
- 修改外观：覆盖 templates 和 web 目录下的文件。
- 修改结构：在 layout 目录下创建/修改 .xml 文件。
- 修改样式：覆盖 web/css/source 下的 .less 文件。
部署静态内容并清理缓存 (setup:static-content:deploy, cache:clean)。

希望这份详尽的教程能帮助你顺利开启 Magento 模板开发之旅！

magento模板制作教程

Magento 模板制作终极指南

第一部分：核心概念理解

模块

主题

布局

块 和 PHTML 模板

第二部分：实战制作一个自定义主题

步骤 1：规划主题目录结构

步骤 2：创建主题文件和配置

步骤 3：部署和激活主题

步骤 4：自定义模板文件

第三部分：高级技巧和最佳实践

使用 Less/Sass 进行样式定制

使用静态块 和 CMS 页面

调试技巧

性能优化

块和 PHTML 模板

使用静态块和 CMS 页面