众所周知，页面的HTML <head>标签部分包含不同的元素标记，CSS和JS文件定义，JS代码片段等。作为一项规则，我们不需要任何复杂的逻辑来添加一些适当的内容。但是，让我们想象一下当我们需要将一些依赖于系统配置的元素插入到head部分时的情况。
经过Magento 1的多年开发，这个操作在最新的Magento版本中可能有点棘手。下面我们将介绍如何在头部添加块和模板。
如果您使用Magento 1工作（或仍然工作），您应该知道使用头部的内容操作非常容易。head的块与body部分的块之间几乎没有区别。在布局结构中，我们有以下包含所有头部内容的块：
| 1 2 3 | <block type="page/html_head" name="head" as="head"> ... </block> |
因此，要在此部分添加一些子块，我们只需将其插入相应的引用：
| 1 2 3 | <reference name="head" before="-"> <block type="googleanalytics/ga" name="google_analytics" as="google_analytics" template="googleanalytics/ga.phtml" /> </reference> |
就这样，我们可以使用Magento 1中描述的方法插入任何子块。
在Magento 2中，布局结构不同。页面的布局由主题的布局配置文件 – “[Magento_Theme_module_dir] /view/frontend/layout/default.xml”定义。如果检查此文件，则根节点的名称现在为<page>。它包含两个主要部分：<head>和<body>。这是一个非常方便的结构，因为我们不再有一个直接位于根节点内部的块，而是分开两个主要部分和相应的元素。显然，要将子块添加到新的<head>部分，我们需要将其插入此部分。但是不要急于得出结论。我们没有简单的能力将子块直接插入Magento 2中的<head>部分。我们只能使用页面标题或添加静态文件和元标记，如下例所示：
| 1 2 3 4 5 6 7 | <head> <title>Review Order</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/> <attribute name="prefix" value="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# product: http://ogp.me/ns/product#" /> <css src="jquery/fileUploader/css/jquery.fileupload-ui.css"/> <link src="Magento_Customer::js/bootstrap/customer-post-action.js"/> </head> |
但是，在尝试插入某些块时，您将看不到其内容，因为本节中不允许使用块。为了插入一个块，你需要使用一个中间参考容器，但我们在哪里可以找到它？如果再次检查“[Magento_Theme_module_dir] /view/frontend/layout/default.xml”布局文件，则在最底部会出现一个名为“head.additional”的有趣块。这真是令人惊讶的地方，不是吗？
在页面的渲染过程中，\ Magento \ Framework \ View \ Result \ Page :: render方法获取其块内容并插入HTML <head>部分。结果，我们可以使用此块作为参考来插入一个额外的section块：
| 1 2 3 4 5 | <body> <referenceBlock name="head.additional"> <block class="Atwix\Helloworld\Block\TestBlock" name="atwix_testblock" template="test_block.phtml"/> </referenceBlock> </body> |
看起来Magento 2可能更加复杂和不直观。然而，这种复杂性为代码带来了更多的顺序和清洁，所以请耐心等待，你会喜欢它。我们希望所描述的方法可以节省您一些时间来尝试将子块添加到head部分。请随意分享您的发现，并在下面的评论中提出问题。而且，请记住，Magento 2并不难，一次又一次地找到新的东西真的很有趣。