По-умолчанию все скрипты, подгружаемые к теме помещаются в подвал сайта (footer).
Но что делать, когда требуется подключение скриптов именно в шапку сайта. Например, создавая "пиксель" Facebook и Вконтакте необходимо поместить его именно в header темы, иначе работать он не будет.
Для тех, кто еще не в курсе, "пиксель" - это "жучок", который служит для пометки аудитории, чтобы затем таргетироваться на нее показывая рекламу.
Как это сделать?
Как подключить script или css стиль к сайту?
Начнем с того, что скрипты, как и css стили можно подключать, как в файле темы, так и в файле модуля. В случае с темой файл для подключения называется themename.libraries.yml.
Он лежит в папке с темой. Заходим в него. И видим перечень библиотек, подключенных к сайту, например, global-styling или bootstrap. Каждая библиотека содержит js и css разделы. Замечу, что они отделены от края тремя пробелами (иначе не будет работать).
Файлы библиотек подгружаются через указание пути и имени файла относительно папки темы:
css/style.css: {}
js/mainscript.js: {}
Для того чтобы активировать подключенную библиотеку нужно добавить упоминание о ней в файле *.info.yml находящегося в каталоге темы.
После этого действия библиотека будет активирована и начнем запускаться на всех страницах сайта.
Если вы хотите активировать библиотеку со всем ее содержимым в перезаписываемом twig шаблоне, то добавьте функцию {{ attach_library }} в начале нужного файла шаблона.
Например:
{{ attach_library('getdrupal8/articles') }}
- где getdrupal8 - это название папки темы в папке themes, а articles - название подключаемое библиотеки.
Не забывайте про behaviors
Если вы пишете код и хотите его вставить на сайт обязательно оборачивайте его в behaviors, например:
(function ($) {
Drupal.behaviors.myLibraryBehavior = {
attach: function (context, settings) {
$('#notification-bell').click(function () {
$('.region-right-menu').addClass('fa-block');
});
}
};
})(jQuery);
Использование behaviors - это залог безопасного подключения. Он позволяет избегать конфликта и неполадок в js коде.
Как подключить script в шапку сайта?
Для того чтобы подключить script в шапку темы нужно дописать header: true
page:
version: 1.x
header: true
css:
theme:
css/page.css: {}
Еще вариант:
В шаблоне страницы page.html.twig в начале вставить код <head></head> а в него поместить скрипт <script type="text/javascript">...здесь будет скрипт пикселя...</script></head>. Мне этот вариант также помог ;)
Полезные статьи:
Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 theme
На этом все! Удачи вам!
Если статья вам понравилась, обязательно ставьте лайк и делитесь ею в соцсетях.