Magento 2的JavaScript, CSS 等静态资源是在页面配置文件的 <head>配置。 Magento 2商店页面的 <head> 是在app/code/Magento/Theme/view/frontend/layout/default_head_blocks.xml里设置。 推荐的添加或者移除CSS和JavaScript的方法就是在自定义模板中扩展该文件。下面是参考:

<theme_dir>/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.proxy.ustclug.org/css?family=Montserrat" src_type="url" /> 
    </head>
</page>

如果是添加外部的资源, src_type="url" 这个属性是必须设置的。

如果是添加Google webfont,必须设置 rel="stylesheet" type="text/css" ,否则不起作用。

可以通过 <link src="js/sample.js"/> or <script src="js/sample.js"/> 两种方法添加JavaScript文件到模板中。

The path to assets is specified relatively to one of the following locations:

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

Adding conditional comments

Conditional comments are meant to give special instructions for Internet Explorer. In the terms of adding assets, you can add CSS files to be included for a specific version of Internet Explorer. A sample follows:

    <head>
        <css src="css/ie-9.css" ie_condition="IE 9" />
    </head>
</page>

This adds an IE conditional comment in the generated HTML, like in the following example:

<!--[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]-->

In this example, orange is a custom theme created by the OrangeCo vendor.

Magento 2 移除JavaScript, CSS, fonts方法

To remove the static resources, linked in a page <head>, make a change similar to the following in a theme extending file:

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.proxy.ustclug.org/css?family=Montserrat" /> 
   </head>

Note, that if a static asset is added with a module path (for example Magento_Catalog::js/sample.js) in the initial layout, you need to specify the module path as well when removing the asset.

Magento 2 加载CSS, JavaScript顺序设置

CSS和JS的加载顺序直接决定了你设置的样式是否有效,我们可以通过order属性来设置每个CSS和JS的加载顺序,从而更好的控制Magento的样式输出。

<css src="css/override.css" order="100" />
<css src="css/override2.css" order="100" />
<script src="js/override.js" order="100" />
<script src="js/override2.js" order="100" />
0 人喜欢
380 人查阅

你可能对下面的文章也感兴趣...

Magento可以创建的产品类型还是比较多的,常用的就是简单产品(Simple Product),然后应该是Configurable Product,Bundle Product等等。应该讲这些复杂产品都是基于简单产品来创建的,就像我们今天要讲的Configurable Product,其实Simple Product的Custom Options也可以实现Configurable Product的一些类似的功能,但是Configurable Product又能实现一些更加复杂的功能,今天曹晓涛就跟大家分享下Magento创建Configurable Product的思路。
Read More
Magento的配置系统就像是Magento的心脏,支撑着Magento的运行。这套配置系统掌管着几乎所有 “module/model/class/template/etc”。它把整个Magento系统抽象出来,用一个配置文件来描述。这里的“配置文件” 并不是一个物理上存在的文件,而是Magento根据当前的系统状态动态生成的一段XML。
Read More

你有什么想法,说出来我们才能知道!

请填写您的姓名. 请填写有效的电子邮箱. 请输入评论内容.