Magento 块和小部件的初学者指南

块和小部件是 Magento 中的关键布局功能。 这两个功能联系非常紧密，并且经常一起使用。

考虑块的一种方法是它们是迷你页面。 块还可以包含文本、图像、视频等。 但是由于块更小，您会在站点的边缘看到它们。 块通常插入到页眉、侧边栏和页脚中。

但是，块是使用小部件放置的。 首先，您创建一个块，然后使用一个小部件来决定该块将显示在哪里。

让我们通过一些示例向您展示块和小部件如何在 Magento 中工作。

本指南摘自 Magento 2 的畅销书 Magento 2 Explained。我们在该书中使用了一家名为“Orangeville”的商店的示例，因此您会在此处看到它的引用。

创建 Magento 块解释

让我们来看看创建我们的第一个块的过程。 这将包含一个 HTML 链接。

• 转到“内容”，然后转到“块”。
• 点击右上角的“添加新块”。

• 输入“关键链接”作为“块标题”。 这是访客将在屏幕上看到的内容。
• 输入“key_links”作为标识符。 这个字符串是 Magento 用来识别区块的，但访问者永远不会看到它。

• 单击编辑器工具栏中的项目符号图标：

• 键入“About Orangeville”作为要点：
• 选择“About Orangeville”文本并单击链接图标。

• 您现在将看到一个弹出窗口。 输入“关于奥兰治维尔”页面的 URL。 如果您不确定这是什么，您可以在新的浏览器选项卡中打开您的 Magento 站点并找到 URL，它可能是 example.com/about-orangeville/。
• 单击“插入”。
• 现在，您的 Block 中有一个“About Orangeville”链接：

• 单击“保存块”。

创建 Magento 小部件解释

我们现在面临的挑战是将您的块放入您的网站设计中。 这就是 Magento 的小部件派上用场的地方。 在 Magento 中，块只是一个内容。 它是控制块放置的小部件。

然而，这并不是 Widget 所能做的全部。 Widget 可以放置我们简单的新块，但它也可以放置许多其他功能。

• 转到“内容”，然后转到“小部件”。
• 单击“添加小部件”。
• 对于“类型”，选择“CMS 静态块”。
• 对于“设计主题”，选择“Magento Luma”。
• 单击“继续”。

• 为“Widget Title”输入“Key Orangeville Links”。
• 在“分配给商店视图”下，选择“所有商店视图”。

接下来，我们将控制该块出现在哪些 URL 上。

• 单击“添加布局更新”。

• 选择“所有页面”。

• 为“容器”选项选择“CMS 页脚链接”。

这两个选项，“所有页面”和“CMS 页脚链接”，对您来说可能还没有多大意义。 但是，我们将完成小部件的创建，在本章后面的“Magento 小部件放置说明”一节中，我们将更多地解释我们做出这些选择的原因。

在“布局更新”下，我们将选择放置小部件的位置。

• 选择“所有产品类型”。
• 再次选择“CMS 页脚链接”。
• 添加这两个选项后，您的屏幕将如下图所示。

至此，您已经创建了 Widget 并告诉 Magento 它应该出现在您网站的哪个位置：这个 Widget 将出现在我们所有的页面和所有产品上。

现在是时候选择 Widget 的内容了，这将是您之前创建的 Block。

• 单击边栏中的“小部件选项”。
• 单击“选择块”。

• 现在您可以选择之前创建的“关键链接”块：

• 点击“保存”。
• 访问您网站的前端，您会看到您的链接现在已发布在页脚中。 您使用内容创建了一个块，并将其发布到一个小部件中。

一起创建块和小部件

创建块和小部件时肯定有一些棘手的步骤。 因此，让我们一起尝试整个过程。 我们将创建第二个块，并在小部件的帮助下将其放置在我们的网站上。 这个 Block 会告诉人们我们有 100% 的满意保证。

• 转到“内容”，然后转到“块”。
• 单击“添加新块”。
• 标题：满意保证
• 标识符：保证

• 为您的块输入文本。 我写道：“在奥兰治维尔，您的满意是我们的首要任务。如果您不满意，我们将退还您的钱。”

接下来，我们将为我们的区块上传一张图片。

• 将光标放在您刚刚编写的文本下方的主要内容区域。
• 单击编辑器工具栏中的树形图标。
• 当您看到弹出框时，单击小框图标。
• 找到可以上传的图片。 我选择了 100% 的徽章。

• 单击“插入文件”。
• 图片说明：满意保证
• 单击“插入”。

• 您现在有一个包含文本和新图像的块。
• 单击“保存块”以完成创建此块。

接下来，让我们创建将在我们的网站上显示此块的小部件。

• 转到“内容”，然后转到“小部件”。
• 单击“添加小部件”。
• 类型： CMS 静态块
• 设计主题： Magento Luma

• 小部件标题：保证满意
• 分配给商店视图：所有商店视图

• 布局更新：锚类别
• 容器：侧边栏主
• 单击“Widget Options”并选择您刚刚创建的“Satisfaction Guaranteed”块。

• 点击“保存”。
• 访问您网站的前面。 单击顶部菜单中的类别链接之一。 在下图中，我点击了“水果”。 您现在将在左侧边栏中看到您的保证块：

Magento 小部件放置说明

我从 Magento 学习者那里得到的一个常见问题是关于 Widget 的放置。

你怎么知道为容器选择“CMS 页脚链接”或“侧边栏主”？ 毕竟，有 22 种不同的选择，如下图所示。

“在页眉之后”和“在页眉顶部之后”有什么区别？ “页脚”和“页脚容器”有什么区别？ 这些名称是如此相似，以至于它们肯定会令人困惑。

不幸的是，没有办法提前告诉你，虽然这个名字会让你对位置有一个很好的了解：

• 页眉之后：这很可能在主菜单下。
• 主要内容底部：这可能位于屏幕中央部分的下方，位于我们的产品或页面内容下方。
• 页面顶部：这将出现在页面的较高位置，但不会出现在产品屏幕上。

值得注意的是，即使在同一个站点上，这些选项也会发生变化。 如果您尝试放置一个块并为小部件的“布局选项”选择“所有产品类型”，那么您将获得一组不同的选择，如下图所示。 这些选项提供了一些仅对您的产品屏幕有意义的展示位置。 例如，您现在看到的选项包括“产品社交链接容器”和“之前查看表单字段”。 除了在产品屏幕上，这些小部件放置在任何地方都没有意义。

另一方面，此列表有时可能要短得多。 在本章的下一部分中，我们将看到一些 Widget 仅带有三个 Container 选项。

因此，如果您选择特定的 Container，则无法保证您的 Widget 将出现在哪里。 当您测试这些不同的选项时，将涉及一些测试和实验。

Magento 块和小部件摘要

块和小部件允许您将新项目添加到您网站的设计中。 但是，您网站上的某些元素无法从 Magento 的管理界面轻松修改或替换。 它们看起来应该是块和小部件，但 Magento 并没有那样创建它们。 因此，我创建了一个页面，其中包含更新其中一些默认元素的说明。

如果您准备好了解有关 Magento 的更多信息，请查看 Magento 2 Explained，这是 Magento 2 的畅销书。

我们还有一些更棒的 Magento 在线教程，包括：

• 了解 Magento 税的初学者指南
• Magento 中的基本、小、缩略图和样本图像
• 了解 Magento 2 索引是什么以及如何管理它们