在今天的文章中，我将指导您如何在 Magento 2 中添加和删除静态文件，包括 JS、CSS 和字体。

通过这个易于理解的教程，添加或删除静态文件 JS、CSS、字体将变得很容易。

让我们现在开始！

  • 添加静态文件
  • 删除静态文件

添加静态文件

通常，如果您想在 Magento 2 中使用外部库自定义页面，则需要添加 JavaScript 和 CSS 文件。JavaScript、CSS 和其他静态文件将添加到页面配置文件的 <head> 部分。

在页面配置文件中，该<head>部分包括各种静态资源，例如JavaScript、CSS。该文件定义了Magento 商店页面中app/code/Magento/Theme/view/frontend/layout/default_head_blocks.xml该部分的原始外观。<head>

要添加 CSS 和 JavaScript，建议您在自定义主题中扩展该文件，然后在其中添加文件。

以下是必须添加的文件示例：

<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>

添加外部资源时，您必须指定src_type="url"参数值。

或<link src="js/sample.js"/>指令<script src="js/sample.js"/>可用于将本地存储的 JavaScript 文件添加到您的主题中。

以下位置之一相对指定资产的路径：

  • <theme_dir>/web-
  • <theme_dir>/<Namespace>_<Module>/web-

添加条件注释

条件注释用于为 Internet Explorer 提供特殊指令。在添加文件方面，可以为您添加 CSS 文件，以将其包含在 Internet Explorer 的特定版本中。

这是一个例子：

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
  <head>
    <css src="css/ie-9.css" ie_condition="IE 9" />
  </head>
</page>

这里，在生成的HTML中添加了一条IE条件注释，请查看以下示例：

<!--[if IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="<your_store_web_address>/pub/static/frontend/OrangeCo/orange/en_US/css/ie-9.css" />
<![endif]-->

在上面的示例中，orange是 OrangeCo 供应商创建的自定义主题。

删除静态文件

对于要删除的页面中链接的静态资源<head>，您可以在主题扩展中进行更改，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>
    <!-- Remove local resources -->
    <remove src="css/styles-m.css" />
    <remove src="my-js.js"/>
    <remove src="Magento_Catalog::js/compare.js" />
    <!-- Remove external resources -->
    <remove src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"/>
    <remove src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"/>
    <remove src="http://fonts.googleapis.com/css?family=Montserrat" />
   </head>
</page>

您需要记住，如果在初始布局中添加或删除具有模块路径的静态资源，则需要指定模块路径，例如Magento_Catalog::js/sample.js.