Reka bentuk dan reka bentuk templat tersuai dengan Magento

Dalam bahagian pertama siri ini, kami mempelajari asas pembangunan modul Magento, termasuk struktur direktori Magento, struktur modul tersuai dan mencipta modul asas "Hello World" untuk memahami cara pengawal berfungsi dalam Magento .

Dalam artikel ini, kita akan belajar cara membuat blok dan fail susun atur. Secara khusus, kita akan melihat cara fail susun atur dan fail blok berfungsi dalam Magento, dan kita akan belajar tentang pemaparan fail susun atur.

Mencari penyelesaian cepat?

Jika anda sedang mencari penyelesaian pantas, terdapat banyak tema dan templat Magento di Pasaran Envato. Ini ialah cara terbaik untuk membina koleksi item poli rendah berkualiti tinggi dengan cepat untuk projek anda.

Tetapi, mari teruskan tutorial! Mula-mula, kami akan memahami apakah fail susun atur dan fail sekat dan cara ia berguna apabila memaparkan halaman hadapan dalam Magento, dan kemudian kami akan melihat cara memasukkannya dalam modul tersuai kami.

Apakah itu fail susun atur?

Seperti namanya, fail susun atur sangat berguna apabila memaparkan halaman utama Magento. Fail reka letak ialah fail XML yang terdapat dalam Apl > Reka Bentuk > Frontend > Antara Muka > Tema > Reka Letak . Di sini anda dapat melihat bahawa terdapat banyak fail susun atur untuk mana-mana modul tertentu. Setiap modul Magento mempunyai fail susun atur sendiri, sama seperti modul pelanggan mempunyai customer.xmlcustomer.xml  布局文件一样，目录模块有 catalog.xml  布局文件等。这些布局文件包含结构块和内容块。

如果您想知道为什么 Magento 需要这些块，您可以在本系列的第一部分中了解更多信息。

让我们深入研究布局文件

让我们通过一个示例来深入了解布局文件。转到应用 > 设计 > 前端 > 基础 > 布局 并打开 customer.xml 我>文件。在这里，所有块都围绕主 <layout></layout>  标记。您可以看到不同的 <tag></tag> 其中包含特定块。

请参阅以下代码片段：

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

句柄

句柄是 Magento 在调用特定模块时识别要加载的块的主要实体。 <customer_account_create> 是模块特定的句柄。当有人打开客户注册页面时会触发此句柄。

每个处理特定于页面的内容嵌套块。某些布局文件包含 <default>  句柄。在此阶段，您可能会询问模块特定句柄和默认句柄之间的区别。简而言之，特定于模块的句柄仅在浏览器中呈现该模块时呈现其内部的块，而默认句柄会在大部分页面中加载。

<块>

句柄内部有不同的块，它们指定调用该块时要渲染的模板文件。块有两种类型：

1. 构建块
2. 内容块

在布局文件中，我们仅定义内容块 ，然后将它们包装在结构器块中。 例如，如果有人正在调用客户注册页面，并且我们希望将其加载到左侧、右侧、内容或页脚，我们会将该块包装在其各自的结构块中。在这里，我们在“内容”块内包装了两个块，这是一个结构块。

块包含如下属性：

1. type定义了我们可以在其中定义不同功能的块类
2. 名称定义 特定块的唯一名称，以便其他块可以按名称引用现有块并扩展它
3. before/after是我们可以设置的属性，允许我们定义块在结构块内的位置
4. 模板定义实际的 phtml 文件名以及 HTML 和 PHP 代码所在的路径
5. action允许我们使用此属性触发任何操作，例如加载 JavaScript 等。
6. as是一个属性，主要用于结构块

<参考>

<reference> 标签用于扩展已经存在的块。在本例中，我们扩展了内容块并将我们自己的块插入其中。您必须使用要扩展的正确块名称。

<删除>

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

子<块>

当您将一个块包装在另一个块下时，该包装块称为子块。每当我们的模块调用父块时，就会自动调用子块。

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

您也可以在模板文件中使用以下语法单独调用子块 echo $this->getChildHtml('child');

fail susun atur , < b>🎜Modul katalog mempunyai catalog.xml🎜 🎜 < / i>Fail susun atur, dsb. Fail reka letak ini mengandungi blok struktur dan blok kandungan🎜. 🎜🎜 🎜Jika anda tertanya-tanya mengapa Magento memerlukan blok ini, anda boleh mengetahui lebih lanjut dalam bahagian pertama siri ini. 🎜

Mari kita mendalami fail reka letak

🎜Mari kita lihat lebih dekat pada fail susun atur dengan contoh. Pergi ke App > Design > Frontend > Basics > Layout 🎜 🎜 dan buka fail customer.xml🎜 🎜. Di sini, semua blok mengelilingi teg <layout>🎜 🎜 utama. Anda boleh melihat <tag> berbeza yang mengandungi blok tertentu. 🎜 🎜Lihat coretan kod berikut: 🎜

 <block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">

Kendalikan

🎜Handle ialah entiti utama yang Magento mengenal pasti blok yang akan dimuatkan apabila memanggil modul tertentu. <customer_account_create>🎜 🎜 ialah pemegang khusus modul. Pengendali ini dipecat apabila seseorang membuka halaman pendaftaran pelanggan. 🎜 🎜Setiap blok bersarang mengendalikan kandungan khusus halaman. Sesetengah fail reka letak mengandungi pemegang <default>🎜 🎜. Pada peringkat ini, anda mungkin bertanya tentang perbezaan antara pemegang khusus modul dan pemegang lalai. Ringkasnya, pemegang khusus modul hanya memaparkan blok di dalamnya apabila modul dipaparkan dalam penyemak imbas, manakala pemegang lalai dimuatkan dalam kebanyakan halaman. 🎜

🎜🎜

🎜Terdapat blok berbeza di dalam pemegang yang menentukan fail templat yang akan diberikan apabila blok dipanggil. Terdapat dua jenis blok: 🎜

1. Blok Bangunan
2. Sekatan kandungan

🎜Dalam fail reka letak, kami hanya mentakrifkan Blok Kandungan🎜 🎜 dan kemudian membalutnya dalam Blok Penstruktur🎜. 🎜Sebagai contoh, jika seseorang menghubungi halaman pendaftaran pelanggan dan kami mahu ia dimuatkan di sebelah kiri, kanan, kandungan atau pengaki, kami akan membungkus blok itu dalam blok struktur masing-masing. Di sini kami telah membungkus dua blok di dalam blok "kandungan", yang merupakan blok struktur. 🎜 Blok 🎜 mengandungi atribut berikut: 🎜

1. 🎜type🎜 mentakrifkan kelas blok di mana kita boleh menentukan fungsi yang berbeza
2. 🎜 Nama 🎜 Definisi 🎜 🎜 Nama unik untuk blok tertentu supaya blok lain boleh merujuk kepada blok sedia ada mengikut nama dan memanjangkannya
3. 🎜sebelum/selepas🎜 ialah sifat yang boleh kami tetapkan, membolehkan kami menentukan kedudukan blok dalam blok struktur
4. 🎜Templat🎜 mentakrifkan nama fail phtml sebenar dan laluan tempat kod HTML dan PHP berada
5. 🎜action🎜 membenarkan kami menggunakan atribut ini untuk mencetuskan sebarang tindakan, seperti memuatkan JavaScript, dsb.
6. 🎜as🎜 ialah atribut, terutamanya digunakan untuk blok struktur

🎜🎜

🎜 <reference> teg digunakan untuk melanjutkan blok yang sedia ada. Dalam contoh ini, kami memanjangkan blok kandungan dan memasukkan blok kami sendiri ke dalamnya. Anda mesti menggunakan nama blok yang betul untuk mengembangkan. 🎜🎜🎜

🎜🎜

🎜 <remove> teg digunakan untuk memadamkan blok tertentu. Sebagai contoh, katakan anda tidak mahu memaparkan lajur kanan dan kiri pada halaman pendaftaran akaun anda. Dalam kes ini, anda boleh mengalih keluar blok menggunakan sintaks berikut: <remove name="your block name">.🎜

🎜子🎜

🎜Apabila anda membungkus blok di bawah blok lain, blok yang dibalut dipanggil sub-blok. Setiap kali modul kami memanggil blok induk, blok kanak-kanak dipanggil secara automatik. 🎜

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

🎜Anda juga boleh memanggil blok kanak-kanak secara individu menggunakan sintaks berikut dalam fail templat echo $this->getChildHtml('child');🎜

根<块>

打开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 添加到布局 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 < /b>包含以下代码行

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

Dalam siaran ini, saya telah melampirkan fail demo modul yang telah kami buat setakat ini. Jika anda mempunyai sebarang soalan tentang isu khusus ini, sila tinggalkan komen dengan sebarang soalan.

Atas ialah kandungan terperinci Reka bentuk dan reka bentuk templat tersuai dengan Magento. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!