Как правильно подключать css и js файлы внутри модуля.

При написании собственных модулей в Drupal часто возникает необходимость подключать свои javascript и css файлы. В этой заметке мы рассмотрим как это делать правильно в Drupal 7.

Первое что нам необходимо сделать это получить путь к нашему модулю. Для этого в Drupal есть встроенная функция drupal_get_path($type, $name) с помощью нее можно получить путь к модулю, теме оформления и т.д. Полное описание функции можно найти здесь http://api.drupal.org/api/drupal/includes%21common.inc/function/drupal_get_path/7.

Функция drupal_get_path принимает два параметра:

  • $type - тип элемента к которому необходимо получить путь (в нашем случае этот параметр будет содержать значение 'module')
  • $name - машинное имя элемента к которому необходимо получить путь.

Таким образом если наш модуль называется к примеру test_module то путь к нему можно получить так :

  $path = drupal_get_path('module', 'test_module');

Следующим шагом для получения полного пути к файлу необходимо с помощью оператора соединения строк (в php это ' . ') соединить путь к модулю с локальным путем к файлу.

Например так:

  $path = drupal_get_path('module', 'test_module'); //получаем путь к модулю
  $path_to_css = $path . '/css/style.css'; //Получаем полный путь к файлу style.css
  $path_to_js = $path . '/js/script.js'; //Получаем полный путь к файлу script.js

Теперь когда у нас есть пути к файлам подключаем их с помощью специальных функций:

  • drupal_add_js для javascript файлов
  • drupal_add_css для css файлов

В конечном итоге скрипт подключения файлов для модуля test_module будет выглядеть следующим образом:

  $path = drupal_get_path('module', 'test_module'); //получаем путь к модулю
  $path_to_css = $path . '/css/style.css';  //Получаем полный путь к файлу style.css
  $path_to_js = $path . '/js/script.js'; //Получаем полный путь к файлу script.js
  drupal_add_js($path_to_js); //подлючаем файл script.js
  drupal_add_css($path_to_css); //подключаем файл style.css

Использовать этот скрипт можно например в хуке hook_init():

/**
 * Implements hook_init().
 */
function test_module_init() {
  $path = drupal_get_path('module', 'test_module'); //получаем путь к модулю
  $path_to_css = $path . '/css/style.css';  //Получаем полный путь к файлу style.css
  $path_to_js = $path . '/js/script.js'; //Получаем полный путь к файлу script.js
  drupal_add_js($path_to_js); //подлючаем файл script.js
  drupal_add_css($path_to_css); //подключаем файл style.css
}
Поделись с друзьями: