web-dev-qa-db-ja.com

Drupal 8：JavaScriptがテーマに読み込まれない

bootstrap child-themeに小さなjavascriptを追加したいのですが、ロードされません。

これらは設定ファイルです：

child.info.yml：

 core: 8.x
type: theme
base theme: bootstrap

name: 'child'
description: 'Uses the jsDelivr CDN for all CSS and JavaScript. No source files or compiling is necessary and is recommended for simple sites or beginners.'
package: 'Bootstrap'

regions:
  navigation: 'Navigation'
  navigation_collapsible: 'Navigation (Collapsible)'
  header: 'Top Bar'
  highlighted: 'Highlighted'
  help: 'Help'
  content: 'Content'
  sidebar_first: 'Primary'
  sidebar_second: 'Secondary'
  footer: 'Footer'
  page_top: 'Page top'
  page_bottom: 'Page bottom'

libraries:
  - 'child/global-styling'

child.libraries.yml：

global-styling:
  css:
    theme:
      css/style.css: {}
      css/masonry.css: {}
      css/basic-page.css: {}   

  js:
  js/main.js: {}
  dependencies:
    - core/jquery
    - core/drupal.ajax
    - core/drupal
    - core/drupalSettings
    - core/jquery.once

main.js

$(document).ready(function($) {
    $(function() {
        $(window).scroll(function() {
            var scroll = $(window).scrollTop();

            if (scroll >= 300) {
                $("#navbar").addClass('smaller');
            } else {
                $("#navbar").removeClass("smaller");
            }
        });
    });
})(jQuery);
theming8javascript
2
jimi

変化する

$(document).ready(function($) {
    $(function() {
        $(window).scroll(function() {
            var scroll = $(window).scrollTop();

            if (scroll >= 300) {
                $("#navbar").addClass('smaller');
            } else {
                $("#navbar").removeClass("smaller");
            }
        });
    });
})(jQuery);

に

Drupal.behaviors.basic = {
   attach: function (context, settings) {
   (function($) {
        $(window).scroll(function() {
            var scroll = $(window).scrollTop();

            if (scroll >= 300) {
                $("#navbar").addClass('smaller');
            } else {
                $("#navbar").removeClass("smaller");
            }
        });
   })(jQuery);
  }

};

2
Yusef

2つのこと。

1つは、YAMLを適切にフォーマットする必要があることです。 別の質問では、YAML Lintを使用することをお勧めします 正しい構造になっていることを確認します。

する必要があります：

global-styling: 
  css: 
    theme: 
      css/basic-page.css: {}
      css/masonry.css: {}
      css/style.css: {}
  dependencies: 
    - core/jquery
    - core/drupal.ajax
    - core/drupal
    - core/drupalSettings
    - core/jquery.once
  js: 
    js/main.js: {}

また、スタイルとJavaScriptを2つの定義に分割することをお勧めしますが、それはあなた次第だと思います。

2つ目は、 JavascriptはDrupalと互換性がある必要があります です。

の代わりに：

$(document).ready(function() {
    $(function() {
        $(window).scroll(function() {
            var scroll = $(window).scrollTop();

            if (scroll >= 300) {
                $("#navbar").addClass('smaller');
            } else {
                $("#navbar").removeClass("smaller");
            }
        });
    });
})();

あなたが欲しいのは：

(function($) {
    Drupal.behaviors.windowScroll = {
      attach: function (context, settings) {
        $(window).scroll(function() {
            var scroll = $(window).scrollTop();

            if (scroll >= 300) {
                $("#navbar").addClass('smaller');
            } else {
                $("#navbar").removeClass("smaller");
            }
        });
      });
    }
})(jQuery);

注：DrupalはjQuery.noConflict（）を使用し、必要な場合にのみJavaScriptファイルをロードするため、jQueryおよびjの$ショートコードを使用するには、jQueryおよびDrupalを含める必要があります。 = MODULE.libraries.ymlのライブラリ定義の依存関係として、関数の周りにラッパーを追加します。

(function ($, Drupal) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
     $(context).find('input.myCustomBehavior').once('myCustomBehavior').each(function () {
      // Apply the myCustomBehaviour effect to the elements only once.
    });
    }
  };
})(jQuery, Drupal);
2
Kevin

your-theme.libraries.ymlファイル：

base:

 version: 1.x

js:

 js/main.js: {}

your-theme.info.ymlファイル：

libraries:

 - 'your-theme/global-styling'

 - 'your-theme/base'

私の以前のdrupal8 Webサイトで機能した上記の方法を試してください。jsファイルがロードされていないと思います。

bootstrapサブテーマにmain.jsファイルと一緒にjsフォルダーを配置します

0
user52318