6.3. Stable थीम के आधार पर अपनी स्वयं की Drupal थीम बनाना।

इस लेख से हम Drupal पर अपनी खुद की थीम बनाना शुरू करेंगे। इस ट्यूटोरियल के इस भाग में, हम Drupal की थीम की मूल बातें समझेंगे — कहाँ कौन सी फ़ाइलें होती हैं, CSS और JavaScript को कैसे शामिल करें और उपयोग करें।

हम अपनी थीम को कोर की Stable थीम पर आधारित करेंगे। यदि आप Drupal सीखना चाहते हैं, तो Stable एक शानदार शुरुआत है। Bootstrap से शुरू करना सही नहीं होगा, क्योंकि उसमें लगातार प्रश्न और त्रुटियाँ आती रहेंगी। इस ट्यूटोरियल के अगले भाग में, जब हमें Drupal थीम बनाने की अच्छी समझ हो जाएगी, तब हम Bootstrap के साथ काम करना शुरू करेंगे।

यह है आधिकारिक दस्तावेज़:

https://www.drupal.org/theme-guide/8

अपनी थीम के लिए फ़ोल्डर बनाना

सभी नई थीम्स को /themes फ़ोल्डर में रखा जाता है। आप पुरानी संरचना की तरह sites/all/themes में भी रख सकते हैं, लेकिन बेहतर है कि नई Drupal फ़ाइल संरचना का पालन करते हुए /themes का उपयोग करें।

मैं /themes/drupalbook फ़ोल्डर बनाऊँगा। आप अपनी थीम का नाम अपनी पसंद से रख सकते हैं:

drupalbook.info.yml फ़ाइल बनाना

हमारी थीम के फ़ोल्डर में एक फ़ाइल बनाएँ drupalbook.info.yml:

यह लेख YAML प्रारूप के बारे में विस्तृत जानकारी देता है:

https://en.wikipedia.org/wiki/YAML

दो बातों पर विशेष ध्यान दें:

1) इंडेंटेशन (indentation) के लिए टैब्स का उपयोग न करें, केवल स्पेस का उपयोग करें।

2) इंडेंट कम से कम एक स्पेस का होना चाहिए (जैसे: name: value, लेकिन name:value नहीं)।

drupalbook.info.yml फ़ाइल में निम्नलिखित कोड डालें:

name: Drupalbook
type: theme
base theme: stable
description: My first Drupal theme.
core: 8.x
core_version_requirement: ^8 || ^9
libraries:
  - drupalbook/global-styling
regions:
  header: Header
  content: Content  # यह क्षेत्र अनिवार्य है
  sidebar_first: 'Sidebar first' # उद्धरण चिह्न लगाना न भूलें
  footer: Footer

आइए देखें कि प्रत्येक पंक्ति का क्या अर्थ है:

name — हमारी थीम का नाम। हमारी थीम का मशीन नाम फ़ोल्डर और फ़ाइल के नाम से लिया जाता है — drupalbook।

type — प्रोजेक्ट का प्रकार Drupal है; यहाँ यह थीम है।

base theme — हम Stable थीम से विरासत (inherit) ले रहे हैं। यदि थीम पूरी तरह नई हो, तो यहाँ false लिखें।

description — एडमिन पैनल में दिखाई देने वाला थीम का विवरण।

core — Drupal कोर का संस्करण जिसके लिए यह थीम बनाई गई है।

libraries — यहाँ हम अपनी थीम से संबंधित लाइब्रेरियाँ जोड़ते हैं। इन्हें हम अगली फ़ाइल drupalbook.libraries.yml में परिभाषित करेंगे। ध्यान दें कि हमने यहाँ global-styling नाम का उल्लेख किया है, जिसे हम आगे उपयोग करेंगे।

regions — यह हमारी थीम के रीजन (क्षेत्र) हैं। content क्षेत्र अनिवार्य है क्योंकि Drupal की सामग्री उसी के माध्यम से प्रदर्शित होती है। यदि किसी रीजन का नाम दो या अधिक शब्दों का हो, तो उसे उद्धरण चिह्नों में रखें। रीजन के मशीन नामों में अंडरस्कोर (_) का उपयोग करें।

अब अपनी थीम की लाइब्रेरी बनाएँ

drupalbook.libraries.yml फ़ाइल बनाकर इसमें निम्नलिखित कोड जोड़ें:

global-styling:
  version: 1.x
  css:
    theme:
      css/style.css: {}
      css/print.css: { media: print }
  js:
    js/custom.js: {}
  dependencies:
    - core/jquery

अब इस कोड को पंक्ति-दर-पंक्ति समझते हैं:

global-styling — यह वही नाम है जिसे हमने drupalbook.info.yml में जोड़ा था।

css — यहाँ हम अपनी थीम की CSS फ़ाइलें जोड़ते हैं। ध्यान दें कि प्रिंट वर्शन के लिए हमने media: print निर्दिष्ट किया है।

js — यहाँ हम JavaScript फ़ाइलें जोड़ते हैं। ध्यान दें कि Drupal में jQuery डिफ़ॉल्ट रूप से उपलब्ध नहीं होता, इसलिए यदि हमें अपनी JavaScript में jQuery का उपयोग करना है, तो हमें इसे निर्भरता (dependency) के रूप में जोड़ना होगा:

dependencies:
  - core/jquery

अब css और js फ़ोल्डर बनाएँ और इनमें फ़ाइलें जोड़ें:

css/style.css

css/print.css

js/custom.js

चूँकि हम Stable थीम से विरासत ले रहे हैं, इसलिए इसके टेम्पलेट्स भी स्वचालित रूप से शामिल हो जाएँगे। अब अपनी वेबसाइट पर जाएँ:

/admin/appearance

कैश को क्लियर करें और अपनी थीम को सक्षम करें:

अब हमारी नई Drupalbook थीम साइट पर सक्रिय है: