Düğüme / düzenlemeye ve diğer formlara JS ve CSS eklemenin doğru yolu

10

Bir sürü JS ile bir site yapıyorum ve nerede JS kodu koymak gerektiğini merak ediyorum. Optimal ben tema modülü değil, her modül ile JS tutmak istiyorum. Bazı içerikler blok vb. Olarak gösterilebilir.

Ama önbellek ile ilgili bazı sorunlar yaşıyorum. Örneğimde, düğüm düzenleme formuna JS ve CSS eklemem gerekiyor. Hook_block_view kullandım, ancak önbelleğe alındı. Bu nedenle, düğüm düzenleme formunda bir hata varsa, drupal_add_js & drupal_add_css işlevleri çağrılmaz. Aynı şey hook_node_prepare için de geçerli.

JS & CSS katmanını nereye girersiniz? ve düğüm düzenleme formunda bir hata olsa bile çağrılan kancalar var mı?

theming hooks

— Jens
kaynak

6

Özellikle düğüm düzenleme sayfasına JS ve CSS eklemek istiyorsanız (veya genel olarak herhangi bir form), bunun için en iyi ve doğru yer hook_form_alter () 'dir ve kullanmanız gereken özellik #after_build'tir.

DO hakkındaki bu yorum size tam olarak ne yapacağınızı söyler - http://drupal.org/node/1253520#comment-4881588

Bu yardımcı olur umarım :-)

— Sümer Pareek
kaynak

Teşekkürler, tam ihtiyacım olan şey. Şimdi güzel bir form var, varsayılandan çok daha iyi. Böyle bir sitenin mimarisi hakkında herhangi bir görüşünüz var mı?

— Jens

Çalıştığına sevindim. Bu durumda, cevabı 'cevap kabul edildi' olarak işaretlemelisiniz, böylece soru cevaplanmamış sorular listesinde görünmez ve size yardım eden kişi "karma" alır. Burada yeni olduğunu görüyorum. Ben de, ama diğer StackOverflow hizmetlerinde daha aktif hesapları var ve bu yeri seviyorum.

— Sumeet Pareek

Ve oh .. sadece bir form üzerinde JS CSS ihtiyacınız olduğunu bilmek ve sitenin mimarisi hakkında yorum yapmaya çalışmak bir suçtan daha az olmayacaktır :-p

— Sumeet Pareek

Tabii, şimdi cevap verdi.

— Jens

1

@SumeetPareek Cevabınızı düşürdüm (ama hiçbir suçum yok) çünkü #attachedneredeyse her durumda kullanılması önerilir. Ayrıca, drupal_add_js / css, Drupal 8'de kullanımdan kaldırılacak.

— AyeshK

6

#Attached özelliğini, JS / CSS'nin her zaman başka bir oluşturma öğesiyle birlikte düzgün şekilde yüklenmesini sağlamak için kullanmalısınız .

— Letharion
kaynak

Bunun nasıl kullanılacağının bir örneğinden gerçekten fayda sağlayacağını hissettim #attachedve belki de kaçındığınız sorun hakkında bazı ek bilgiler.

— Michael Greisman

@MichaelGreisman Buraya satır içi kod eklemenin değerini hemen göremiyorum. Nasıl yapılacağına dair resmi belgeler olan sağladığım bağlantıda daha iyi korunacaktır. Cevabım ne yapacağımı açıklıyor , ancak api formu formu nasıl yapılacağı konusunda doğru yer .

— Letharion

3

Bu cevaplar ve yorumlar umutsuzca gerekli @AyeshK ve @Letharion, örnek kodu hissettim. Bu bir yorum için çok uzun, bu yüzden lütfen cevabı affedin. Sizin için yararlıysa, lütfen Sumeet veya Letharion'un cevabını yukarı oylayın. Ayrıca, aşağıdaki örnek açıkça CSS ekler, ancak javascript eklemek için neredeyse aynı olacaktır.

@ Sumeet'in yanıtını kullanmak, ancak #attachedbunun yerine özelliği kullanmak drupal_add_cssşöyle görünür:

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

Son olarak, ömürlerini drupal_add_cssbulunabilir bu yazı . Bu, benim için olduğu gibi, drupal_add_xxx'in iyi çalıştığı birçok kişiye haber olabilir.

— Michael Greisman
kaynak

#after_buildBiraz bilgim saçma kadarıyla, ve basitçe çıkarılmalıdır. ( #after_buildÇözümü sağlayan cevap için benzer bir yorum var ) Bence bu kendi içinde kısa cevabımın neden iyi olduğunu açıklıyor. Sağladığım bağlantıya basitçe bakarsanız, aynı kodu bulacaksınız, ancak gereksiz bitler olmadan.

— Letharion

0

Drupal 8 için bu makaleye bakmanızı tavsiye ederim

libraries.yml

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

.module

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

— Chris Mutlu
kaynak