如何在所有页面的前端添加JS文件

38

我已经阅读了3页的Google搜索结果，了解如何为所有页面加载JS文件，但仍然无法执行。

我有一些疑问，希望有人可以解决。

  1. 我需要创建一个模块里面app/code用requirejs-config.js？或者我可以requirejs-config.js在主题内部放一个？

  2. 我应该放什么东西requirejs-config.js？

  3. 代码在我的.js文件中应该是什么样？我看到您不能使用jQuery，document.ready并且必须有一个define([

  4. 我应该放什么东西define([？

  5. 如果我有第三方jQuery模块，是否需要对其进行编辑以使其正常工作？

  6. 我是否需要将xml放在某处以告诉magento my.js文件存在？

  7. 如果我在app/code其中创建了一个包含所有js代码的模块，那么它将包含所有页面中的所有内容吗？我该如何实现？

magento2  javascript  requirejs 
— Prashant Akash
source

Answers:

65

要main.js在所有页面上加载自定义文件（以RequireJS方式），这是一种好方法：

1）建立 main.js

main.js在主题文件夹中创建

<theme_dir>/web/js/main.js

具有以下内容：

define([
  "jquery"
], 
function($) {
  "use strict";

  // Here your custom code...
  console.log('Hola');

});

简而言之：我们在开始时声明依赖项，例如"jquery"。我们将变量名称定义为函数的参数，以在函数中使用依赖项，例如"jquery" --> $。我们将所有自定义代码放入function($) { ... }。

2）声明main.js一个requirejs-config.js文件

requirejs-config.js在主题文件夹中创建一个文件：

<theme_dir>/requirejs-config.js

具有以下内容：

var config = {

  // When load 'requirejs' always load the following files also
  deps: [
    "js/main"
  ]

};

"js/main"是我们习惯的道路main.js。不需要“ .js”扩展名。

我们requirejs-config.js将与requirejs-config.jsMagento中定义的其他对象合并。

RequireJS将main.js在每个页面上加载我们的文件，以解决依赖关系并以异步方式加载文件。

可选：包括第三方库

这是包括第三方库的方法。

1）将库添加到web/js：

<theme_dir>/web/js/vendor/jquery/slick.min.js

2）打开requirejs-config.js并添加以下内容：

var config = {

  deps: [
    "js/main"
  ],

  // Paths defines associations from library name (used to include the library,
  // for example when using "define") and the library file path.
  paths: {
    'slick': 'js/vendor/jquery/slick.min',
  },

  // Shim: when you're loading your dependencies, requirejs loads them all
  // concurrently. You need to set up a shim to tell requirejs that the library
  // (e.g. a jQuery plugin) depends on another already being loaded (e.g. depends
  // on jQuery).
  // Exports: if the library is not AMD aware, you need to tell requirejs what 
  // to look for so it knows the script has loaded correctly. You can do this with an 
  // "exports" entry in your shim. The value must be a variable defined within
  // the library.
  shim: {
    'slick': {
      deps: ['jquery'],
      exports: 'jQuery.fn.slick',
    }
  }

};

它看起来比实际要复杂。

3）在下面添加依赖项main.js：

define([
  'jquery',
  'slick'
], 
function($) {

  // ...

});
— 安德里亚
source
嗨，您能告诉我是否必须在此处包含bootstrap.js吗？如何添加它，以便引导程序在我的主题中正常运行。谢谢！
— anujeet
1
@anujeet您可以采用与上述示例bootstrap.js相同的方式进行添加slick.js。对于shim值，您可以尝试使用：：'bootstrap': { deps: ["jquery"], exports: '$.fn.popover' }，如此处所述：stackoverflow.com/a/13556882/3763649
— Andrea
看到我的require-config.js var config = { deps: [ "js/animate", "js/incase", "js/confetti" ], paths: { "jquery.bootstrap":"js/bootstrap.min" }, shim:{ 'jquery.bootstrap':{ 'deps':['jquery'] } } }; require(["jquery",'jquery.bootstrap', 'jquery/ui', 'jquery/validate', 'mage/validation/validation', 'domReady!']); 我的微型车停止使用此功能
— anujeet
@anujeet最好您再解决一个问题，报告您的require-config.js，以及在JavaScript控制台中是否有错误。如果您在此处链接问题，我们将很乐意为您提供帮助：）
— Andrea
当包含更多js时，我会出现错误“ js / ScrollMagic.min”，“ js / debug.addIndicators.min”
— yavonz15
6

您可以使用xml添加JS文件，如下所示。这将在所有页面中添加js。

使用自定义模块：

default.xml在您的模块中创建文件。

app/code/vendor_name/module_name/view/frontend/layout/default.xml

<?xml version="1.0"?>
<page xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <head>
        <!-- Add js using link tag-->
        <link src="js/script.js"/>

        <!-- Add js-->
        <script src="Vendor_Module::js/script.js"/>

        <!-- Add external js -->
        <script src="https://apis.google.com/js/platform.js" src_type="url" />
   </head>
</page>
— SCC
source
6

复制文件：

app / code / Magento / Theme / view / frontend / layout / default_head_blocks.xml

至

应用/代码/ your_vendor / your_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>
        <!-- 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 src="http://fonts.googleapis.com/css?family=Montserrat" src_type="url" /> 
    </head>
</page>

欲获得更多信息：

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html

祝好运！

BTW阅读了magento的前端devdocs官方文档以获取基本信息:)

— 戈尔迪
source
因为Bootstrap的脚本要求初始化JQuery，所以将其包含在头中将不起作用。阅读此官方文档。有关更多信息。:)
— VS
2

使用该default_head_blocks.xml文件添加js的方法不适用于第三方JQuery插件。因此，如果要添加自定义JQuery插件并使用它们，则需要使用requirejs-config.jsfile。

要一一回答您的问题：

1）＆2）您无需创建模块即可添加requirejs-config.js文件。您可以将其添加到以下位置：

app/design/frontend/<Vendor>/<theme>/requirejs-config.js

请参考此答案以创建正确的requirejs-config.js文件。

3）在编写脚本之前，您需要列出js文件的依赖项。

require([
  'jquery',
  'jquery/ui'
], function($){
   // ... Your code here
});

上面的代码说，您的脚本将需要jquery和jquery ui。

4）define([除非要创建javascript插件，否则无需使用。

5）不，您不需要编辑它们，但需要使用requirejs-config.js文件指定它们的依赖性。如果owl.carousel.min.js位于中<vendor>/<theme>/web/js/owl.carousel.min.js，则requirejs-config.js文件将如下所示：

var config = {
    map: {
        '*': {
            owlCarouselTheme: 'js/owl.carousel.min'
        }
    },
    shim: {
        owlCarouselTheme: ['jquery']
    }
};

在上面的代码中，请记住.js该文件没有。现在在您的js中使用它

require(['jquery', 'owlCarouselTheme'],function($){
    $(document).ready(function() {
        $(".footer.links").addClass("owl-carousel").owlCarousel({items: 1});
    });
})

如果一切正常，则应该在滑块中添加页脚链接。

6）＆7）只需使用@Goldy建议的方法来添加您的js。它将您的js文件添加到所有页面。

为了进一步阅读，您可以看一下这篇文章

希望这可以帮助。

— VS
source
1

这就是我在magento2自定义主题中添加dotdotdot库的方式。

1.按照以下路径下载Js Library并将其添加到您的主题中：

// app/design/frontend/Namespace/themename/web/js/jquery.dotdotdot.min.js

2.按照以下步骤创建主题的requirejs文件，并让requirejs知道新添加的库。

// app/design/frontend/Namespace/themename/requirejs-config.js
var config = {
   map: {
       '*': {
           dotdotdot: 'js/jquery.dotdotdot.min',
       }
   }
};

3.如下使用主题的主js文件中添加的库：

// app/design/frontend/Namespace/themename/web/js/main.js
require([ 'jquery' , 'dotdotdot' , 'domReady!'],function($){
    $(window).load(function() {
        //custom js code
        /* $(".product-item-name").each(function(){
            $(this).dotdotdot(); 
        }); */
    });
});

4.并将主题的js文件包括在网站的头部中，如下所示：

// app/design/frontend/Namespace/themename/Magento_Theme/layout/default_head_blocks.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="js/main.js"/> 
    </head>
</page>

您可以在magento2的每个页面上添加任何外部JS库和自定义文件。

— 赛义德
source
我已经尝试过这是管理员方面，js正确到来了，但预期结果没有到来
— Naveenbos
好答案。要尝试一下。有没有一种方法可以指定需要js文件的特定页面？
— Mohammed Joraid
对于特定页面，将以上示例中的“ default_head_blocks.xml”内容移动到您的特定布局文件。例如，在“产品详细信息”页面的情况下，将该XML添加到app / design / frontend / Namespace / themename / Magento_Catalog / layout / catalog_product_view.xml
— saiid
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.