Drupal + Omega + बूटस्ट्रैप: लेआउट के बिना पूरी तरह से कस्टम थीम का तेज़ निर्माण (भाग 1. ओमेगा)

Drupal 7 आज इतना विकसित हो गया है कि यह आपको HTML- लेआउट का सहारा लिए बिना, किसी भी जटिलता की वेबसाइटों के लिए थीम बनाने की अनुमति देता है। इस तरह की थीम बनाने की प्रक्रिया एक कंस्ट्रक्टर का उपयोग करने की याद दिलाती है, जीवन के लिए एक लेआउट के स्केच को स्थानांतरित करने के सभी मुख्य कार्य केवल सीएसएस में आवश्यक शैलियों को स्थापित करने में होते हैं। इस मामले में, कोई अतिरिक्त प्रतिबंध नहीं हैं; आप किसी भी जटिलता, इसके अलावा, पूरी तरह से अनुकूलन के विषय बना सकते हैं; और जब तक आप स्वयं प्लेटफॉर्म (Drupal) या चयनित फ्रेमवर्क (बूटस्ट्रैप) की सीमाओं के पार नहीं आते।

Drupal के लिए 7 वर्षों से अधिक के लिए मेरा विकास अनुभव, Drupal 4.6 के साथ 2005 में शुरू हुआ, तब से मैं इसका उपयोग करता हूं और प्रशंसा करता हूं कि यह कैसे विकसित होता है और संस्करण से संस्करण तक बेहतर और सुविधाजनक होता है। इस लेख में मैं एक सब्ज़ा गुच्छा बनाने और उपयोग करने में अपना अनुभव साझा करूँगा। यह समझा जाता है कि आप Drupal से परिचित हैं, आप मॉड्यूल स्थापित करना और थीम बनाना जानते हैं, लेकिन किसी कारण से आप अपने विषयों को विकसित करने के लिए ओमेगा फ्रेमवर्क का उपयोग नहीं कर रहे हैं। लेख का पहला भाग ओमेगा पर आधारित एक उप-विषय को बनाने और कॉन्फ़िगर करने के तरीके पर एक सरल गाइड है। मुझे यह भी उम्मीद है कि इस लेख का विचार वैकल्पिक प्लेटफार्मों के उपयोगकर्ताओं के लिए दिलचस्प होगा, और इस मामले में ड्रुपल की शक्ति, सादगी और लचीलेपन को थोड़ा विज्ञापित करेगा।

यहां मुख्य और सहायक मॉड्यूल की एक सूची दी गई है जो आपको एक समान परिणाम प्राप्त करने की अनुमति देते हैं:

• ओमेगा Drupal 7 बेस थीम - Drupal 7 के लिए एक मूल विषय, अपनी खुद की थीम बनाने के लिए एक रूपरेखा;
• ओमेगा टूल - व्यवस्थापक पैनल के माध्यम से ओमेगा पर आधारित उप-विषयों के आसान निर्माण के लिए टूलकिट (मॉड्यूल);
• डेल्टा - इस सेट से हमें मानक डिज़ाइन घटकों को ब्लॉक के साथ बदलने के लिए डेल्टा ब्लॉक मॉड्यूल की आवश्यकता होती है;
• ब्लॉक क्लास सीएसएस कक्षाओं को उन ब्लॉकों में जोड़ने के लिए एक सरल मॉड्यूल है जिनकी हमें आवश्यकता है (बूटस्ट्रैप के लिए उपयोगी)।

आर्किटेक्चर

उन लोगों के लिए शुरू करने के लिए, जो सामान्य रूप से ड्रुपल थीम इंजन की वास्तुकला के बारे में सामान्य शब्दों के एक जोड़े से परिचित हैं।

1. वास्तव में इंजन
सबसे पहले, यह निर्धारित किया जाता है कि किस थीम इंजन का उपयोग किया जाएगा। पुराने समय से, Drupal एक इंजन के रूप में मानक PHP (PHPTemplate) का उपयोग कर रहा है, जिनमें से टेम्पलेट फॉर्म के PHP आवेषण के साथ साधारण HTML फाइलें हैं <?php print $title ?> । यह मुझे लगता है कि यह सुविधाजनक है, क्योंकि डिज़ाइन इंजन के अतिरिक्त सिंटैक्स को सीखने की कोई आवश्यकता नहीं है, और आप बिना किसी प्रतिबंध के किसी भी कोड को भी डाल सकते हैं। Drupal आपको किसी भी डिज़ाइन थीम इंजन का उपयोग करने की अनुमति देता है, उदाहरण के लिए Smarty, लेकिन कोई भी उन्हें लंबे समय तक फास्ट करने की जल्दी में नहीं है (उसी स्मार्टी के लिए Drupal 6 के लिए एक संस्करण है, और 7 के लिए कोई नहीं है - शायद किसी को भी इसकी आवश्यकता नहीं है)।

2. मूल विषय
एक डिज़ाइन थीम जो भविष्य की उप-शैलियों के लिए सभी मूल शैलियों, कार्यों और अधिक को परिभाषित करता है। आपका विषय किसी भी मूल विषय का उपयोग नहीं कर सकता है, खरोंच से लिखा जा सकता है, या अन्य विषयों के लिए खुद ही बुनियादी हो सकता है।

3. घटाव
बेस थीम से सभी कार्यों, शैलियों और अधिक को इनहेरिट करता है और उन्हें ओवरराइड कर सकता है। एक उप विषय को आधार के रूप में भी संकेत दिया जा सकता है, और इसी तरह विज्ञापन के आधार पर भी।

यह एक बहुत ही लचीली प्रणाली है जिसका उपयोग किया जा सकता है, उदाहरण के लिए, साइट के मुख्य विषय के मामूली संशोधनों के लिए (कहते हैं, इसे नए साल के लिए सजाने के लिए - एक उप-थीम बनाएं जो थोड़ी देर के लिए लटका हो, फिर इसे बंद कर दें, इसे एक साल बाद चालू करें, और इसी तरह)। खैर, यह वास्तुकला आपको ओमेगा या एडेप्टिवटेम जैसे फ्रेमवर्क बनाने, उपयोग करने और विस्तारित करने की भी अनुमति देता है।

ओमेगा के आधार पर उपप्रकार बनाना

आरंभ करने के लिए, मूल विषय और मॉड्यूल को डाउनलोड और इंस्टॉल करें, लेख की शुरुआत में संकेत दिया गया है। अगला, अनुभाग सूरत पर जाएं और यदि ओमेगा उपकरण मॉड्यूल सही ढंग से स्थापित है, तो हम पृष्ठ पर नया ओमेगा उपशीर्षक बनाएं (यदि मॉड्यूल स्थापित है, लेकिन यह लिंक नहीं है, तो कैश को साफ़ करने का प्रयास करें)। हम लिंक का अनुसरण करते हैं और नए विषय के लिए पैरामीटर सेट करते हैं:

• नाम , उदाहरण के लिए Omega Example Theme ;
• मशीन-पठनीय नाम , उदाहरण के लिए omega_example ;
• बॉक्स को स्वचालित रूप से स्थापित करें ;
• गंतव्य (गंतव्य) का चयन करें - जिस साइट की हमें ज़रूरत है या sites/all के कॉन्फ़िगरेशन के साथ एक निर्देशिका sites/all यदि हम चाहते हैं कि थीम एक मल्टीसाइट इंस्टॉलेशन में सभी साइटों तक पहुंच योग्य हो (वेब ​​सर्वर के पास इस निर्देशिका को अप्राप्य इंस्टॉलेशन करने के लिए अनुमतियाँ लिखना चाहिए);
• बेस थीम के रूप में , Omega चयन करें;
• स्टार्टरकिट (स्टार्टर किट) के रूप में, Omega HTML5 Starterkit स्टार्टरकिट चुनें।

चित्रा 1. ओमेगा उपकरण मॉड्यूल का उपयोग कर एक उप विषय बनाना

सहेजें और जारी रखें बटन पर क्लिक करें, विज़ार्ड के 2 सरल चरणों का पालन होगा, जहां आप थीम के लिए अतिरिक्त पैरामीटर सेट कर सकते हैं, स्थापना के तुरंत बाद इसे सक्षम करें, या .info फ़ाइल को संपादित करें। यदि सब कुछ सही ढंग से किया गया है और निर्माण प्रक्रिया के दौरान कोई त्रुटि नहीं हुई है, तो हमारा विषय तैयार है! अब हम इसे विषयों की सूची में खोज सकते हैं और इसे डिफ़ॉल्ट रूप से सेट कर सकते हैं।

फिर मस्ती शुरू होती है।

लेआउट अनुकूलन

हम अपने विषय के सेटिंग लिंक का अनुसरण करते हैं और कई टैब देखते हैं जिसमें ओमेगा फ्रेमवर्क हमें हमारे लेआउट (लेआउट कॉन्फ़िगरेशन) की ठीक-ठीक ट्यूनिंग प्रदान करता है।

1. ग्रिड सेटिंग्स

यहां आप ग्रिड प्रकारों में से एक का चयन कर सकते हैं: डिफ़ॉल्ट (960px) - मानक, मुख्य स्क्रीन रिज़ॉल्यूशन (800, 1024, 1280), या फ़्लूइड के लिए चौड़ाई में तय की गई - स्क्रीन की पूरी चौड़ाई में फैला हुआ। बूटस्ट्रैप जैसे चौखटे के उपयोगकर्ता दोनों के बीच अंतर को जानते हैं। इसके अलावा इस टैब पर आप आवश्यक चौड़ाई में @media को ठीक कर सकते हैं। वैसे, इस टैब की अधिकांश परियोजनाओं के लिए, आप डिफ़ॉल्ट रूप से सब कुछ छोड़ सकते हैं।

निम्नलिखित सीएसएस @media माध्यम से विषय से @media :

• Global.css - मुख्य शैली की फ़ाइल, मोबाइल सहित सभी स्क्रीन पर वैश्विक रूप से जुड़ी हुई, मोबाइल-पहले की अवधारणा को लागू करना;
• ओमेगा-उदाहरण-अल्फा- default.css - ग्रिड के साथ उपयोग के लिए मुख्य स्टाइलशीट
• ओमेगा-उदाहरण-अल्फा-डिफॉल्ट-संकरा। स्क्रीन - लगभग 800 पिक्सल की चौड़ाई के साथ स्क्रीन के लिए फ़ाइल
• ओमेगा-उदाहरण-अल्फा-डिफॉल्ट-normal.css - लगभग 1024 पिक्सल की चौड़ाई के साथ स्क्रीन के लिए फ़ाइल और संस्करण 9 तक सभी IE
• ओमेगा-उदाहरण-अल्फा-डिफ़ॉल्ट-wide.css - 1200 पिक्सेल से अधिक चौड़ी स्क्रीन के लिए फ़ाइल

2. क्षेत्र और क्षेत्र विन्यास

साइट लेआउट स्थापित करने पर सभी मुख्य कार्य इस टैब में होंगे। वास्तव में, यह ओमेगा ढांचे का मुख्य हिस्सा है - Drupal ब्लॉकों को रखने के लिए Drupal क्षेत्र का स्थान सेट करना। पेज के कोड को संपादित करके नहीं। page.tpl.php टेम्पलेट, लेकिन सीधे विषय सेटिंग्स में। दरअसल, ओमेगा का उपयोग करते समय, ग्लोबल टेम्प्लेट जैसे html.tpl.php या page.tpl.php , और अन्य को फिर से परिभाषित करने या फिर से देखने की आवश्यकता नहीं होती है। यह लेख की शुरुआत में इंगित की गई कार्यक्षमता है, जो HTML लेआउट लेआउट को समाप्त करता है। आप उदाहरण के लिए, सीधे CSS और कोड को आउटपुट टेम्पलेट्स पर ध्यान केंद्रित कर सकते हैं, node.tpl.php आपको जरूरत है। और बाएं / दाएं कॉलम की चौड़ाई या व्यवस्था, पाद में पृष्ठ या ब्लॉक की मुख्य सामग्री अब कुछ क्लिकों में कॉन्फ़िगर की गई है।

अब कुछ शब्दों का उपयोग कैसे करें। पहली नज़र में, सब कुछ थोड़ा भ्रमित लगता है, लेकिन एक बार समझ में आ गया, तो सब कुछ सरल हो जाता है। ओमेगा ड्रुपल में क्षेत्र के मानक सार के अलावा परिचय दो और: खंड और क्षेत्र। अनुभाग जोन को एकजुट करते हैं, और जो क्षेत्र पहले से ही हमारे परिचित हैं, वे क्षेत्र हैं। कुल तीन खंड हैं: शीर्षलेख (शीर्ष लेख), सामग्री (सामग्री) और पाद लेख (पाद लेख), आप उन्हें पुनर्परिभाषित नहीं कर सकते (हालांकि इसके लिए कोई आवश्यकता नहीं है, क्योंकि ये अमूर्त निकाय हैं)। इन अनुभागों के अंदर आप अपनी पसंद के अनुसार क्षेत्रों के साथ क्षेत्र रख सकते हैं।

प्रत्येक ज़ोन में सेटिंग्स होती हैं, जिनमें से मुख्य हैं: सेक्शन (यह सेक्शन जो इस ज़ोन का है), वज़न (सेक्शन में ज़ोन का क्रम निर्धारित करता है), कॉलम काउंट (प्रत्येक सेक्शन के लिए कॉलम की संख्या निर्धारित की जा सकती है, 12, 16 चयन के लिए प्रस्तुत की गई है) और 24), प्राथमिक क्षेत्र (मुख्य क्षेत्र)। प्रत्येक ज़ोन की चौड़ाई पृष्ठ की चौड़ाई से मेल खाती है। यदि मुख्य क्षेत्र निर्दिष्ट किया गया है, तो ज़ोन के भीतर सभी क्षेत्रों के कुल कॉलमों की संख्या ज़ोन के स्तंभों की संख्या से अधिक नहीं होनी चाहिए, और फिर यदि एक या अधिक क्षेत्र खाली हैं, तो मुख्य एक द्वारा निर्दिष्ट क्षेत्र शेष चौड़ाई तक फैला हुआ है। उदाहरण के लिए, यदि साइडबार फर्स्ट (लेफ्ट कॉलम) और साइडबार सेकंड (राइट कॉलम) क्षेत्रों में मुख्य पृष्ठ पर कोई ब्लॉक नहीं हैं, तो कंटेंट क्षेत्र 12 कॉलम चौड़ा है। और यदि ब्लॉक बाएं कॉलम में आंतरिक पृष्ठों पर दिखाई देते हैं, तो सामग्री वाला क्षेत्र चौड़ाई में 9 स्तंभों पर कब्जा कर लेगा। खैर, यदि ब्लॉक दोनों कॉलम में मौजूद हैं, तो सामग्री की चौड़ाई निर्दिष्ट कॉलम की संख्या के बराबर होगी - 6. यह तब होगा जब क्षेत्र मुख्य क्षेत्र पर सेट किया गया हो, और यदि नहीं, तो किसी भी चौड़ाई के सभी क्षेत्रों में से कोई भी संख्या हो सकती है, सभी क्षेत्र एक दी गई चौड़ाई होगी, खाली क्षेत्र (बिना ब्लॉक या छिपे हुए ब्लॉक के साथ) प्रदर्शित नहीं किए जाएंगे।

इसके अलावा, ज़ोन से संबंधित क्षेत्रों को सूचीबद्ध करता है, जिन क्षेत्रों में स्वयं समान सेटिंग्स हैं: ज़ोन (पैरेंट ज़ोन), प्रीफ़िक्स (ऑफ़सेट के लिए कॉलम की संख्या, बूटस्ट्रैप में ऑफ़सेट के समान * बूट्स), चौड़ाई (चौड़ाई, कॉलम की संख्या), Suix (इंडेंटेशन के लिए कॉलम की संख्या) क्षेत्र के बाद), वजन।

इन सभी मापदंडों को बदलकर, आप लेआउट के ब्लॉकों को बिल्कुल उसी तरह समायोजित कर सकते हैं जैसे आप चाहते हैं। Drupal के लिए मानक तरीके से क्षेत्रों को पुनर्परिभाषित किया जा सकता है - .info विषय विवरण फ़ाइल में, ज़ोन को भी पुनर्परिभाषित किया जा सकता है, उनमें से कोई भी संख्या हो सकती है।

इसके अतिरिक्त, संदर्भ मॉड्यूल (हम इस लेख में इस पर विचार नहीं करेंगे) का उपयोग करके, आप साइट के विभिन्न पृष्ठों के लिए सभी क्षेत्रों के स्थान को पूरी तरह से फिर से परिभाषित कर सकते हैं, साथ ही अन्य थीम सेटिंग्स भी लागू कर सकते हैं। उदाहरण: एक बड़ी साइट, साइट या अनुभागों के मुख्य और आंतरिक पृष्ठों पर ब्लॉक की अलग व्यवस्था, साथ ही एक ऑनलाइन नक्शे के साथ एक संदर्भ पृष्ठ जो एक द्रव लेआउट का उपयोग करता है।

3. डिबगिंग (डिबगिंग)

बस एक दिलचस्प बान जो काम में मदद करता है: यह 2 बटन जोड़ता है जो आपको ओवरले ग्रिड और सहायक ब्लॉकों को सक्षम करने के लिए अनुमति देता है (डिफ़ॉल्ट रूप से - अक्षम)। चित्र 2 (नीचे) दिखाता है कि लेआउट ब्लॉक और ग्रिड के साथ कैसा दिखता है। सेटिंग्स में, मैं डिफ़ॉल्ट रूप से इन चीजों के प्रदर्शन को बंद कर देता हूं, और मैं केवल व्यवस्थापक के लिए बटन दिखाई देता हूं।

4. पुस्तकालयों को टॉगल करें (पुस्तकालयों को सक्षम / अक्षम करें)

इस टैब पर, आप आवश्यक / अनावश्यक पुस्तकालयों को सक्षम या अक्षम कर सकते हैं। एक पुस्तकालय ओमेगा ढांचे का सार है और लाइब्रेरीज़ एपीआई से संबंधित नहीं है। लाइब्रेरी को .info फ़ाइल में परिभाषित किया गया है और इसमें JS और CSS फाइलें शामिल हो सकती हैं। भविष्य में, हम उन्हें बूटस्ट्रैप कनेक्ट करने के लिए उपयोग करेंगे।

5. स्टाइल टॉगल करें (शैलियों को सक्षम / अक्षम करें)

पिछले टैब के समान, इस पर हम CSS फाइलों को सक्षम या अक्षम कर सकते हैं जो ओमेगा का उपयोग करता है, साथ ही साथ मानक Drupal स्टाइल भी। यह बहुत सुविधाजनक है जब हम किसी भी मॉड्यूल की शैलियों को हमारे साथ हस्तक्षेप नहीं करना चाहते हैं।

6. उन्नत तत्वों को टॉगल करें (अतिरिक्त तत्वों को सक्षम / अक्षम करें)

खैर, अंतिम टैब पर, हम सभी मानक Drupal तत्वों को बंद कर देते हैं जिन्हें हम विषय की सामान्य सेटिंग्स में बंद नहीं कर सकते हैं: संदेश, टैब, ब्रेडक्रंब, पृष्ठ शीर्षक, आरएसएस आइकन। हम उन सभी विषयों के लिए सामान्य में सेटिंग्स में शेष तत्वों को बंद कर देते हैं, जो टैब के नीचे हैं और प्रत्येक विषय में एक लोगो, साइट का नाम, नारा, मुख्य और अतिरिक्त मेनू हैं।

परिणाम

नतीजतन, हमें एक प्राचीन स्वच्छ लेआउट मिला, जिसे हम मुख्य पृष्ठ पर जाकर देखेंगे।

चित्र 2. विकलांग ब्लॉक और सक्षम ग्रिड और डीबग ब्लॉक के साथ मुख्य पृष्ठ

मानक तत्वों को पृष्ठ पर वापस करने के लिए (लोगो, पृष्ठ शीर्षक, मेनू, संदेश, टैब, आदि), हम डेल्टा ब्लॉक मॉड्यूल का उपयोग करेंगे: इसकी सेटिंग्स में, उन घटकों को चालू करें जिनकी हमें ज़रूरत है, और उन्हें मानक ब्लॉक के रूप में कहीं भी पृष्ठ पर रखें। । यह हमें page.tpl.php टेम्प्लेट को संपादित करने से भी बचाता है, और हमें मक्खी पर आवश्यक तत्वों को रखने, सक्षम करने और अक्षम करने की अनुमति देता है।

हमने मुख्य टेम्पलेटों की फ़ाइलों के लिए कोड को संपादित किए बिना, और यहां तक ​​कि FTP / SSH के माध्यम से सर्वर से कनेक्ट किए बिना अपना स्वयं का पूरी तरह से अनुकूलन विषय बनाया। लेकिन अब हम बूटस्ट्रैप की शक्ति को अपने विषय में जोड़ना चाहते हैं। इसे कैसे प्राप्त किया जाए इस पर लेख के दूसरे भाग में चर्चा की जाएगी।

दूसरा भाग, हम Bootsrap को कनेक्ट करते हैं