Magento 2 default.xml 和 default_head_blocks.xml 之间的区别

Magento

default.xml 和 default_head_blocks.xml 区别

在 Magento 2 Theme 中，default.xml文件default_head_blocks.xml位于app\design\frontend\{package}\{theme}\Magento_Theme\layout 文件夹里面。

default.xml：定义页面布局。

default_head_blocks.xml：定义页面部分中包含的脚本、图像和元数据。

default_head_blocks.xml 示例

app/design/frontend/Vendor/theme/Magento_Theme/layout/default_head_blocks.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <!-- Add local resources -->
        <css src="css/my-styles.css"/>
    
        <!-- The following two ways to add local JavaScript files are equal -->
        <script src="Magento_Catalog::js/sample1.js"/>
        <link src="js/sample.js"/>
        
        <!-- Add external resources -->
    <css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" src_type="url" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" src_type="url" />
        <link rel="stylesheet" type="text/css" src="http://fonts.googleapis.com/css?family=Montserrat" src_type="url" /> 
    </head>
</page>

default.xml 示例

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
...
        <referenceContainer name="sidebar.additional">
            <block class="Magento\Catalog\Block\Product\Compare\Sidebar" name="catalog.compare.sidebar" template="product/compare/sidebar.phtml"/>
        </referenceContainer>
...
    </body>
</page>

当您将使用 default_head_blocks.xm 添加 js 和 css 时，它将为所有页面添加，并且在 default.xml 中，每个模块头将针对该模块特定。就像您想在目录部分的头中添加一些东西一样，您将在 Magento_Catalog 中使用 default.xml。

所有 Magento 店面页面的基本视图在位于 Magento_Theme 模块的两个页面配置布局文件中定义。

 <Magento_Theme_module_dir>/view/frontend/layout/default.xml：定义页面布局。

<Magento_Theme_module_dir>/view/frontend/layout/default_head_blocks.xml：定义页面的 <head> 部分中包含的脚本、图像和元数据。

这些基本页面配置布局在其他 Magento 模块和 Magento 主题中进行了扩展。

您还可以在自定义主题中扩展或覆盖这些文件。

我们也可以在 default.xml 中定义 head 部分，所以为什么 default_head_blocks.xml 的概念出现

是基本的责任分离。一个添加标记，另一个添加外观。这就像在两个函数中破坏代码或将逻辑分离到两个类中。

default_head_blocks.xml 是 head section 的特殊布局，这个文件在 default.xml <update handle=”default_head_blocks”/>  中被调用： 所以如果你想在 head section 中添加 css, javascript, static assets，推荐的方式是将它们添加到 default_head_blocks.xml 中。您可以很好地将它们添加到 default.xml 之一并且它可以工作，但是您的代码不会像 Magento 那样漂亮，因为我们使用 Magento，我们应该采用推荐的方式。