Dans la première partie de cette série, nous avons appris les bases du développement de modules Magento, y compris la structure de répertoires Magento, la structure des modules personnalisés, et avons créé un module de base "Hello World" pour comprendre le fonctionnement des contrôleurs dans Magento.
Dans cet article, nous apprendrons comment créer des fichiers de blocs et de mise en page. Plus précisément, nous verrons comment fonctionnent les fichiers de mise en page et les fichiers de bloc dans Magento, et nous en apprendrons davantage sur le rendu des fichiers de mise en page.
Si vous recherchez une solution rapide, il existe des tonnes de thèmes et de modèles Magento sur Envato Market. C'est un excellent moyen de créer rapidement une collection d'éléments low-poly de haute qualité pour votre projet.
Mais passons au tutoriel ! Tout d’abord, nous comprendrons ce que sont les fichiers de mise en page et les fichiers de bloc et comment ils sont utiles lors du rendu des pages frontales dans Magento, puis nous verrons comment les inclure dans nos modules personnalisés.
Comme leur nom l'indique, les fichiers de mise en page sont très utiles lors du rendu de la page d'accueil de Magento. Les fichiers de mise en page sont des fichiers XML situés dans Application > Conception > Frontend > Interface > Thèmes > Mises en page . Ici, vous pouvez voir qu'il existe de nombreux fichiers de mise en page pour un module donné. Chaque module Magento possède son propre fichier de mise en page, tout comme le module client a customer. Les modules incluent des <code class="inline">catalog.xmlcustomer.xml 布局文件一样，目录模块有 catalog.xml fichiers de mise en page. , etc. Ces fichiers de mise en page contiennent des blocs de structure et des blocs de contenu.
Plongeons dans les fichiers de mise en page
et ouvrez le fichier customer.xmlcustomer.xml 我>文件。在这里，所有块都围绕主 <layout></layout> 标记。您可以看到不同的 <tag></tag>
<layout></layout><tag></tag> qui contiennent des blocs spécifiques.
<customer_account_create></customer_account_create>Voir l'extrait de code ci-dessous :
<!--
New customer registration
-->
<customer_account_create translate="label">
<label>Customer Account Registration Form</label>
<!-- Mage_Customer -->
<remove name="right"/>
<remove name="left"/>
<reference name="root">
<action method="setTemplate"><template>page/1column.phtml</template></action>
</reference>
<reference name="content">
<block type="customer/form_register" name="customer_form_register" template="customer/form/register.phtml">
<block type="page/html_wrapper" name="customer.form.register.fields.before" as="form_fields_before" translate="label">
<label>Form Fields Before</label>
</block>
</block>
</reference>
</customer_account_create>
Handle est l'entité principale par laquelle Magento identifie le bloc à charger lors de l'appel d'un module spécifique. <default> est une poignée spécifique au module. Ce gestionnaire est déclenché lorsque quelqu'un ouvre la page d'enregistrement du client.
Blocs de construction Blocs de contenu Dans le fichier de mise en page, nous définissons uniquement des blocs de contenu
, puis nous les enveloppons dans desblocs de construction
phtml sont des propriétés que nous pouvons définir et qui nous permettent de définir la position du bloc dans le bloc de structure <reference>
<remove> 标签用于删除特定块。例如，假设您不想在帐户注册页面上显示右栏和左栏。在这种情况下，您可以使用以下语法简单地删除该块：<remove name="your block name">.
echo $this->getChildHtml('child');
<block type='core/template' name='parent' template='parent.phtml'> <block type='core/template' name='child' template='child.phtml'/> </block>
打开page.xml 布局文件，你会发现<root> 块看起来像下面这样
<block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">
Magento 从根块开始渲染。所有其他块都是根块的子块。根块定义页面的结构。在这里，您可以看到当前它设置为 3columns.phtml，您可以将其更改为 1column.phtml、2columns-right.phtml 或2columns-left.phtml.
对于任何特定页面，您可以将 CSS 和 JavaScript 文件添加到布局标记中，如下所示：
<customer_account_create> <reference name='head'> <action method="addCss"><stylesheet>css/styles.css</stylesheet></action> <action method="addJs"><script>varien/js.js</script></action> </reference> </customer_account_create>
在这里您可以看到我们在客户帐户页面的 head 中添加了一个 CSS 文件和一个 JavaScript 文件。
块类用于定义特定于特定块的功能。块类文件位于应用程序>代码>本地/社区/核心>您的模块命名空间>您的模块名称>块目录中。这些文件包含我们可以直接与 $this 块特定模板文件中的关键字。让我们通过一个例子来了解块类。
转到位于 app > design > frontend > base > default > layout 目录中的 review.xml 文件，并找到以下代码行：
<!--
Customer account home dashboard layout
-->
<customer_account_index>
<!-- Mage_Review -->
<reference name="customer_account_dashboard">
<block type="review/customer_recent" name="customer_account_dashboard_info1" as="info1" template="review/customer/recent.phtml"/>
</reference>
</customer_account_index>
在这里您可以看到引用模板 review/customer_recent 的块 review/customer_recent ">最近.phtml。 转到应用 > 设计 > 前端 > 基础 > 默认 > 模板 > 审核 > 客户 并打开 最近的.phtml。
在此文件中，您可以看到使用 $this 关键字调用两个函数。它们是 $this->getCollection() 和 $this->count()。 这些函数在其块类文件 recent.php 中定义，该文件位于 应用 > 代码 > 核心 > Mage > 审查 > 阻止 > 客户 目录。
这里，块 type = "review/customer_recent" 指的是在 recent. 文件中定义的 Mage_Review_Block_Customer_Recent 块类。无论您在此类中定义什么函数，都可以直接在相应的模板文件中使用 $this 来使用它。
最后，我们留下了带有控制器的自定义“Hello World”模块。在这里，我们创建了自定义模块的布局文件。所以让我们创建它。
要创建布局文件，我们需要首先创建块类文件。在添加类文件之前，我们需要告诉模块我们正在包含块文件。因此，转到 app > code > local > Chiragdodia > Mymodule > etc > config.xml 并添加以下内容代码行：
<frontend>
<layout>
<updates>
<mymodule>
<file>mymodule.xml</file> <!-- Our layout file name-->
</mymodule>
</updates>
</layout>
</frontend>
<global>
<blocks>
<mymodule>
<class>Chiragdodia_Mymodule_Block</class>
</mymodule>
</blocks>
</global>
最终的 XML 文件包含以下代码行：
<?xml version="1.0"?>
<config>
<modules>
<Chiragdodia_Mymodule>
<version>0.1.0</version> <!-- Version of module -->
</Chiragdodia_Mymodule>
</modules>
<frontend>
<routers>
<mymodule>
<use>standard</use>
<args>
<module>Chiragdodia_Mymodule</module>
<frontName>mymodule</frontName>
</args>
</mymodule>
</routers>
<layout>
<updates>
<mymodule>
<file>mymodule.xml</file> <!-- Our layout file name-->
</mymodule>
</updates>
</layout>
</frontend>
<global>
<blocks>
<mymodule>
<class>Chiragdodia_Mymodule_Block</class>
</mymodule>
</blocks>
</global>
</config>
接下来，转到 app > code > local > Chiragdodia > Mymodule > Block 并创建文件 Mymodule.php < /b>包含以下代码行
<?php
class Chiragdodia_Mymodule_Block_Mymodule extends Mage_Core_Block_Template
{
public function myfunction()
{
return "Hello tuts+ world";
}
}
这里我们声明了类 Chiragdodia_Mymodule_Block_Mymodule ，其中包含函数 myfunction ，我们可以直接从布局模板文件中调用它。
转到app > design > frontend > default > default > layout 并创建 mymodule.xml 文件，其中包含以下代码行
<?xml version="1.0"?>
<layout version="0.1.0">
<mymodule_index_index>
<reference name="content">
<block type="mymodule/mymodule" name="mymodule" template="mymodule/mymodule.phtml" />
</reference>
</mymodule_index_index>
</layout>
转到应用 > 设计 > 前端 > 默认 > 默认 > 模板 并创建 mymodule.phtml 文件。在此文件中，我们将调用我们在块类中声明的函数 myfunction 。
<?php
echo $this->myfunction();
?>
如果到目前为止一切都正确，您将通过访问 URL yoursite.com/index.php/mymodule/index 看到具有三列布局的输出。
在某些 Magento 版本中，默认主题不包含布局和模板目录。在这种情况下，您可以在app > design > frontend > base 目录中创建布局和模板文件。
这就是 Magento 中布局的工作原理。在上一篇文章中，我们创建了简单的“Hello World”模块，在本文中我们使用布局文件创建它。 Magento 的布局结构一开始有点难以理解，但是一旦你开始修改它，你就会很容易地理解它背后的想法。
Dans cet article, j'ai joint le fichier de démonstration du module que nous avons créé jusqu'à présent. Si vous avez des questions sur ce problème particulier, n'hésitez pas à laisser un commentaire pour toute question.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Comment configurer le pare-feu Linux
Cache mybatis de premier niveau et cache de deuxième niveau
Somme de cellule
Comment utiliser insertBefore en javascript
A quoi sert principalement javascript ?
Que signifient les faces C et B ?
Comment créer des graphiques et des graphiques d'analyse de données en PPT
Comment gérer le décalage et la réponse lente d'un ordinateur portable
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
