Drupal 8 मॉड्यूल में स्टाइल टेबल्स (CSS) और JavaScript (JS) जोड़ना

03/10/2025, by Ivan

यह दस्तावेज़ मॉड्यूल्स के लिए है। थीम्स के बारे में जानकारी के लिए देखें Drupal 8 थीम में स्टाइल टेबल्स (CSS) और JavaScript (JS) जोड़ना.

Drupal 8 में स्टाइल टेबल्स (CSS) और JavaScript (JS) मॉड्यूल्स (कोड) और थीम्स दोनों के लिए एक ही सिस्टम के ज़रिए लोड किए जाते हैं: संसाधन लाइब्रेरी। एसेट लाइब्रेरी में एक या एक से अधिक CSS संसाधन, एक या एक से अधिक JS संसाधन और एक या एक से अधिक JS सेटिंग्स हो सकती हैं।

Drupal एक उच्च-स्तरीय सिद्धांत का पालन करता है: संसाधन (CSS या JS) केवल तभी लोड किए जाते हैं जब आप Drupal को बताते हैं कि उन्हें लोड करना है। Drupal सभी पृष्ठों पर सभी संसाधनों (CSS/JS) को लोड नहीं करता है, क्योंकि इससे UI प्रदर्शन पर नकारात्मक प्रभाव पड़ता है।

Drupal 7 से अंतर

डेवलपर्स के लिए Drupal 7 से दो महत्वपूर्ण अंतर हैं:

1. केवल वही JavaScript किसी पृष्ठ में जोड़ा जाएगा जिसकी वास्तव में ज़रूरत है। खासकर, डिफ़ॉल्ट रूप से Drupal को उन अधिकांश पृष्ठों पर JavaScript की ज़रूरत नहीं होती जिन्हें अनाम उपयोगकर्ता देखते हैं। इसका मतलब है कि jQuery अब सभी पृष्ठों पर स्वतः लोड नहीं होता।
इसलिए, यदि आपकी थीम को jQuery या कोई अन्य JavaScript (जो एसेट लाइब्रेरी में भी परिभाषित है) चाहिए, तो आपको Drupal को बताना होगा, आवश्यक एसेट लाइब्रेरी पर निर्भरता घोषित करके।

2. JavaScript ऑब्जेक्ट Drupal.settings को drupalSettings से बदल दिया गया है।

प्रक्रिया

संसाधनों (CSS/JS) को लोड करने के मुख्य चरण:

1. CSS या JS को फ़ाइल में सेव करें।
2. एक "लाइब्रेरी" परिभाषित करें, जिसमें CSS और JS फाइलें हो सकती हैं।
3. उस लाइब्रेरी को एक रेंडर एरे में "अटैच" करें।

लेकिन थीम्स के मामले में, चरण 3 का एक विकल्प है: थीम्स सभी पृष्ठों पर किसी भी संख्या में संसाधन लाइब्रेरी लोड कर सकती हैं।

लाइब्रेरी परिभाषित करना

एक या एक से अधिक लाइब्रेरी (संसाधन) परिभाषित करने के लिए, अपने मॉड्यूल फ़ोल्डर के रूट में *.libraries.yml फ़ाइल जोड़ें (अपने .info.yml फ़ाइल के साथ)। (यदि आपके मॉड्यूल का नाम fluffiness है, तो फ़ाइल का नाम fluffiness.libraries.yml होना चाहिए)। फ़ाइल में प्रत्येक "लाइब्रेरी" CSS और JS फ़ाइलों (संसाधनों) का विवरण देती है, जैसे:

cuddly-slider:
  version: 1.x
  css:
    layout:
      css/cuddly-slider-layout.css: {}
    theme:
      css/cuddly-slider-theme.css: {}
  js:
    js/cuddly-slider.js: {}

आप देखेंगे कि css के लिए 'layout' और 'theme' कुंजी हैं, लेकिन js के लिए नहीं। यह इंगित करता है कि CSS फ़ाइल किस प्रकार की स्टाइल से संबंधित है।

आप CSS वेट को 5 अलग-अलग स्टाइल स्तरों पर सेट कर सकते हैं:

base: CSS reset/normalize + HTML तत्व स्टाइलिंग (CSS_BASE = -200)
layout: वेब पेज का लेआउट, जिसमें grid systems शामिल हैं (CSS_LAYOUT = -100)
component: छोटे-छोटे, बार-बार उपयोग किए जाने वाले UI तत्व (CSS_COMPONENT = 0)
state: क्लाइंट-साइड स्टेट बदलावों से जुड़े स्टाइल (CSS_STATE = 100)
theme: केवल दृश्यात्मक स्टाइल, यानी लुक-एंड-फील (CSS_THEME = 200)

यह SMACSS मानक पर आधारित है। इसलिए यदि आप theme चुनते हैं, तो इसका मतलब है कि CSS फ़ाइल केवल लुक्स को प्रभावित करती है।

इस उदाहरण में, cuddly-slider.js js फ़ोल्डर में है। आप बाहरी URL से भी JS लोड कर सकते हैं। विवरण के लिए देखें: CDN/External libraries.

लेकिन याद रखें, Drupal 8 अब डिफ़ॉल्ट रूप से सभी पृष्ठों पर jQuery लोड नहीं करता। इसलिए यदि आपकी js फ़ाइल को jQuery चाहिए, तो आपको लाइब्रेरी पर निर्भरता घोषित करनी होगी: core/jquery।

cuddly-slider:
  version: 1.x
  css:
    theme:
      css/cuddly-slider.css: {}
  js:
    js/cuddly-slider.js: {}
  dependencies:
    - core/jquery

डिफ़ॉल्ट रूप से, Drupal JS फाइलों को पेज के नीचे अटैच करता है ताकि DOM ब्लॉकिंग और jQuery एरर जैसी समस्याएँ न हों। यदि किसी कारण से JS को <head> में जोड़ना है, तो header: true का उपयोग करें।

cuddly-slider:
  version: 1.x
  header: true
  js:
    js/cuddly-slider.js: {}

अब js/cuddly-slider.js पेज के ऊपर अटैच होगा।

लाइब्रेरी को पेज से जोड़ना

आपके संसाधनों की ज़रूरत के आधार पर, आप अलग-अलग तरीकों से लाइब्रेरी को अटैच कर सकते हैं। सबसे अच्छा तरीका है कि यह देखें कि पेज पर कौन-सी चीज़ें हैं, और उनके आधार पर लाइब्रेरी जोड़ें।

विशेष #type से जोड़ना

function yourmodule_element_info_alter(array &$types) {
  if (isset($types['table'])) {
    $types['table']['#attached']['library'][] = 'your_module/library_name';
  }
}

रेंडर एरे में अटैच करना

$build['element']['#attached']['library'][] = 'your_module/library_name';

ब्लॉक प्लगइन में अटैच करना

return [
  '#theme' => 'your_module_theme_id',
  '#attached' => [
    'library' => [
      'your_module/library_name',
    ],
  ],
];

फॉर्म में अटैच करना

function yourmodule_form_alter(&$form, FormStateInterface $form_state, $form_id) {
  $form['#attached']['library'][] = 'your_module/library_name';
}

Twig टेम्पलेट में अटैच करना

{{ attach_library('your_module/library_name') }}

drupalSettings का उपयोग करना

$build['#attached']['library'][] = 'your_module/library_name';
$build['#attached']['drupalSettings']['fluffiness']['cuddlySlider'] = [
  'foo' => 'bar',
  'baz' => 'qux',
];

फिर JS में: drupalSettings.fluffiness.cuddlySlider.foo का मान "bar" होगा।

CDN/External Libraries

angular.angularjs:
  remote: https://github.com/angular/angular.js
  version: 1.4.4
  license:
    name: MIT
    url: https://github.com/angular/angular.js/blob/master/LICENSE
    gpl-compatible: true
  js:
    https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js: { type: external, minified: true }

एक्स्ट्रा ब्लॉक टाइप्स (EBT) - नया लेआउट बिल्डर अनुभव❗

❗एक्स्ट्रा पैराग्राफ टाइप्स (EPT) - नया पैराग्राफ्स अनुभव