Cara yang tepat untuk menambahkan JS dan CSS ke node / edit dan formulir lainnya

10

Saya membuat situs dengan banyak JS, dan saya bertanya-tanya di mana saya harus meletakkan kode JS. Secara optimal saya ingin menjaga JS dengan setiap modul dan bukan lapisan tema. Beberapa konten dapat diekspos sebagai blok, dll.

Tetapi saya mengalami beberapa masalah dengan cache. Dalam contoh saya, saya perlu menambahkan JS & CSS ke formulir edit simpul. Saya telah menggunakan hook_block_view, tetapi di-cache. Jadi jika ada kesalahan dalam bentuk edit simpul, fungsi drupal_add_js & drupal_add_css tidak dipanggil. Hal yang sama tampaknya berlaku untuk hook_node_prepare.

Di mana Anda akan memasukkan lapisan JS & CSS? dan apakah ada kait yang dipanggil bahkan jika ada kesalahan dalam bentuk edit simpul?

theming hooks Jens
sumber

Jawaban:

6

Jika Anda ingin menambahkan JS dan CSS ke halaman edit simpul pada khususnya (atau bentuk apa pun secara umum), tempat terbaik dan tepat untuk melakukannya adalah hook_form_alter () dan properti yang harus Anda gunakan adalah #after_build.

Komentar pada DO ini memberi tahu Anda apa yang harus dilakukan - http://drupal.org/node/1253520#comment-4881588

Semoga ini membantu :-)

Sumeet Pareek
sumber
Terima kasih, apa yang saya butuhkan. Punya formulir yang bagus sekarang, jauh lebih baik daripada default he he. Adakah pendapat tentang arsitektur situs semacam itu?
Jens
Senang itu berhasil. Ketika sudah demikian Anda harus menandai jawaban sebagai 'jawaban diterima' sehingga pertanyaan tidak muncul dalam daftar pertanyaan yang tidak terjawab dan orang yang membantu Anda mendapatkan "karma". Saya melihat Anda baru di sini. Saya juga, tetapi saya memiliki lebih banyak akun aktif di layanan StackOverflow lainnya, dan saya suka tempat ini.
Sumeet Pareek
Dan oh .. hanya mengetahui bahwa Anda memerlukan JS CSS pada formulir dan mencoba mengomentari arsitektur situs tidak akan kurang dari kejahatan :-p
Sumeet Pareek
Tentu, jawab sekarang.
Jens
1
@SumeetPareek Saya menurunkan jawaban Anda (tetapi jangan tersinggung) karena menggunakan #attacheddirekomendasikan dalam hampir semua kasus. Selain itu, drupal_add_js / css akan ditinggalkan dalam Drupal 8.
AyeshK
6

Anda harus menggunakan properti #attached untuk memastikan bahwa JS / CSS selalu dimuat dengan benar bersama dengan elemen render lainnya.

Pelajaran
sumber
Saya merasa ini akan sangat bermanfaat dari contoh cara menggunakan #attached, dan mungkin beberapa info tambahan tentang masalah yang Anda hindari.
Michael Greisman
@MichaelGreisman Saya harus mengatakan saya tidak segera melihat nilai menambahkan kode inline di sini. Akan lebih baik dikelola di tautan yang saya berikan, yang merupakan dokumentasi resmi tentang cara melakukannya. Jawaban saya menjelaskan apa yang harus dilakukan, tetapi formulir api dokumentasi adalah tempat yang tepat untuk caranya .
Letharion
3

Saya merasa jawaban & komentar ini sangat membutuhkan kode contoh, terutama yang dari @AyeshK dan @Letharion. Ini terlalu lama untuk dikomentari, jadi tolong maafkan jawabannya. Jika ini berguna bagi Anda, silakan pilih Sumeet atau Letharion. Juga, contoh berikut jelas menambahkan CSS, tetapi akan hampir identik untuk menambahkan javascript.

Menggunakan jawaban @ Sumeet, tetapi menggunakan #attachedproperti alih-alih drupal_add_css, terlihat seperti ini:

/* 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;
}

Akhirnya, penghentian drupal_add_cssdapat ditemukan dalam posting ini . Itu mungkin berita bagi banyak orang yang drupal_add_xxx bekerja dengan baik, seperti bagi saya.

Michael Greisman
sumber
The #after_buildbit adalah, untuk yang terbaik dari omong kosong pengetahuan saya, dan hanya harus dihapus. (Ada komentar serupa pada jawaban yang memberikan #after_buildsolusi) Saya pikir ini dengan sendirinya menjelaskan mengapa jawaban singkat saya baik. Jika Anda sederhana melihat tautan yang saya berikan, Anda akan menemukan kode yang sama, tetapi tanpa bit yang tidak perlu.
Letharion
0

Untuk Drupal 8, saya akan menyarankan Anda untuk melihat artikel ini

libraries.yml

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

.modul

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