Как добавить CSS & JavaScript в <head>?

8

Я хочу добавить следующий код в мой раздел главной страницы, используя подтему 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>
8 javascript Ману Адам
источник

Ответы:

7

На вас ТЕМА.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

Измени все что хочешь и очисти кеш

rpayanm
источник
6

В 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';
}

Этот подход имеет то преимущество, что его можно использовать повторно. Вы определяете необходимые пути один раз и можете повторно использовать их в разных местах своего кода.

Видеть:

Этот ответ был очень вдохновлен ответом берлинца .

batigolix
источник
Ссылки не работают
Измир Рамирес
Обновлены ссылки.
Neograph734
1

В 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';

Последний подход имеет то преимущество, что его можно использовать повторно. Вы определяете необходимые пути один раз и можете повторно использовать их в разных местах своего кода.

берлинец
источник
1
После того как вы написали этот hook_library_info () был заменен файлом * .libraries.yml. См. Drupal.stackexchange.com/a/109029/12010 и drupal.org/node/2216195
batigolix
я не думаю, что это действительно устарело. это требует некоторого редактирования, вот и все. я попробую
batigolix
Я обновил ответ
Batigolix
@batigolix, хороший редактор. Тем не менее, это , вероятно , лучше , чтобы вы опубликовать обновленный ответ , как ваш ответ, вместо того чтобы изменить код Берлинера (код редактирования имеют тенденцию быть отвергнут как слишком навязчивым).
Свободное Радикальное
Хорошо, я добавил обновленную версию в качестве нового ответа. Вы правы: я должен был изменить больше, чем я думал, что было необходимо изначально.
Batigolix