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"/>     <!-- 下面两种添加本地JavaScript文件的方法是对等的 -->     <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> 中：

<css src = "css / owl.carousel.css" />

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” /> 删除文件。