在这篇博客中,我们将了解magento2中的布局和模板并学会如何使用它们。
magento2的主题包含模板和布局,您可以将布局想象为指定页面的整体结构(如页眉,页脚,左列,右列等)而模板作为添加功能的代码片段。
因此,布局文件可能将布局指定为1column-left或2column-right以及将要加载到页面中的模板,加载的每个模板都会添加页面上所需的功能。
在magento中布局文件是xml文件,模板文件是phtml(php)文件。
您可以在“app/Magento/Module/Theme”或“vendor/magento/module-theme”中查看其中一些文件
1. view/frontend/layout
2. view/frontend/page_layout
3. view/frontend/templates
这只是对这些文件浅层的内容给出一个基本的概念。
Magento2布局
让我们看看magento布局的基础知识,布局有两种类型
1.页面布局
2.页面配置
两者都在这里详细解释http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/layout-types.html
Magento2布局说明
在布局文件中我们使用许多标签等
你可以在这里详细了解http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-instructions.html
使用布局
上面我们看到有两种不同类型的布局和各种布局标签,现在让我们看看如何在自定义主题中使用它们并进行自定义。
Blocks
Block是将类和布局链接在一起的PHP类,我们像这样定义布局文件中的块
<block class="Magento\Theme\Block\Html\Footer" name="copyright" template="html/copyright.phtml" />
所以“block”连接模版和类,并允许我们将它放在布局中的正确位置。
让我们详细看一下属性
class是必需的,它定义模板的block类,block类充当模板文件的“$block”,模块中调用的所有函数都在block类中定义。
例如,如果您打开“html/copyright.phml”文件,您将找到该代码
<small class="copyright"> <?php /* @escapeNotVerified */ echo $block->getCopyright() ?> </small>
这个方法
$block->getCopyright()
定义类“Magento\Theme\Block\Html\Footer”
name用于标识块,这是必需的,之后我们会看到当我们重写标签时name是非常重要的
template 这用于指定phtml文件,我们可以指定html/php代码
as给block设置一个别名
让我们尝试在标题中的搜索文本字段旁边添加一个示例文本“Hello Magento2”
在实现的时候我们一般的想法会是,在搜索文本框的现有块下面添加一个新块,创建一个新的模板文件来输出文本。我们将使用我们为此创建的“Magease/first”主题。
步骤1:我们需要找到现有搜索框的模板路径,为此,我们从magento admin打开“Template Path Hints”,"admin -> stores -> advanced -> developer -> debug -> Enabled Template Path Hints"将其设置为是,执行此操作后打开前端主页,您会看到许多红色模板路径,这显示了每个模板的来源,您可以搜索“module-search/view/frontend/templates/form.mini.phtml”字段来找到模版。
步骤2:一旦我们知道模块是“module-search”,我们就会看到位于“Magento/Search/view/frontend/layout”文件夹中的模块布局文件,这是我们在default.xml中看到的代码
<referenceContainer class="header-wrapper"> <block class="Magento\Framework\View\Element\Template" name="top.search" as="top.search" template="Magento_Search::form.mini.phtml" /> </referenceContainer>
步骤3:添加我们自己的布局和模板文件,为此,我们将使用扩展布局文件的概念,稍后我们将详细介绍,
但是现在在我们的主题中创建一个文件夹“Magento_Search”,然后将“layout”和“templates”文件夹放在Magento_Search文件夹中。
所以我们的路径看起来像
app/design/frontend/Magease/first/Magento_Search/layout
app/design/frontend/Magease/first/Magento_Search/template
现在我们需要注册我们的主题并创建所需的文件,以便我们可以在Magento2 admin panel->configuration->general->design中找到我们的主题。
我们需要创建以下三个文件:
1. theme.xml 2. registration.php 3. composer.json
阅读http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html以了解这些文件
注意:这3个文件将被创建到以下路径中
app/design/frontend/Magease/first
创建这些文件后,使用系统升级命令,然后您将看到您的主题
admin panel->configuration->general->design
步骤4:在布局文件夹中创建一个default.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="header-wrapper"> <block class="Magento\Framework\View\Element\Template" name="sample123" template="Magento_Search::sample.phtml" /> </referenceContainer> </body> </page>
在这里你可以看到我们在'header-wrapper'中添加了一个新的block。
Magento\Framework\View\Element\Template:这个block由magento中的所有block扩展,因此可以在任何地方使用。如果您需要创建一个简单的模板,可以使用这个block。
步骤5:在Magease/first/Magento_Search/template文件夹中创建sample.phtml文件,并添加以下代码
<div class="block"> <?php echo __('Hello Magento2'); ?> </div>
__(' ')此函数用于magento中的多语言支持,在显示任何字符串时都应该使用此函数。
现在前端应该显示为