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

10

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

Але у мене є деякі проблеми з кешем. У своєму прикладі мені потрібно додати JS & CSS до форми редагування вузла. Я використовував kuke_block_view, але він кешований. Отже, якщо у формі редагування вузла є помилка, функції drupal_add_js & drupal_add_css не викликаються. Це ж, мабуть, справедливо і для kuke_node_prepare.

Де б ви ввели рівень JS & CSS? і чи є гачки, які викликаються, навіть якщо є помилка у формі редагування вузла?

theming hooks

— Єнс
джерело

6

Якщо ви хочете додати JS та CSS на сторінку редагування вузла, зокрема (або будь-яку форму взагалі), найкращим і правильним місцем для цього є гачка_form_alter (), а властивість, якою ви повинні користуватися, є #after_build.

Цей коментар щодо DO говорить саме про те, що робити - http://drupal.org/node/1253520#comment-4881588

Сподіваюся, це допомагає :-)

— Sumeet Pareek
джерело

Спасибі, саме те, що мені було потрібно. Зараз отримав гарну форму, набагато кращу, ніж він за замовчуванням. Якісь думки щодо архітектури такого сайту?

— Єнс

Радий, що це спрацювало. Коли це так, вам слід позначити відповідь як "відповідь прийнято", щоб питання не відображалось у списку питань без відповіді, і людина, яка вам допомагає, отримує "карму". Я бачу, що ви тут новачок. Я теж є, але в мене є більш активні акаунти в інших службах StackOverflow, і я люблю це місце.

— Sumeet Pareek

І о .. просто знати, що вам потрібно JS CSS на бланку, і намагатися прокоментувати архітектуру сайту було б не менше, ніж злочином :-p

— Sumeet Pareek

Звичайно, відповів зараз.

— Єнс

1

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

— АйешК

6

Ви повинні використовувати властивість #attached, щоб гарантувати, що JS / CSS завжди завантажуються належним чином разом з іншим елементом візуалізації.

— Летаріон
джерело

Я відчував, що це дійсно виграє з прикладу використання #attached, а може бути, і додаткової інформації про проблему, якої ви уникаєте.

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

@MichaelGreisman Я мушу сказати, що не відразу бачу значення додавання коду в рядок. Він буде краще підтримуватися за посиланням, яке я надав, що є офіційною документацією про те, як це зробити. У моїй відповіді пояснюється, що робити, але документація форми api - це правильне місце для того, як .

— Летаріон

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 я б радив переглянути цю статтю

libraryries.yml

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

.модуль

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

— Кріс щасливий
джерело