УрокКак правильно подключать скрипты и css в шаблон

Внимательно рассматривая шаблоны других друпалеров я толкнулся с тем, что многие не умеют правильно подключать скрипты и стили в свой шаблон. В большей половине случаев все подключают их в page.tpl.php строкой типа <style type="text/css" и так далее. Работать-то оно будет. Однако в Друпале такой вариант считается неправильным (некошерным, не Drupal way и т.д.), т.к. для таких целей был создан файл имяТемы.info. Он придуман для того, чтобы при сканировании друпалом всех шаблонов (или модулей), он мог вывести информацию о каждом из них не загружая большое количество кода для выдирания оттуда информации о данной теме (модуле), что позволяет экономить ресурсы памяти.

А одним из важных пунктов подключения скриптов и стилей через info файл является то, что в этом случае они будут агрегированы (собраны в один файл) и закешированы. Файлы, подключенные в page.tpl.php кешироваться небудут.

В info-файл скрипты и css подключаются таким образом:

JavaScript

scripts[] = скрипт.js

CSS

stylesheets[all][] = style.css

Бывают случаи, когда подключать требуется скрипт или стиль только для конкретной страницы, или для определённого типа материала. В таком случае файлы надо подключать через php-код:

JavaScript

drupal_add_js(drupal_get_path('theme', 'имяТемы') . '/script.js');

CSS

drupal_add_css(drupal_get_path('theme', 'имяТемы') . '/style.css');

Комментарии

Аватар пользователя D.Choomc
D.Choomc написал:

и каким образом люди подключают js'ы? Забивают в ? Сам подключаю через инфо файл.

01.09.2010 11:44
Аватар пользователя Spleshka
Spleshka написал:

именно! засовывают в и радуются, что всё работает

01.09.2010 13:12
Аватар пользователя Тайный поклонник Иван
Тайный поклонни... написал:

Всегда подключал js и css файлы в template.php с помощью функции drupal_add_(), в независимости от того, если ли какие-либо условия или нет...
Спасибо!

11.10.2010 05:37
Аватар пользователя sail
sail написал:

У меня банальный вопрос.
Подключать можно только style.css, лежащищий в корне темы?
Я экспериментировал с другими именами файлов стилей, почему-то не проходит

Я конечно, на крайняк сделаю внутренний импорт:

@import "/style/print.css";
@import "/style/palm.css"; 
BODY {
 font-family: Arial, Verdana, Helvetica, sans-serif;
 font-size: 90%;
 background: white;
 color: black;
}

но это не ахти-наглядно

05.03.2011 19:51
Аватар пользователя Spleshka
Spleshka написал:

Нет, никаких импортов! Вот статья которая рассказывает как надо

05.03.2011 22:25
Аватар пользователя sail
sail написал:

Так в том и проблема, что друпал отзывается только на сторку в файле тема.info :

stylesheets[all][] = style.css

А на сторку типа:

stylesheets[all][] = путь/имя_файла.css

вообще ноль реакции.
А у меня стили разбросаны вразные файлы с разными именами

06.03.2011 09:57
Аватар пользователя nuroff
nuroff написал:
stylesheets[all][] = css/layout.css
stylesheets[all][] = css/style.css
stylesheets[all][] = css/colors.css
stylesheets[all][] = css/custom.css
stylesheets[print][] = css/print.css

Все подключились. Тема самопальная. D7.
И вообще корень темы должен содержать info файл только.
Ну у меня пока там валяется еще скриншот и template.php.

03.09.2011 02:17
Аватар пользователя Тайный поклонник
Тайный поклонник написал:

:LAUGHING:

24.09.2011 00:59
Аватар пользователя Тайный поклонник
Тайный поклонник написал:

в начале статьи....
Бывают случаи, когда подключать требуется скрипт или стиль только для конкретной страницы, или для определённого типа материала. В таком случае файлы надо подключать через php-код:

А это куда в template.php? (если да то куда именно?)

15.10.2011 11:28
Аватар пользователя Spleshka
Spleshka написал:

Если подключение в теме - то в template.php. Например, чтобы подключить js только для главной страницы:

function имяТемы_preprocess_page(&$variables) {
  if (drupal_is_front_page()) {
    // Подключение скрипта с именем script.js, который лежит в корне темы
    $variables['scripts'] = drupal_add_js(drupal_get_path('theme', 'имяТемы') . '/script.js');
  }
}
15.10.2011 15:38
Аватар пользователя Гость
Гость написал:

А если не на главной, а, например, на странице полного содержания какой-то новости?

26.10.2011 21:44
Аватар пользователя Spleshka
Spleshka написал:

Тогда вот так:

function имяТемы_preprocess_page(&$variables) {
  if ($variables['node'])  {
    if ($variables['node']->type == 'news' && $variables['node']->nid == 10) {
      // Подключение скрипта с именем script.js, который лежит в корне темы
      $variables['scripts'] = drupal_add_js(drupal_get_path('theme', 'имяТемы') . '/script.js');
   }
  }
}

Если мы находимся на полном представлении ноды, то у страницы появляется объект ноды в $variables['node']. А дальше я проверил, является ли эта нода типом материала "Новость" с уникальным номером 10 (как пример).

27.10.2011 01:21
Аватар пользователя Виктор
Виктор написал:

В D7 не все так однозначно. И раз мы говорим о кошерном подключении скриптов, то надо вспомнить про "render arrays" и их свойство "attached". В D7 кошерные блоки и функции "page callback" должны возвращать render array, а не строку готового html-кода, как в D6 (хотя строка тоже работает). Если блок возвращает "render array" и подключает javascript при помощи drupal_add_js(), то после кеширования блока скрипт не будет подключаться, потому что закешированные блоки уже не создаются (контент не строится) и drupal_add_js() не будет вызываться.

09.11.2011 00:45
Аватар пользователя Dmitry
Dmitry написал:

Если подключение в теме - то в template.php. Например, чтобы подключить js только для главной страницы:

а если нужно подключить css для определенного типа материала? как тогда будет выглядеть код?

20.11.2011 01:45
Аватар пользователя Spleshka
Spleshka написал:

Вот например подключение для типа материала news:

function имяТемы_preprocess_page(&$variables) {
  if (isset($variables['node']))  {
    if ($variables['node']->type == 'news') {
      $variables['scripts'] = drupal_add_js(drupal_get_path('theme', 'имяТемы') . '/script.js');
   }
  }
}
20.11.2011 18:23
Аватар пользователя Coolbits
Coolbits написал:

А можете объяснить на примере Google+ как ПРАВИЛЬНО вставить эту кнопку? Я раньше вставлял весь код в page.tpl.php Действительно, не кешируется. Хочется сделать вс1 по уму.

16.12.2011 21:05
Аватар пользователя Spleshka
Spleshka написал:

дайте код кнопки, я покажу как подключить.

17.12.2011 11:53
Аватар пользователя Coolbits
Coolbits написал:

Код кнопки с асинхронной загрузкой. У меня D6. Подскажите, как сделать все правильно.

<script>
(function() {
  var po = document.createElement('script');
  po.type = 'text/javascript';
  po.async = true;
  po.src = 'https://apis.google.com/js/plusone.js';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(po, s);
})();
</script>
<g:plusone></g:plusone>
17.12.2011 15:24
Аватар пользователя respect
respect написал:

интересно, а как кошерно подключить счетчики посещаемости?

24.12.2011 22:42
Аватар пользователя Spleshka
Spleshka написал:

В блок засунь и выставь в любой регион =)

25.12.2011 01:04
Аватар пользователя Igor
Igor написал:

Помогите подключить js

$(document).ready(function() {
  $('a.nudge').hover(function() { //mouse in
    $(this).animate({ paddingLeft: '20px' }, 400);
  }, function() { //mouse out
    $(this).animate({ paddingLeft: 0 }, 400);
  });
});

В файл темы вставляю

<?php drupal_add_js(drupal_get_path('theme', 'dreamy') . misc'/link.js');?>

page.tpl.php Хочу чтобы двигались ссылки в блоге новые комментарии и новые статьи http://gosha.me/

21.01.2012 08:55
Аватар пользователя Spleshka
Spleshka написал:

Через page.tpl.php не надо подключать скрипты. Сделайте это так, как описано в статье выше: в info файле через

scripts[] = script.js
21.01.2012 13:49
Аватар пользователя Igor
Igor написал:

scripts[] = название скрипта.js Вот прописал я в теме, а куда мне сам скрипт запихнуть? Чтоб работало, как я написал((( Просто не сталкивался с этим, все обходилось модулями ставишь и работает :) Помогите пожалуйста спасибо!

21.01.2012 14:21
Аватар пользователя Spleshka
Spleshka написал:

Сам скрипт положите в файл script.js, а файл поместите в корень темы.

21.01.2012 15:46
Аватар пользователя Igor
Igor написал:

В файле info прописал scripts[] = script.js сам файл скрипта положил в корень темы не работает (((

21.01.2012 16:04
Аватар пользователя Spleshka
Spleshka написал:

После этого ещё надо кэш сайта сбросить.

22.01.2012 16:23
Аватар пользователя Igor
Igor написал:

Сбрасывал не работает ((( может вы сами данный скрипт проверите.

22.01.2012 21:01
Аватар пользователя Spleshka
Spleshka написал:

Давайте скрипт, посмотрю.

22.01.2012 23:23
Аватар пользователя Igor
Igor написал:

http://drupalace.ru/comment/2973#comment-2973

23.01.2012 00:25
Аватар пользователя Igor
Igor написал:

а вы скрипт еще не смотрели ?

24.01.2012 14:28
Аватар пользователя Spleshka
Spleshka написал:

Посмотрел. Закиньте так:

(function($) {
 
Drupal.behaviors.themeName = {
  attach: function (context, settings) {
 
    $('a.nudge').hover(function() { //mouse in
      $(this).animate({ paddingLeft: '20px' }, 400);
    }, function() { //mouse out
      $(this).animate({ paddingLeft: 0 }, 400);
    });
 
  }
};
 
})(jQuery, Drupal);

Если и сейчас не заработает, то два варианта - либо не подключен файл к теме, либо в скрипте выбран неверный селектор. Если не заработает - покажите сайт в паблике, я посмотрю в чём может быть проблема.

25.01.2012 03:35
Аватар пользователя Igor
Igor написал:

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

27.01.2012 21:54
Аватар пользователя Spleshka
Spleshka написал:

Выкладывайте сайт в паблик и покажите его мне, я посмотрю.

02.02.2012 16:26
Аватар пользователя Igor
Igor написал:

http://gosha.me/

03.02.2012 15:41
Аватар пользователя Spleshka
Spleshka написал:

Я не вижу на странице класса nudge, на который вешается обработчик. Возможно, в этом причина?

06.02.2012 20:36
Аватар пользователя Igor
Igor написал:

Видимо да, у меня даже в теме нет темплате.php

09.02.2012 17:59
Аватар пользователя AmiGator
AmiGator написал:

А как подключить внешний css или js? например css от Google Webfonts. или какую нибудь библиотеку?
через файл info не прокатывает. только модулем или template.php?

03.03.2012 23:58
Аватар пользователя Enkel
Enkel написал:

Можно двумя вариантами, либо подключать в page.tpl.php всё равно все библиотеки/css размещенные в гугле, яндексе сжаты и распространяются по CDN(Сеть Дистрибуции Контента), то есть загружаются быстрее, либо можешь создать любой файл css без разницы как ты его назовешь, прописать его в info файле, а в файле css использовать import

@import "http://example.com/style/main.css";
04.03.2012 00:11
Аватар пользователя AmiGator
AmiGator написал:

а вот это классный совет. спасибо :)

04.03.2012 00:58
Аватар пользователя AmiGator
AmiGator написал:

что то с модулем Google Webfont Loader не удалось разобраться. добавил код в template.php
только для 7 друпала вместо variables нужно писать vars. правильно?
и еще, если в template.php одну и туже функцию дважды вписать, то все рушиться. обойти это никак нельзя? каждая функция только один раз?

04.03.2012 00:57
Аватар пользователя Denozavr
Denozavr написал:

Подскажите плиз. Если я правильно понял, то виджеты соц. сетей лучше тоже убрать из Mynode.tpl.php, поместить в отдельный файл типа виджет.js и грузить через info?

06.03.2012 01:13
Аватар пользователя Spleshka
Spleshka написал:

Да. Тогда этот js будет кэшироваться.

06.03.2012 13:33
Аватар пользователя Denozavr
Denozavr написал:

1. Попробовал загнал все счетчики в блок footer, главная страница вроде побыстрее стала, но при открытии ноды идет ожидание от всех счетчиков.... так и должно быть
2. С виджетами вообще засада, слепил файл виджет.js все их туда прописал, сделал в инфе ссылку.....И они вообще перестали показываться (кроме googla) пробовал ( на google & facebook) создать раздельно для каждого виджета свой сккрипт (показывает опять только google)...мож че не так делаю. Фейсбук например в скипте картинку like передает.....
Вообщем хотел как лучше, а вышло......

06.03.2012 22:56
Аватар пользователя тимыч
тимыч написал:

SplasH помоги с кодом, нужно подключить jjss.js только на страницах user/uid/text, user/uid/video и user/uid/image/ . Cтраницы формируются модулем views. Заранее спасибо

31.08.2012 18:16
Аватар пользователя Spleshka
Spleshka написал:
if (arg(0) == 'user' && arg(1) == 'uid' && in_array(arg(2), array('text', 'video', 'image'))) {
  drupal_add_js('добавляем js');
}
01.09.2012 02:37
Аватар пользователя тимыч
тимыч написал:

Огромное Огромное Огромное спасибо. пож-ста ответь еще на один вопрос. С точки зрения производительности есть разница между подключением
drupal_add_js('sites/all/themes/МояТема/jquery.min.js'); или
drupal_add_js(drupal_get_path('theme', 'МояТема') . '/jquery.min.js');

я думаю что первый вариант правильнее ведь второй вариант задействует еще одну функцию drupal_get_path. Если не прав исправь пожалуйста

01.09.2012 16:17
Аватар пользователя тимыч
тимыч написал:

и еще один вопрос :)
если я хочу подключить не один а несколькко то так должно выглядеть?

if (arg(0) == 'user' && in_array(arg(2), array('text', 'video', 'image'))) {
drupal_add_js(drupal_get_path('theme','МояТема') . '/1.js');
drupal_add_js(drupal_get_path('theme','МояТема') . '/2.js');
drupal_add_js(drupal_get_path('theme','МояТема') . '/3.js');
}

01.09.2012 16:28
Аватар пользователя Spleshka
Spleshka написал:

@Тимыч,

По поводу производительности - разницы никакой абсолютно нет, выигрываются возможно тысячные милисекунды (т.е. практически ничего). Зато через drupal_get_path() - правильнее и не будет никогда проблем, если вдруг тема переедет в другую папку например.

По поводу подключения нескольких скриптов - да, правильно.

03.09.2012 13:12
Аватар пользователя тимыч
тимыч написал:

СПАСИБО

04.09.2012 17:06
Аватар пользователя Петрович
Петрович написал:

можно и так

04.01.2013 19:52
Аватар пользователя sashken
sashken написал:

не могу таким способом подключить внешний javascript
scripts[] = http://сайт/скрипт.js

21.01.2013 16:10
Аватар пользователя sergeybelya
sergeybelya написал:

скрипт должен находиться в папке js или в корне темы или модуля, т.е. ссылка должна быть вида js/скрипт.js, а не абсолютная.

21.01.2013 16:27
Аватар пользователя Dias
Dias написал:

Взял скрипт Jscollpane. В .info прописал css и 2 .js. Очистил кеш. Вставил

<script type = "text/javascipt">
$(document).ready(function() {
  $('.scrollblock').jScrollPane({showArrows: true});
});
</script>

в page.tpl. Все равно отображается обычный скролл. Менял overflow на hidden, просто скрывается и все. В чем проблема?

12.03.2013 15:23
Аватар пользователя Dias
Dias написал:

scroll т.е. не видно вообще, что при auto что при hidden.

12.03.2013 15:42
Аватар пользователя Spleshka
Spleshka написал:

css не забудьте подключить. Без него скрипт не отображается визуально, хоть и отрабатывает.

14.03.2013 12:52
Аватар пользователя Dias
Dias написал:

Css подключал в .info

14.03.2013 13:23
Аватар пользователя Spleshka
Spleshka написал:

Попробуйте заменить $(document).ready на Drupal.behaviors http://habrahabr.ru/post/161039/

14.03.2013 13:40
Аватар пользователя DaLi
DaLi написал:

Чернокнижники, подскажите пожалуйста, нужно подключить скрипты и стиль для слайд шоу...
Все скопировал в корень темы, сую в acquia_marina.info :
scripts[] = jquery-1.2.6.min.js
scripts[] = jquery.dhonishow.js
stylesheets[all][] = dhonishow.css

в блоке Slide где у меня:

picture1picture2

отображается только код... ткните носом... и как можно проверить подключен скрипт аль нет?

19.03.2013 16:57
Аватар пользователя Гость
Гость написал:

* в блоке Slide где у меня:
<div class="dhonishow">
<img src="img/pic1.jpg" alt="picture1" />
<img src="img/pic2.jpg" alt="picture2" />
</div>

отображается только код... ткните носом... и как можно проверить подключен скрипт аль нет?

19.03.2013 16:58
Аватар пользователя Assmaday
Assmaday написал:

В ПАПКУ SCRIPTS ТЕМЫ БРОСАТЬ ФАЙЛ НУЖНО, А НЕ КОРЕНЬ САЙТА

09.10.2013 18:18
Аватар пользователя Snowbll
Snowbll написал:

отличный сайт! Спасибо! У меня свой вопрос по подключению.
У меня есть 2е страницы которые формируются на вьювс, а вьювс фильтруется по значению термина в УРЛ. Первый вьювс имеет адрес /photo/% , второй - /video/%. Для них я создал два файла page--photo.tpl.php и page--video.tpl.php

Необходимо подключить jQuery плагин (scroll.js) только для этих страниц. А так же подключить photo.js только для страниц /photo/% , а video.js только для /video/% т.к. scroll.js это сам плагин, а файлы photo.js и video.js нужны для инициализации с разными селекторами плагина scroll.js на соответствующих страницах.

Как это сделать ? Как вы уже писали:

if (arg(0) == 'photo' && arg(1) == 'tid' ) {
drupal_add_js('photo.js');
}

if (arg(0) == 'video' && arg(1) == 'tid' ) {
drupal_add_js('video.js');
}
?

Или как то по именам файлов шаблона можно? Например скрипт photo.js будет цепляться только к страничкам которые используют шаблон page--photo.tpl.php и т.д.

23.12.2013 12:18
Аватар пользователя Вася
Вася написал:

Кто нибудь может научить как скрипты подключать к друпал 6 ? Очень нужно, сам пробовал не получается, прописывал все как есть тут , но ничего

24.06.2015 16:24
Аватар пользователя Вася
Вася написал:

моя ICQ 645759044 напишите пожалуйста добрые люди

24.06.2015 16:25
Аватар пользователя Василий
Василий написал:

Подскажите, пожалуйста, вопрос касательно счетчиков, особенно Rating@Mail.ru и Rambler Top100 (закинул их в футер отдельным блоком):
- нужно ли прописывать скриптовую часть через файл info, а в блоке оставлять только нескриптовую часть, или оставлять все целиком в блоке футера? Это скажется на производительности или нет?

22.09.2015 16:14

Комментировать