Magento를 사용한 맞춤형 레이아웃 및 템플릿 디자인

이 시리즈의 첫 번째 부분에서는 Magento 디렉토리 구조, 사용자 정의 모듈 구조를 포함한 Magento 모듈 개발의 기본 사항을 배웠고 기본 "Hello World" 모듈을 만들어 Magento에서 컨트롤러가 작동하는 방식을 이해했습니다.

이 글에서는 블록 및 레이아웃 파일을 만드는 방법을 알아봅니다. 구체적으로 Magento에서 레이아웃 파일과 블록 파일이 어떻게 작동하는지 알아보고, 레이아웃 파일의 렌더링에 대해 알아봅니다.

빠른 해결책을 찾고 계십니까?

빠른 솔루션을 찾고 있다면 Envato Market에 수많은 Magento 테마와 템플릿이 있습니다. 이는 프로젝트를 위한 고품질 로우 폴리 아이템 컬렉션을 빠르게 구축할 수 있는 좋은 방법입니다.

하지만 튜토리얼을 시작하겠습니다! 먼저 레이아웃 파일과 블록 파일이 무엇인지, Magento에서 프런트엔드 페이지를 렌더링할 때 어떻게 유용한지 이해한 다음 이를 사용자 정의 모듈에 포함시키는 방법을 살펴보겠습니다.

레이아웃 파일이란 무엇인가요?

이름에서 알 수 있듯이 레이아웃 파일은 Magento 홈페이지를 렌더링할 때 매우 유용합니다. 레이아웃 파일은 앱 > 디자인 > 프런트엔드 > 인터페이스 > 테마 > 레이아웃 에 있는 XML 파일입니다. 여기서 특정 모듈에 대한 많은 레이아웃 파일이 있음을 확인할 수 있습니다. 각 Magento 모듈에는 고객 모듈에 customer.Module에 <code class="inline">catalog.xmlcustomer.xml  布局文件一样，目录模块有 catalog.xml 레이아웃 파일이 포함된 것처럼 자체 레이아웃 파일이 있습니다. , 등. 이 레이아웃 파일에는 구조 블록과 콘텐츠 블록이 포함되어 있습니다.

Magento에 이러한 블록이 필요한 이유가 궁금하다면 이 시리즈의 첫 번째 부분에서 자세히 알아볼 수 있습니다.

레이아웃 파일을 살펴보겠습니다

예제를 통해 레이아웃 파일을 자세히 살펴보겠습니다. 앱 > 디자인 > 프런트엔드 > 기본 > 레이아웃

으로 이동하여 customer.xmlcustomer.xml 我>文件。在这里，所有块都围绕主 <layout></layout>  标记。您可以看到不同的 <tag></tag>

파일을 엽니다. 여기서 모든 블록은 기본 <layout></layout>

태그를 둘러쌉니다. 특정 블록이 포함된 다양한 <tag></tag>를 볼 수 있습니다.

<customer_account_create></customer_account_create>아래 코드 조각을 참조하세요: 으아아아 손잡이

Handle은 Magento가 특정 모듈을 호출할 때 로드할 블록을 식별하는 주요 엔터티입니다. <default></default> 은 모듈별 핸들입니다. 이 핸들러는 누군가 고객 등록 페이지를 열 때 시작됩니다.

각 중첩 블록은 페이지별 콘텐츠를 처리합니다. 일부 레이아웃 파일에는 핸들이 포함되어 있습니다. 이 단계에서는 모듈별 핸들과 기본 핸들의 차이점에 대해 질문할 수 있습니다. 간단히 말해서, 모듈별 핸들은 모듈이 브라우저에서 렌더링될 때 내부 블록만 렌더링하는 반면, 기본 핸들은 대부분의 페이지에서 로드됩니다.

2. 핸들 내부에는 블록이 호출될 때 렌더링할 템플릿 파일을 지정하는 다양한 블록이 있습니다. 블록에는 두 가지 유형이 있습니다:

빌딩 블록 콘텐츠 블록 레이아웃 파일에서는 콘텐츠 블록

만 정의한 다음 이를

structor 블록

으로 래핑합니다.
1. 예를 들어 누군가가 고객 등록 페이지에 전화를 걸어 왼쪽, 오른쪽, 콘텐츠 또는 바닥글에 로드되기를 원하는 경우 해당 블록을 해당 구조 블록에 래핑합니다. 여기서는 구조적 블록인 "콘텐츠" 블록 내에 두 개의 블록을 래핑했습니다. 블록에는 다음 속성이 포함됩니다.
2. type은 다양한 기능을 정의할 수 있는 블록 클래스를 정의합니다
3. 이름 정의
다른 블록이 기존 블록을 이름으로 참조하고 확장할 수 있도록 특정 블록에 대한 고유한 이름
4. before/afterphtml는 구조 블록 내에서 블록의 위치를 ​​정의할 수 있도록 설정할 수 있는 속성입니다
5. 템플릿은 실제
파일 이름과 HTML 및 PHP 코드가 있는 경로를 정의합니다
6. action
을 사용하면 이 속성을 사용하여 JavaScript 로드 등과 같은 모든 작업을 실행할 수 있습니다.

as는 주로 구조 블록에 사용되는 속성입니다

<reference></reference>

태그는 이미 존재하는 블록을 확장하는 데 사용됩니다. 이 예에서는 콘텐츠 블록을 확장하고 여기에 자체 블록을 삽입합니다. 확장하려면 올바른 블록 이름을 사용해야 합니다.

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

子

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

🎜한 블록을 다른 블록 아래에 감싸면 감싸진 블록을 하위 블록이라고 합니다. 모듈이 상위 블록을 호출할 때마다 하위 블록이 자동으로 호출됩니다. 🎜 으아아아 🎜템플릿 파일에서 다음 구문을 사용하여 하위 블록을 개별적으로 호출할 수도 있습니다. 🎜🎜

根

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

이 게시물에는 지금까지 제작한 모듈의 데모 파일을 첨부했습니다. 이 특정 문제에 대해 궁금한 점이 있으면 언제든지 질문이 있는 댓글을 남겨주세요.

위 내용은 Magento를 사용한 맞춤형 레이아웃 및 템플릿 디자인의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!