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);
変化する
$(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つのこと。
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);
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フォルダーを配置します