7.2.1. Bootstrap पर आधारित थीम बनाना। PhpStorm और LESS Compiler को हमारी थीम के साथ काम करने के लिए सेट करना।

पिछले पाठों में, हमने पहले ही देखा है कि किसी अन्य Stable थीम के आधार पर थीम कैसे बनाई जाती है। इस ट्यूटोरियल में, हम आपको दिखाएँगे कि कैसे Bootstrap पर आधारित थीम बनाई जाए — यह एक लोकप्रिय फ्रेमवर्क है जो पेज लेआउट को जल्दी बनाने की अनुमति देता है।

मुझे लगता है कि आपके पास पहले से Drupal स्थापित है। चलिए Bootstrap को स्थापित करने की प्रक्रिया पर चलते हैं:

https://www.drupal.org/project/bootstrap

Drupal 7 के विपरीत, Drupal 8 में साइट की सभी थीम्स को साइट की रूट डायरेक्टरी में स्थित /themes फ़ोल्डर में रखा जाता है:

Bootstrap पर आधारित अपनी खुद की थीम बनाने के लिए, आपको एक subtheme बनानी होगी। उप-थीम का फ़ोल्डर पैरेंट थीम से सीधे लिया जाता है:

/themes/bootstrap/starterkits/less

less फ़ोल्डर को /themes फ़ोल्डर में कॉपी करें, इसे पैरेंट bootstrap थीम के पास रखें, और इसे अपनी थीम के नाम से रीनेम करें। उदाहरण के लिए, मैं इसे drupalbook नाम दूँगा। साथ ही निम्नलिखित फाइलों का नाम बदलें — THEMENAME.libraries.yml, THEMENAME.starterkit.yml, THEMENAME.theme — ताकि THEMENAME की जगह आपकी थीम का नाम हो, जैसे drupalbook.libraries.yml। केवल THEMENAME.starterkit.yml का नाम बदलकर drupalbook.info.yml करें।

अब drupalbook.info.yml फ़ाइल में जाएँ और libraries सेक्शन में THEMENAME को बदलें:

libraries:
  - 'drupalbook/global-styling'
  - 'drupalbook/bootstrap-scripts'

थीम के नाम को भी बदलना उचित रहेगा:

name: 'Bootstrap Drupalbook Sub-Theme (LESS)'

थीम की सेटिंग फ़ाइलों का नाम भी बदलें:

/config/install/drupalbook.settings.yml
/config/schema/drupalbook.schema.yml

अब Bootstrap फ्रेमवर्क का कोड डाउनलोड करके कॉपी करें:

http://getbootstrap.com/getting-started/#download

हमें Bootstrap का Source code संस्करण चाहिए, जिसमें LESS फाइलें होती हैं जिन्हें अभी तक कंपाइल नहीं किया गया है:

https://getbootstrap.com/docs/4.3/getting-started/download/

अपनी उप-थीम में एक bootstrap नामक फ़ोल्डर बनाएँ और वहाँ Bootstrap की फाइलें कॉपी करें।

हम बिल्कुल वही Source code कॉपी करते हैं — न कि पहले से कंपाइल की गई CSS फाइलों वाला संस्करण। यह इसलिए आवश्यक है ताकि हम अपनी Drupal थीम में अलग-अलग फाइलों में Bootstrap वेरिएबल्स को ओवरराइड कर सकें:

/less/overrides.less
/less/variable-overrides.less

हम Bootstrap का SASS संस्करण भी उपयोग कर सकते हैं, लेकिन इसके लिए हमें SASS Compiler की आवश्यकता होगी। हम PhpStorm में मौजूद बिल्ट-इन LESS CSS Compiler का उपयोग करेंगे।

अब हम Appearance पेज पर जाकर अपनी थीम को सक्षम कर सकते हैं:

/admin/appearance

शुरुआत में हमारे पास Bootstrap की शैलियाँ (styles) उपलब्ध नहीं होंगी, क्योंकि उन्हें अभी कंपाइल करना होगा। इसके लिए हम PhpStorm के Less Compiler प्लगइन का उपयोग करेंगे। PhpStorm की सेटिंग्स में जाएँ: File → Settings.

• Plugins सेटिंग्स में जाएँ
• Plugins पेज खोलें
• सर्च बार में “LESS” टाइप करें
• “LESS CSS Compiler” प्लगइन ढूँढें
• “Install JetBrains plugin …” के माध्यम से इंस्टॉल करें

यदि आपको यह प्लगइन नहीं मिलता, तो इसे आधिकारिक पेज से डाउनलोड करें:

https://plugins.jetbrains.com/plugin/7059-less-css-compiler

और इसे “Install plugin from disk …” विकल्प से इंस्टॉल करें।

अब जब प्लगइन स्थापित हो गया है, तो हमें इसे कॉन्फ़िगर करना होगा। PhpStorm की सेटिंग्स में “LESS” खोजें:

प्लस (+) पर क्लिक करें और एक नया LESS प्रोफ़ाइल जोड़ें। हम इसे उदाहरण के लिए “Bootstrap” नाम दे सकते हैं। प्रत्येक PhpStorm प्रोजेक्ट के लिए अलग प्रोफ़ाइल बनानी होती है।

प्रोफ़ाइल सेटिंग्स में निम्नलिखित पैरामीटर्स दें:

LESS source directory - C:\OpenServer\domains\drupal8\themes\drupalbook\less
यह हमारे थीम के less फ़ोल्डर का पथ है, न कि bootstrap का।

Include files by path - C:\OpenServer\domains\drupal8\themes\drupalbook\less\style.less
हम केवल style.less फ़ाइल को जोड़ते हैं — यह हमारे सभी LESS फाइलों के कंपाइलिंग का एंट्री पॉइंट है।

CSS output directory - C:\OpenServer\domains\drupal8\themes\drupalbook\css
यह वह जगह है जहाँ कंपाइल की गई CSS फ़ाइलें सहेजी जाएँगी।

चूँकि हम केवल एक style.less फ़ाइल कंपाइल करते हैं, इसलिए एक style.css फ़ाइल ही बनेगी, जो सुविधाजनक है।

Compile automatically on save - यह सुविधा बहुत उपयोगी है; जब आप Ctrl + S दबाते हैं, तो CSS स्वचालित रूप से पुनः कंपाइल हो जाता है। इसे सक्षम रखें।

अब आप Ctrl + S दबाकर LESS फाइलों को कंपाइल कर सकते हैं। आप style.less फ़ाइल पर राइट-क्लिक करके “Compile to CSS” विकल्प भी चुन सकते हैं:

आमतौर पर कंपाइलिंग में 5-10 सेकंड लगते हैं:

यदि सब कुछ सही से कंपाइल हुआ, तो आप अपने नए स्टाइल्स देख पाएँगे:

Drupal एडमिन पैनल में जाकर जावास्क्रिप्ट और CSS एग्रीगेशन को अक्षम करना न भूलें:
/admin/config/development/performance

डिफ़ॉल्ट रूप से यह सक्षम रहता है।

अब आप पेज निर्माण शुरू कर सकते हैं — और साथ ही आपके पास पहले से एक इनबिल्ट हैमबर्गर मोबाइल मेनू और रेस्पॉन्सिव लेआउट होगा।

इसके लिए, मेनू ब्लॉक को Navigation (Collapsible) क्षेत्र में रखें।

आगामी ट्यूटोरियल्स में, हम Bootstrap पर आधारित अपनी थीम के लिए PSD लेआउट बनाएँगे।