Я хочу добавить следующий код в мой раздел главной страницы, используя подтему Drupal 8 от Bartik.
Кто-нибудь может помочь, как это сделать? Каков наилучший способ сделать это в новой версии ветки темы? Где находится page.tpl?
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="stepcarousel.js"></script>
Ответы:
На вас ТЕМА.libraries.yml:
global-styling:
version: VERSION
header: true // <--- To the header!!!
css:
theme:
css/mystyle.css: {} // if you want add custom css
js:
js/stepcarousel.js: {}
dependencies:
- core/drupal // for use drupal.js
- core/jquery
На вас THEME.info.yml:
name: THEME
base theme: Bartik
...
libraries:
- THEME/global-styling
...
и очистить кэш
Где находится page.tpl?
Здесь: core / modules / system / templates / page.html.twig
Если вы хотите использовать его, скопируйте в папку темы внутри шаблонов, например так:
THEME
templates
page.html.twig
Измени все что хочешь и очисти кеш
В Drupal 8 таблицы стилей и файлы JavaScript прикрепляются в виде библиотек :
Вы добавляете yourtheme.libraries.info в папку вашей темы (или пользовательского модуля):
power-slider:
version: 1.x
js:
js/power-slider.js: {}
css:
theme:
css/power-slider.css: {}
dependencies:
- core/jquery
А затем присоедините библиотеку к массиву рендеринга. Например, это прикрепляет библиотеку ко всем страницам:
function yourtheme_page_attachments_alter(&$page) {
$page['#attached']['library'][] = 'yourtheme/power-slider';
}
Этот подход имеет то преимущество, что его можно использовать повторно. Вы определяете необходимые пути один раз и можете повторно использовать их в разных местах своего кода.
Видеть:
Этот ответ был очень вдохновлен ответом берлинца .
В Drupal 8 клиентские ресурсы, такие как файлы CSS и JavaScript, прикрепляются к массивам рендеринга :
$element['#attached'] = array('js' => array(PATH_TO_JS));Где $elementможет быть выходной массив визуализации или элемент формы.
Кроме того, вы можете зарегистрировать библиотеку, определив ее в файле * .libraries.info
power-slider:
version: 1.x
js:
js/power-slider.js: {}
dependencies:
- core/jquery
и затем присоедините библиотеку к массиву рендеринга следующим образом:
$element['#attached']['library'][] = 'NAMEOFTHEMODULE/power-slider';Последний подход имеет то преимущество, что его можно использовать повторно. Вы определяете необходимые пути один раз и можете повторно использовать их в разных местах своего кода.