现在让我们回到前端开发。 之前我们创建了一个控制器,我在其中编写了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文件中找到更多的容器和块名称。

在容器内部,我们使用块标签调用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,我们应该在客户导航中有一个菜单。
到现在为止的文件夹结构
