Magento2 主题 - 布局和模板1

2018年10月8日 浏览量 50 2 min read
Magento2 主题 - 布局和模板1

在这篇博客中,我们将了解magento2中的布局和模板并学会如何使用它们。

magento2的主题包含模板和布局,您可以将布局想象为指定页面的整体结构(如页眉,页脚,左列,右列等)而模板作为添加功能的代码片段。

因此,布局文件可能将布局指定为1column-left2column-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中的多语言支持,在显示任何字符串时都应该使用此函数。

现在前端应该显示为

Previous article:
Next article:
Comments
发表评论,留下你的足迹
我们不会公开你的邮箱地址

是否允许我们在发布新内容或者进行促销活动向您发送消息?

Remind me later

Thank you! Please check your email inbox to confirm.

Oops! Notifications are disabled.

© 2014-2023 www.magease.com. All Rights Reserved. 寰云网络 版权所有    鲁ICP备 14014975号-1