当前位置: 技术文章>> 使用Magento2布局layout将静态块添加到特定的CMS页面

文章标题:使用Magento2布局layout将静态块添加到特定的CMS页面
  • 文章分类: Magento
  • 18459 阅读
系统学习magento二次开发,推荐小册:《Magento中文全栈二次开发 》

本小册面向Magento2以上版本,书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发,后端开发,magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。


在处理项目时,我必须在每个CMS页面上CMS页面的标题和主要内容之间添加一个唯一的静态块。元素必须可以通过Magento管理面板完全自定义,并且必须易于在新的CMS页面上创建,易于修改和删除。由于该元素需要放置在主要内容之外,因此无法在Magento管理中使用CMS添加它。它必须使用Magento布局添加。这是我如何实现这一目标的。

如您所知,Magento仅为CMS页面提供以下句柄:

### 主页句柄和 404 页句柄

所有 CMS 页面的句柄

如果必须在主页上显示 CMS 块,我们将在本地.xml文件中使用主页句柄。同样,如果必须在所有CMS页面上显示相同的静态块,我们将对所有CMS页面使用句柄。

但是,单个用户创建的CMS页面呢?

### 前端开发人员的解决方案

幸运的是,Magento使我们能够通过从Magento管理面板上的CMS编辑器编辑每个CMS页面来定义自定义布局。这样,CMS 页面的布局就可以使用存储在数据库中的特定页面的已定义值进行修改。

首先,我们将创建一个静态块,我们要将其添加到特定的CMS页面中,我们将将其命名为static-block-1并对其应用一些简单的样式。

<div class=”element-blue”>
        <h3>Static Block 1</h3>
        <p>This is blue static element 1 </p>
</div>

接下来,我们将创建一个新的 CMS 页面,其中包含创建的静态块,该块将通过“设计”选项卡上的“布局更新 XML”添加,以及一个标题和一个段落。在本例中,我们将对所有 CMS 页面使用 1 列布局。

<reference name="root">
        <block type="cms/block" name="myelement">
            <action method="setBlockId"><block_id>static-block-1</block_id></action>
        </block>
</reference>

最后,我们必须更新我们的模板文件并添加一行调用我们的元素的代码。 由于我们对所有 CMS 页面都使用了 1 列布局,因此我们将修改 1column.phtml 模板文件。如果要将元素添加到使用其他模板(如 2 列左)的 CMS 页面,则需要修改这些文件。

…
<div class="page">
        <?php echo $this->getChildHtml('header') ?>
        <?php echo $this->getChildHtml('myelement') ?>
…

对于此示例,我创建了一个与第一个不同的附加静态块和两个额外的 CMS 页面 - 一个用于我创建的新元素,另一个用于没有任何布局更新,因此,它不会包含我们创建的任何元素。

结果

带有蓝色静态块的 CMS 页面 1:

CMS page 1

CMS 第 1 页的 HTML 代码:

01-code-1

带有绿色静态块的 CMS 页面 2:

02-cms-2

CMS 第 2 页的 HTML 代码:

02-code-2

CMS 第 3 页,我们没有在其 XML 中设置任何布局更新,因此它不显示任何创建的静态块。

03-cms-3

CMS 第 3 页的 HTML 代码:

03-code-3

好的、坏的和另一种选择

尽管这是一个非常快速简单的解决方案,效果很好,但当您必须为要添加的每个元素执行这些相同的步骤时,即使在具有 6 或 7 个 CMS 页面的项目中也是如此,它也会变得乏味。


推荐文章