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

03/10/2025, by Ivan

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

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

स्पष्टता के लिए, ये निर्देश केवल थीम्स के लिए हैं और मॉड्यूल्स पर लागू नहीं होते।

Drupal उच्च-स्तरीय सिद्धांत का पालन करता है: रिसोर्सेज़ (CSS या JS) तभी लोड होते हैं जब आप Drupal को बताते हैं कि उन्हें लोड करना है। Drupal हर पेज पर सभी रिसोर्सेज़ लोड नहीं करता क्योंकि इससे इंटरफ़ेस परफॉर्मेंस धीमी हो जाएगी।

Drupal 7 से अंतर

Drupal 7 की तुलना में छह महत्वपूर्ण बदलाव हैं:

THEME.info.yml फ़ाइल ने THEME.info फ़ाइल को बदल दिया है (उसी डेटा के साथ)।
THEME.info में stylesheets प्रॉपर्टी (CSS जोड़ने के लिए) हटा दी गई और इसकी जगह *.libraries.yml (जहाँ `*` थीम या मॉड्यूल का नाम है) आया।
THEME.info में scripts प्रॉपर्टी (JS जोड़ने के लिए) भी हटा दी गई और उसकी जगह *.libraries.yml आया।
केवल वही CSS/JS लोड होंगे जो पेज पर ज़रूरी हैं। उदाहरण के लिए, jQuery अब अपने आप लोड नहीं होता जब तक कि इसे *.libraries.yml में स्पष्ट रूप से शामिल न किया जाए। अगर आपकी थीम को jQuery या अन्य रिसोर्सेज़ की आवश्यकता है, तो उन्हें *.libraries.yml में जोड़ें और फिर THEME.info.yml में लाइब्रेरी को शामिल करें।
Drupal 7 में लाइब्रेरीज़ को hook_library_info() के जरिए परिभाषित करना पड़ता था। इसे *.libraries.yml फ़ाइल से बदल दिया गया।
Drupal 8 में drupal_add_css(), drupal_add_js() और drupal_add_library() को हटा दिया गया और उनकी जगह #attached का उपयोग किया गया।

प्रक्रिया

CSS या JS रिसोर्सेज़ लोड करने के लिए:

CSS या JS को उचित नामकरण सम्मेलनों और फाइल संरचना का पालन करते हुए एक फाइल में सेव करें।
एक “लाइब्रेरी” परिभाषित करें, जो आपकी थीम में इन CSS/JS फाइलों को रजिस्टर करती हो।
लाइब्रेरी को सभी पेजों पर, Twig टेम्पलेट्स पर, या प्रीप्रोसेस फ़ंक्शन्स के जरिए कुछ खास पेजों पर जोड़ें।

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

अपनी थीम की सभी रिसोर्स लाइब्रेरीज़ को *.libraries.yml फाइल में परिभाषित करें। अगर आपकी थीम का नाम fluffiness है, तो फाइल का नाम होगा fluffiness.libraries.yml। हर “लाइब्रेरी” इस फाइल में एक एंट्री होगी, जो CSS और JS फाइलों का विवरण देती है।

# fluffiness.libraries.yml
cuddly-slider:
  version: 1.x
  css:
    theme:
      css/cuddly-slider.css: {}
  js:
    js/cuddly-slider.js: {}

इस उदाहरण में JavaScript: cuddly-slider.js और CSS: cuddly-slider.css, आपकी थीम डायरेक्टरी के js और css फ़ोल्डर्स में हैं।

नोट: इस उदाहरण में केवल एक CSS और JS फाइल दिखाई गई है। असल में, लाइब्रेरीज़ परिभाषित करते समय बहुत सारे अन्य विकल्प भी होते हैं। विवरण देखें “लाइब्रेरी परिभाषा: विकल्प और विवरण”।

अपनी लाइब्रेरी में jQuery शामिल करना

याद रखें, Drupal 8 अब डिफ़ॉल्ट रूप से jQuery सभी पेजों पर लोड नहीं करता। यदि आपकी लाइब्रेरी (जैसे cuddly-slider) को jQuery चाहिए, तो आपको core/jquery लाइब्रेरी पर निर्भरता घोषित करनी होगी।

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

डिपेंडेंसीज़ घोषित करना

डिपेंडेंसीज़ को resource/library के फॉर्म में घोषित करें। कोर लाइब्रेरीज़ के लिए resource “core” होगा, जबकि अन्य के लिए मॉड्यूल या थीम का नाम होगा।

# fluffiness.libraries.yml
new_library:
  js:
    js/new_libary.js: {}
  dependencies:
    - core/jquery
    - my_module/my_library
    - my_theme/my_library

मॉड्यूल और थीम नाम लाइब्रेरीज़ के लिए नेमस्पेस प्रदान करते हैं।

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

ज्यादातर थीम्स में global-styling लाइब्रेरी CSS फाइलों के लिए होती है, जिन्हें हर पेज पर लोड करना होता है। JS के लिए global-scripts का उपयोग कर सकते हैं।

# fluffiness.libraries.yml
global-styling:
  version: 1.x
  css:
    theme:
      css/layout.css: {}
      css/style.css: {}
      css/colors.css: {}
global-scripts:
  version: 1.x
  js: 
    js/navmenu.js: {}

इन लाइब्रेरीज़ को थीम की info.yml फाइल में शामिल करें:

# fluffiness.info.yml
name: Fluffiness
type: theme
description: 'A cuddly theme that offers extra fluffiness.'
core: 8.x
libraries:
  - fluffiness/global-styling
  - fluffiness/global-scripts
base theme: classy
regions:
  header: Header
  content: Content
  sidebar_first: 'Sidebar first'
  footer: Footer

Twig टेम्पलेट से लाइब्रेरी जोड़ना

{{ attach_library('fluffiness/cuddly-slider') }}
<div>Some fluffy markup {{ message }}</div>

कुछ पेजों पर ही लाइब्रेरी जोड़ना

कभी-कभी आपको लाइब्रेरी केवल कुछ पेजों पर लोड करनी होती है। इसके लिए अपनी थीम की .theme फाइल में THEME_preprocess_HOOK() फ़ंक्शन का उपयोग करें।

function fluffiness_preprocess_maintenance_page(&$variables) {
  $variables['#attached']['library'][] = 'fluffiness/cuddly-slider';
}

यदि आप रूट-आधारित शर्तें जोड़ना चाहते हैं:

function fluffiness_preprocess_page(&$variables) {
  $variables['page']['#cache']['contexts'][] = 'route';
  $route = "entity.node.preview";
  if (\Drupal::routeMatch()->getRouteName() === $route) {
    $variables['#attached']['library'][] = 'fluffiness/node-preview';
  }
}

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

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