Magento2 Layout and Templates 布局和模板

现在让我们回到前端开发。 之前我们创建了一个控制器,我在其中编写了die语句以向您展示该控制器正在工作。 但是在现实世界中,我们必须显示html内容。

为了显示html内容,我们使用.phtml文件。 这些.phtml文件称为模板文件。 为了使用.phtml文件映射控制器,我们使用布局文件。 布局文件为.xml类型。 因为所有这些都与查看页面有关。 因此,将它们放置在另一个文件夹(称为视图文件夹)中是有意义的。

首先,我们需要修改控制器文件,Controller/Manage/Add.php

<?php
namespace Yshuq\BlogManager\Controller\Manage;
use Magento\Customer\Controller\AbstractAccount;
use Magento\Framework\App\Action\Context;
use Magento\Framework\View\Result\PageFactory;

class Add extends AbstractAccount
{
    public function __construct(
        Context $context,
        PageFactory $resultPageFactory
    ) {
        $this->resultPageFactory = $resultPageFactory;
        parent::__construct($context);
    }

    public function execute()
    {
        //echo('<h1>Hello World</h1>');
        $resultPage = $this->resultPageFactory->create();
        $resultPage->getConfig()->getTitle()->set(__('Add Blog'));
        $layout = $resultPage->getLayout();
        return $resultPage;
    }
}

在这里,我们使用\ Magento \ Framework \ View \ Result \ PageFactory类初始化布局。 这样我们可以配置页面,在这里我们设置了页面的标题。 在调用getLayout()方法处理布局文件之后,我们返回了结果页面。

Layout

现在,如果您注意到我们没有在控制器中明确提及布局文件名。 因此,magento将寻找名称为routerId_controllerName_actionName.xml的布局文件。 如果我们想要的话,我们可以明确地给像

$resultPage->addHandle('some_other_layout');

对于布局文件,我们需要在模块目录下创建view / frontend / layout文件夹。 在布局文件夹中,我们需要创建名称为blogmanager_manage_add.xml的布局文件。 如果您还记得,我们使用blogmanager作为我们的路由器ID。 通常的做法是将routerId与frontName相同,因为布局文件名将类似于url。

<?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>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" name="blogmanager.blog.add" template="Yshuq_BlogManager::add.phtml" />
        </referenceContainer>
    </body>
</page>

正如您在页面标记中看到的那样,我们使用了值为1column的layout属性。 Magento支持不同类型的布局,例如,

  • 1coumn
  • 2columns-left
  • 2columns-right
  • 3columns

body节点表示我们正在修改html的body标签内的内容。 magento中的页面布局由多个容器组成。 并且该容器可以具有嵌套容器。 最里面的容器中有块,每个块可以有子块

为简单起见,您可以将页眉,页脚,主要内容视为单独的容器。 但是magento的布局结构要复杂得多,这有助于我们修改任何组件。 对于2列左布局,主要内容将具有两个子容器,一个内容容器在左侧,另一个作为侧边栏容器。

使用referenceContainer标记,我们可以定位任何容器,这里我们定位的是名称为content的主容器。 您可以在vendor / magento / module-theme / view / frontend / layout / default.xml文件中找到更多的容器和块名称。

default.xml

在容器内部,我们使用块标签调用pthml文件。 在这里,我们使用默认的模板块类Magento \ Framework \ View \ Element \ Template,但如果必须将一些数据传递到phtml中,则可以创建自己的块类。 我们将在下一个博客中看到有关Block类的更多信息。 块标签具有名称属性,我们可以在此处使用任何明智的名称来标识该块。

Templates

块标记中有趣的部分是template =” Yshuq_BlogManager :: add.phtml”,它表示模板文件的路径。 ::的第一部分是模块名称,第二部分是参考view / frontend / templates文件夹的路径。 就像在路径中一样,我们给了phtml文件名,因此我们可以直接在view / frontend / templates文件夹下创建add.phtml文件。

<div class="blog-container">
    <form class="blog-form">
        Title: <input type="text" name="title"/>
        Content: <textarea name="content"></textarea>
        <button type="submit">Submit</button>
    </form>
</div>

编写完所有这些代码后,我们必须运行di compile命令。 现在,如果您浏览网址,则会看到该页面,

界面效果

请自行尝试不同的布局类型。

如果您在模板文件中进行了一些更改,但在重新加载页面时找不到该文件,请刷新缓存

	
php bin/magento cache:flush

我们的目标是创建一个博客门户,客户可以在其中编写博客。 因此,该页面应看起来像其他客户帐户页面一样有意义,而不是手动输入url,我们应该在客户导航中有一个菜单。

到现在为止的文件夹结构

目录结构