6.2. Drupal 8 थीम किन भागों से बनी होती है। Stark थीम का अवलोकन।

17/10/2025, by Ivan

Drupal 7 में, आप बहुत जल्दी और आसानी से Zen पर एक सबथीम बना सकते थे और अपनी वेबसाइट तैयार करना शुरू कर सकते थे। Drupal 8 से, अब अपनी खुद की थीम बनाने के लिए कई थीम बिल्डर उपलब्ध हैं। लेकिन इन पर सबथीम बनाने से पहले, यह समझना आवश्यक है कि कौन सी चीज़ कहाँ स्थित है।

Drupal डेवलपर्स हमें Stark थीम का उदाहरण देखने की सलाह देते हैं। यह थीम Drupal में केवल यह दिखाने के लिए जोड़ी गई है कि एक थीम की संरचना कैसे होती है। चलिए देखते हैं कि इस थीम के अंदर क्या-क्या है:

stark.info.yml फ़ाइल

हम समीक्षा की शुरुआत stark.info.yml फ़ाइल से करते हैं। पहले Drupal 7 में, थीम की जानकारी .info फ़ाइलों में रखी जाती थी, लेकिन Drupal 8 में हर जगह YAML का उपयोग किया जाता है, इसलिए अब यह फ़ाइल info.yml के रूप में होती है। YAML प्रारूप में कुंजी और मान (key-value pairs) को कॉलन (:) से अलग किया जाता है।

थीम का नाम:

name: Stark

प्रोजेक्ट का प्रकार थीम या मॉड्यूल हो सकता है। यहाँ यह एक थीम है:

type: theme

थीम पेज पर दिखाई देने वाला विवरण:

description: 'An intentionally plain theme with no styling to demonstrate default Drupal’s HTML and CSS. Learn how to build a custom theme from Stark in the Theming Guide'

Drupal प्रोजेक्ट्स को सुविधाजनक रूप से समूहित करने के लिए (उदाहरण के लिए, जब कई मॉड्यूल शामिल होते हैं, तो वे टैब्स में विभाजित हो सकते हैं):

package: Core

Contrib मॉड्यूल्स के लिए वर्शन स्वचालित रूप से सेट होता है, इसलिए यहाँ VERSION वेरिएबल टिप्पणी (comment) के रूप में रखा गया है। वास्तविक संस्करण नीचे सूचीबद्ध होता है:

# version: VERSION

Drupal का कोर वर्शन भी टिप्पणी के रूप में होता है और इसे drupal.org स्वचालित रूप से जोड़ता है।

Drupal 8.8 और उससे ऊपर के लिए:

core: 8.x
core_version_requirement: ^8 || ^9

Drupal 8.8 और उससे नीचे के लिए:

# core: 8.x

यह निर्धारित करता है कि थीम किसी बेस थीम का उपयोग करती है या नहीं। यदि false है, तो इसका अर्थ है कि यह किसी अन्य थीम से विरासत नहीं लेती:

base theme: false

थीम का संस्करण और Drupal कोर का संस्करण drupal.org द्वारा स्वचालित रूप से जोड़ा जाता है:

# Information added by Drupal.org packaging script on 2016-02-03
version: '8.0.3'
core: '8.x'
project: 'drupal'
datestamp: 1454490380

stark.libraries.yml फ़ाइल

यहाँ हम CSS और JavaScript थीम फ़ाइलें शामिल करते हैं:

global-styling:
  version: VERSION
  css:
    base:
      css/layout.css: {}

हम JavaScript फ़ाइलें भी शामिल कर सकते हैं:

global-styling:
  version: VERSION
  css:
    base:
      css/layout.css: {}
  js:
    js/custom.js: {}

यह ध्यान देने योग्य है कि अब jQuery का उपयोग वैकल्पिक है और यह पेज पर अपने आप नहीं लोड होता। यदि आप अपनी थीम की किसी स्क्रिप्ट में jQuery का उपयोग करना चाहते हैं, तो आपको इसे थीम में निर्भरता (dependency) के रूप में जोड़ना होगा:

global-styling:
  version: VERSION
  css:
    base:
      css/layout.css: {}
  js:
    js/custom.js: {}
  dependencies:
    - core/jquery

इसके अतिरिक्त, आप यह भी निर्धारित कर सकते हैं कि कौन सी CSS फ़ाइलें हमेशा दिखाई देंगी और कौन सी केवल प्रिंट संस्करण में:

global-styling:
  version: VERSION
  css:
    base:
      css/layout.css: {}
      css/style.css: {}
      css/colors.css: {}
      css/print.css: { media: print }
  js:
    js/custom.js: {}
  dependencies:
    - core/jquery

विवरण फ़ाइलें: README.txt, screenshot.png

ये फ़ाइलें दिखाती हैं कि थीम कैसी दिखती है और इसे कैसे इंस्टॉल किया जाए। यदि इंस्टॉलेशन या उपयोग में कोई विशेष निर्देश हैं, तो वे भी यहीं लिखे जाते हैं।

logo.svg फ़ाइल

यह लोगो फ़ाइल थीम की मूल निर्देशिका (root directory) में होने पर स्वचालित रूप से जुड़ जाती है। आप थीम सेटिंग्स के माध्यम से भी अपना लोगो अपलोड कर सकते हैं।

config फ़ोल्डर और stark.schema.yml फ़ाइल

यह एक और YAML फ़ाइल है जिसमें थीम की सेटिंग्स रखी जाती हैं। Stark थीम में यह केवल थीम सेटिंग पेज के शीर्षक के लिए प्रयोग होती है।

फ़ोल्डर: css, js

इन फ़ोल्डरों में कस्टम CSS और JavaScript फ़ाइलें रखी जाती हैं। याद रखें — केवल फ़ाइल को फ़ोल्डर में रखना पर्याप्त नहीं है, प्रत्येक फ़ाइल को stark.libraries.yml के माध्यम से अलग-अलग जोड़ा जाना चाहिए।

stark.breakpoints.yml फ़ाइल

यह फ़ाइल साइट के मोबाइल संस्करणों के लिए स्क्रीन साइज़ निर्धारित करती है। यह Drupal की एक नई सुविधा है, जिसके बारे में हम आगे विस्तार से बात करेंगे।

stark.mobile:
  label: mobile
  mediaQuery: '(min-width: 0px)'
  weight: 0
  multipliers:
    - 1x
stark.narrow:
  label: narrow
  mediaQuery: 'all and (min-width: 480px) and (max-width: 959px)'
  weight: 1
  multipliers:
    - 1x
stark.wide:
  label: wide
  mediaQuery: 'all and (min-width: 960px)'
  weight: 2
  multipliers:
    - 1x

इस प्रकार, Stark थीम Drupal की संरचना और थीमिंग को समझने के लिए एक शानदार उदाहरण है। अगले लेख में, हम देखेंगे कि Stable थीम के आधार पर अपनी खुद की Drupal थीम कैसे बनाई जाए।

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

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