Magento2中 创建模板和布局渲染

模板和布局渲染

Magento 2提供了一种强大的机制,可以使用自定义模板扩展电子商务功能。它还允许通过使用声明性方法提供额外的内容。

Lesson Overview

在本课程中,我们将学习以下内容:

  • 如何创建模板?
  • 如何在自定义的Magento 2页面上呈现模板?
  • 如何通过布局配置文件添加模板?

Before we begin

这是模块的结构,我们将从以下内容开始:

对于本教程,我创建了MageMastery_FirstLayout 模块,registration.php 和 module.xml。模块已经通过bin/magento setup:upgrade 终端命令成功注册。

registration.php文件如下

<?php

use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(
    ComponentRegistrar::MODULE,
    'MageMastery_FirstLayout',
    __DIR__
);

module.xml文件如下:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="MageMastery_FirstLayout" />
</config>

有关模块创建和注册的更多信息,请参阅上一课《 Magento 2中的模块》

除此之外,我还添加了route.xml带有Action Controller类的文件。这两个文件允许访问MageMastery_FirstLayout模块中已声明的自定义页面。

routes.xml文件内容如下:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="standard">
        <route id="magemastery_firstlayout" frontName="firstlayout">
            <module name="MageMastery_FirstLayout" />
        </route>
    </router>
</config>

route.xml文件位于MageMastery/FirstLayout/etc/frontend目录中。此配置允许使用URL的“ firstlayout” URI路径访问模块的控制器。

而Action控制器类位于MageMastery/FirstLayout/Controller/Page/View.php文件中,内容为:

<?php

declare(strict_types=1);

namespace MageMastery\FirstLayout\Controller\Page;

use Magento\Framework\App\Action\Action;
use Magento\Framework\Controller\ResultFactory;
use Magento\Framework\View\Result\Page;

class View extends Action
{
    public function execute()
    {
        /** @var Page $resultPage */
        return $this->resultFactory->create(ResultFactory::TYPE_PAGE);
    }
}

New Page Type Object

在Magento的“创建页面”2课中,我们学习了如何创建自定义页面并返回json格式的数据。您已经注意到,有一个从execute()方法返回Magento\Framework\View\Result\Page 的一个对象实例。

return $this->resultFactory->create(ResultFactory::TYPE_PAGE);

创建了一个TYPE_PAGE 对象的结果,背后的思想是触发Magento 2呈现机制(渲染)。

Rendering

在本课中,我们将学习一个新目录。该目录称为view。正如我们在上一教程中讨论的那样,Magento 2应用程序使用不同的配置区域。它也适用于渲染目的。前端和adminhtml是我们可以用来在Storefront和Admin区域上相应呈现自定义内容的两个区域。

这是我们在本课中要学习的一个新目录。该目录称为view。正如我们在上一教程中所讨论的,Magento 2应用程序使用不同的配置区域。它也适用于渲染目的。我们可以使用frontend和adminhtml在店面和管理区域上相应地呈现定制内容。

目录中可能还有其他文件和目录view,但是,这不在本课程之内。在接下来的课程中,我们将学习不同的渲染区域,以及如何使用它为不同的区域提供不同的文件。

如果我们想在Storefront,(店面中)呈现某些内容,则必须创建一个view/frontend目录。在此目录内,应添加所有文件,并进一步在前端区域中执行这些文件。这会在Magento 2渲染时发生。在frontend目录内部,有两个目录。layout目录用于放置MageMastery_FirstLayout模块的布局配置文件。

templates目录包含必须在Magento 2店面中呈现的PHTML模板

Layout Configuration File

必须将新的magemastery_firstlayout_page_view.xml布局配置文件添加到MageMastery/FirstLayout/view/frontend/layout目录中。

创建magemastery_firstlayout_page_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>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template"
                   name="magemastery.first.layout.example"
                   template="MageMastery_FirstLayout::example.phtml" />
        </referenceContainer>
    </body>
</page>

Leave a comment

您的电子邮箱地址不会被公开。 必填项已用 * 标注