在今天的文章中,我将指导您如何在 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 文件添加到您的主题中。

删除静态文件

对于要删除的页面中链接的静态资产<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