Individuelles Layout und Template-Design mit Magento

Im ersten Teil dieser Serie haben wir die Grundlagen der Magento-Modulentwicklung erlernt, einschließlich der Magento-Verzeichnisstruktur und der benutzerdefinierten Modulstruktur, und ein grundlegendes „Hello World“-Modul erstellt, um zu verstehen, wie Controller in Magento funktionieren.

In diesem Artikel erfahren Sie, wie Sie Block- und Layoutdateien erstellen. Konkret werden wir sehen, wie Layoutdateien und Blockdateien in Magento funktionieren, und wir werden etwas über das Rendern von Layoutdateien lernen.

Suchen Sie eine schnelle Lösung?

Wenn Sie nach einer schnellen Lösung suchen, gibt es auf Envato Market jede Menge Magento-Themen und -Vorlagen. Dies ist eine großartige Möglichkeit, schnell eine Sammlung hochwertiger Low-Poly-Artikel für Ihr Projekt zusammenzustellen.

Aber machen wir mit dem Tutorial weiter! Zuerst werden wir verstehen, was Layoutdateien und Blockdateien sind und wie nützlich sie beim Rendern von Frontend-Seiten in Magento sind, und dann werden wir sehen, wie wir sie in unsere benutzerdefinierten Module einbinden.

Was ist eine Layoutdatei?

Wie der Name schon sagt, sind Layoutdateien beim Rendern der Homepage von Magento sehr nützlich. Layoutdateien sind XML-Dateien, die sich unter App > Design > Frontend > Interface > Theme > Layout befinden. Hier sehen Sie, dass es für jedes Modul viele Layoutdateien gibt. Jedes Magento-Modul verfügt über eine eigene Layoutdatei, genau wie das Kundenmodul Kundenmodule enthält <code class="inline">catalog.xmlcustomer.xml  布局文件一样，目录模块有 catalog.xml Layoutdateien , usw. Diese Layoutdateien enthalten Strukturblöcke und Inhaltsblöcke.

Wenn Sie sich fragen, warum Magento diese Blöcke benötigt, können Sie im ersten Teil dieser Serie mehr erfahren.

Lassen Sie uns in die Layoutdateien eintauchen

Schauen wir uns Layoutdateien anhand eines Beispiels genauer an. Gehen Sie zu App > Design > Frontend > Grundlagen > Layout

und öffnen Sie die Datei customer.xmlcustomer.xml 我>文件。在这里，所有块都围绕主 <layout></layout>  标记。您可以看到不同的 <tag></tag>

. Hier umgeben alle Blöcke das Haupt-Tag <layout></layout>

. Sie können verschiedene <tag></tag> sehen, die bestimmte Blöcke enthalten.

<customer_account_create></customer_account_create>Sehen Sie sich den Codeausschnitt unten an:

<!--
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>

Griff

Handle ist die Hauptentität, anhand derer Magento den zu ladenden Block identifiziert, wenn ein bestimmtes Modul aufgerufen wird. <default></default> ist ein modulspezifisches Handle. Dieser Handler wird ausgelöst, wenn jemand die Kundenregistrierungsseite öffnet.

Jeder verschachtelte Block verarbeitet seitenspezifischen Inhalt. Einige Layoutdateien enthalten -Handles. An dieser Stelle fragen Sie sich vielleicht nach dem Unterschied zwischen modulspezifischen Handles und Standardhandles. Kurz gesagt, ein modulspezifisches Handle rendert die darin enthaltenen Blöcke nur, wenn das Modul im Browser gerendert wird, während das Standardhandle auf den meisten Seiten geladen wird.

2. Im Handle befinden sich verschiedene Blöcke, die die beim Aufruf des Blocks zu rendernde Vorlagendatei angeben. Es gibt zwei Arten von Blöcken:

Bausteine Inhaltsblöcke In der Layoutdatei definieren wir nur Inhaltsblöcke

und packen sie dann in

Konstruktorblöcke

ein.
1. Wenn beispielsweise jemand die Kundenregistrierungsseite aufruft und wir möchten, dass sie links, rechts, im Inhalt oder in der Fußzeile geladen wird, packen wir diesen Block in den entsprechenden Strukturblock ein. Hier haben wir zwei Blöcke in einen „Inhalts“-Block eingepackt, der ein Strukturblock ist. Der -Block enthält die folgenden Attribute:
2. type definiert eine Blockklasse, in der wir verschiedene Funktionalitäten definieren können
3. Name Definition
Ein eindeutiger Name für einen bestimmten Block, damit andere Blöcke namentlich auf den vorhandenen Block verweisen und ihn erweitern können
4. Vorher/Nachherphtml sind Eigenschaften, die wir festlegen können, um die Position des Blocks innerhalb des Strukturblocks zu definieren
5. Templatedefiniert den tatsächlichen
Dateinamen und Pfad, in dem sich der HTML- und PHP-Code befindet
6. Aktion
ermöglicht uns, dieses Attribut zu verwenden, um eine beliebige Aktion auszulösen, z. B. das Laden von JavaScript usw.

as ist ein Attribut, das hauptsächlich für Strukturblöcke verwendet wird

<reference></reference>

Der

-Tag wird verwendet, um einen bereits vorhandenen Block zu erweitern. In diesem Beispiel erweitern wir den Inhaltsblock und fügen darin unseren eigenen Block ein. Zum Erweitern müssen Sie den richtigen Blocknamen verwenden.

<remove></remove> 标签用于删除特定块。例如，假设您不想在帐户注册页面上显示右栏和左栏。在这种情况下，您可以使用以下语法简单地删除该块：<remove name="your block name">.</remove>

子

echo $this->getChildHtml('child');

🎜Wenn Sie einen Block unter einen anderen Block packen, wird der umschlossene Block als Unterblock bezeichnet. Immer wenn unser Modul den übergeordneten Block aufruft, wird automatisch der untergeordnete Block aufgerufen. 🎜

<block type='core/template' name='parent' template='parent.phtml'>
<block type='core/template' name='child' template='child.phtml'/>
</block>

🎜Sie können Unterblöcke auch einzeln aufrufen, indem Sie die folgende Syntax in einer Vorlagendatei verwenden 🎜🎜

根

打开page.xml 布局文件，你会发现<root></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 添加到布局 XML

对于任何特定页面，您可以将 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 包含以下代码行

<?php
class Chiragdodia_Mymodule_Block_Mymodule extends Mage_Core_Block_Template
{
    public function myfunction()
    {
        return "Hello tuts+ world";
    }
}

这里我们声明了类 Chiragdodia_Mymodule_Block_Mymodule ，其中包含函数 myfunction ，我们可以直接从布局模板文件中调用它。

创建布局 XML 文件

转到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 的布局结构一开始有点难以理解，但是一旦你开始修改它，你就会很容易地理解它背后的想法。

In diesem Beitrag habe ich die Demodatei des Moduls angehängt, das wir bisher erstellt haben. Wenn Sie Fragen zu diesem speziellen Thema haben, können Sie bei Fragen gerne einen Kommentar hinterlassen.

Das obige ist der detaillierte Inhalt vonIndividuelles Layout und Template-Design mit Magento. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!