Правильный способ добавить JS и CSS в узел / редактировать и другие формы

10

Я делаю сайт с большим количеством JS, и мне интересно, где я должен разместить код JS. Оптимально я хотел бы сохранить JS с каждым модулем, а не слой темы. Некоторый контент может быть представлен как блоки и т. Д.

Но у меня есть некоторые проблемы с кешем. В моем примере мне нужно добавить JS & CSS в форму редактирования узла. Я использовал hook_block_view, но он кэшируется. Поэтому, если в форме редактирования узла есть ошибка, функции drupal_add_js & drupal_add_css не вызываются. То же самое можно сказать и о hook_node_prepare.

Где бы вы вводили слой JS & CSS? и есть ли хуки, вызываемые get, даже если в форме редактирования узла есть ошибка?

theming hooks

— Jens
источник

6

Если вы хотите добавить JS и CSS на страницу редактирования узла в частности (или любую форму в целом), лучшее и правильное место для этого - метод hook_form_alter (), а свойство, которое вы должны использовать, - #after_build.

Этот комментарий к DO говорит вам точно, что делать - http://drupal.org/node/1253520#comment-4881588

Надеюсь это поможет :-)

— Сумит Парик
источник

Спасибо, как раз то, что мне было нужно. Получил хорошую форму сейчас, намного лучше, чем по умолчанию хе-хе. Есть ли мнения об архитектуре такого сайта?

— Jens

Рад, что это сработало. Если это так, вы должны пометить ответ как «ответ принят», чтобы вопрос не появился в списке вопросов без ответа, а человек, помогающий вам, получил «карму». Я вижу, что вы новичок здесь. Я тоже, но у меня есть более активные учетные записи в других сервисах StackOverflow, и я люблю это место.

— Сумит Парик

И о ... просто зная, что вам нужен JS CSS в форме, и пытаться прокомментировать архитектуру сайта было бы не чем иным, как преступлением :-p

— Sumeet Pareek

Конечно, ответил сейчас.

— Дженс

1

@SumeetPareek Я отклонил ваш ответ (но без обид), потому что использование #attachedрекомендуется почти в любом случае. Более того, drupal_add_js / css будет устаревшим в Drupal 8.

— AyeshK

6

Вы должны использовать свойство #attached, чтобы гарантировать, что JS / CSS всегда загружается правильно вместе с другим элементом рендеринга.

— Letharion
источник

Мне показалось, что это действительно поможет пример использования #attachedи, возможно, некоторая дополнительная информация о проблеме, которую вы избегаете.

— Майкл Грейсман

@MichaelGreisman Я должен сказать, что не сразу вижу смысл добавления встроенного кода здесь. Это будет лучше поддержано по ссылке, которую я предоставил, которая является официальной документацией о том, как это сделать. Мой ответ объясняет , что делать, но документация формы апи является правильным местом для как .

— Летарион

3

Я чувствовал, что эти ответы и комментарии крайне нуждались в примере кода, особенно в @AyeshK и @Letharion. Это слишком долго для комментария, поэтому, пожалуйста, прости ответ. Если это полезно для вас, пожалуйста, проголосуйте за ответ Сумет или Летарион. Кроме того, следующий пример, очевидно, добавляет CSS, но будет почти идентичен для добавления JavaScript.

Использование ответа @ Sumeet, но с использованием #attachedсвойства вместо drupal_add_cssвыглядит следующим образом:

/* Implements hook_form_FORM_ID_alter() */
function MY_MODULE_form_MY_FORM_ID_alter(&$form, &$form_state, $form_id) {
  $form['#after_build'][] = 'MY_MODULE_some_function_name_after_build';
}

function MY_MODULE_some_function_name_after_build($form, &$form_state) {
  $style_path = drupal_get_path('module','MY_MODULE') . '/css/my_css.css';
  // drupal_add_css('file', $style_path);
  $form['#attached']['css'][] = $style_path;
  return $form;
}

Наконец, об осуждении drupal_add_cssможно узнать в этом посте . Это может быть новостью для многих, для которых drupal_add_xxx работал просто отлично, как это было для меня.

— оборота Майкл Грейсман
источник

Дело в #after_buildтом, что, насколько мне известно, ерунда, и ее следует просто удалить. (Существует аналогичный комментарий к ответу, обеспечивающему #after_buildрешение). Я думаю, что это само по себе объясняет, почему мой краткий ответ хорош. Если вы просто посмотрите на ссылку, которую я предоставил, вы найдете тот же код, но без лишних битов.

— Летарион

0

Для Drupal 8 я бы посоветовал вам взглянуть на эту статью

libraries.yml

something: 
  version: VERSION
  js: 
    js/something.js: {}
  dependencies: 
    - core/jquery

.module

function MODULE_page_attachments(array &$page) {
  $page['#attached']['library'][] = MODULE/something;
}

— Крис Хэппи
источник