6.1.1 - Zen Drupal 8 के आधार पर थीम बनाना

Zen Drupal के लिए सबसे लोकप्रिय बिल्डर थीम है। यदि आपको तीन कॉलम लेआउट वाले साइट के लिए एक responsive डिज़ाइन जल्दी तैयार करना है, तो Zen आपके लिए बिल्कुल उपयुक्त है। आपको बस इसे इंस्टॉल करना होता है और npm install चलाना होता है — Zen स्वतः ही आपके डिज़ाइन के लिए आवश्यक आधार संरचना तैयार कर देता है। चलिए इसे चरणबद्ध तरीके से देखते हैं।

सबसे पहले Zen पैरेंट थीम को आधिकारिक वेबसाइट से डाउनलोड करें:

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

Drupal 8 से हम थीम्स को सीधे /themes फ़ोल्डर में रख सकते हैं, इसलिए हम Zen थीम को उसी फ़ोल्डर में रखते हैं।

/themes/zen/STARTERKIT फ़ोल्डर के अंदर एक सबथीम का टेम्पलेट होता है जिससे आप मैन्युअली अपनी थीम बना सकते हैं। इसके लिए आपको हर जगह STARTERKIT को अपनी थीम के नाम से बदलना होगा और अपनी नई सबथीम को /themes/zen फ़ोल्डर से बाहर निकालना होगा ताकि Zen थीम के अपडेट होने पर आपकी थीम खो न जाए। लेकिन मैं दृढ़ता से सुझाव देता हूँ कि आप Drush या किसी थीम जनरेटर का उपयोग करें।

Zen थीम के लिए हमें एक अतिरिक्त मॉड्यूल भी स्थापित करना होगा — Components Libraries मॉड्यूल:

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

अब हम Zen थीम को सक्षम करेंगे, लेकिन इसे डिफ़ॉल्ट थीम के रूप में इंस्टॉल नहीं करेंगे — हम अपनी सबथीम को बाद में डिफ़ॉल्ट सेट करेंगे। इसके लिए Drush कमांड चलाएँ:

drush zen drupalbook

Drush हमारे लिए drupalbook नाम की सबथीम बना देगा। आप “drupalbook” की जगह अपनी थीम का कोई भी नाम दे सकते हैं। अब हम अपनी नई सबथीम को सक्षम करके उसे डिफ़ॉल्ट थीम बना सकते हैं।

थीम अब काम करेगी, लेकिन आपको Gulp tasks सक्रिय करने होंगे। इसके लिए पहले Node.js इंस्टॉल करना आवश्यक है:

https://nodejs.org/en/download/

Node.js Windows, Mac OS, Ubuntu और अन्य ऑपरेटिंग सिस्टम्स पर इंस्टॉल किया जा सकता है।

Node.js स्थापित करने के बाद, आपको Node.js का पैकेज मैनेजर npm भी कॉन्फ़िगर करना होगा:

https://docs.npmjs.com/getting-started/installing-node

अब PhpStorm कंसोल में जाएँ और अपनी थीम के फ़ोल्डर में स्विच करें:

cd themes/drupalbook

और Zen थीम की सभी निर्भरताएँ (dependencies) एक साथ इंस्टॉल करने के लिए यह कमांड चलाएँ:

npm install

अब PhpStorm में gulpfile.js फ़ाइल पर राइट-क्लिक करें और “Show Gulp Tasks” विकल्प चुनें:

प्रारंभिक रूप से, सभी स्टाइल्स कम्पाइल होकर /themes/drupalbook/components/asset-builds/css फ़ोल्डर में होते हैं। नए स्टाइल लिखने के लिए, आपको उन्हें .scss फ़ाइल में लिखना होगा, और Gulp उन्हें स्वतः ही दोबारा कम्पाइल कर देगा। इसके लिए watch:css टास्क चलाएँ। अब जब भी आप SASS फ़ाइलों में बदलाव करेंगे, Zen स्वचालित रूप से CSS फ़ाइलें जनरेट करेगा (या PhpStorm में Ctrl + S दबाकर भी यह प्रक्रिया सक्रिय की जा सकती है)।

JavaScript फ़ाइलों को संपादित करने के लिए आप अपनी थीम में मौजूद /themes/drupalbook/js/script.js फ़ाइल का उपयोग कर सकते हैं।

अब आपकी Drupal 8 के लिए Zen आधारित सबथीम पूरी तरह से तैयार है और आगे के विकास के लिए उपयोग में लाई जा सकती है:

नोट: Node.js इंस्टॉल करते समय Gulp से संबंधित त्रुटियाँ (errors) आ सकती हैं। यदि आप Zen को सफलतापूर्वक कॉन्फ़िगर कर पाए हैं, तो कृपया टिप्पणियों में साझा करें।