如何在 Magento 2 中添加/删除 JavaScript、CSS、字体

redmaomail 2024-07-24 18:18 阅读数 66 #Magento

1.在<head>中包含静态资源

在 Magento 2 中使用外部库自定义页面是很常见的，但如果您想使用外部库，则需要添加 JavaScript 和 CSS 文件。

在页面配置文件的 <head> 部分中添加了 JavaScript、CSS 和其他静态文件。<head> 页面的默认视图在 vendor /magento/module-theme/view/frontend/layout/default_head_blocks.xml 中定义。

如果要添加外部文件，可以将此文件扩展为自定义主题。

示例：在自定义主题中创建文件：

app/code/Bss/default/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> <! -- 添加本地资源 --> <css src="css/my-styles.css"/>  <script src="Magento_Catalog::js /sample1.js"/> <link src="js/sample.js"/>  <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” 是必需的。

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

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

让我们再举一个例子来了解更多细节：

如果您想将 owl.carousel.css 文件添加到网站中，请按照以下说明操作：将此行添加到 <head> 中：

2.去除静态资源

当您根据设计的变化修改页面时，需要对页面进行编辑。但是，如果您不想使用 CSS、JavaScript 或字体文件，您完全可以删除它们。

要删除这些静态资源，并且链接位于页面 <head> 上，您应该在扩展主题中更改以下内容：

应用程序/设计/前端/<供应商>/<主题>/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 src= "css/styles-m.css" /> <remove src= "my-js.js" /> <remove src= "Magento_Catalog::js/compare.js " />  <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>

例如：您希望删除 calendar.css 文件，因为您不使用此文件。calendar.css 文件是从文件中添加的

供应商\magento\module-theme\view\frontend\layout\default_head_blocks.xml。

您可以使用 <remove src = “mage/calendar.css” /> 删除文件。