bluetronix CMS में अपनी JavaScript और CSS फ़ाइलें शामिल करें

आवश्यकताएँ और लक्ष्य

इस ट्यूटोरियल के लिए आपको bluetronix CMS के लिए डेवलपर एक्सेस की आवश्यकता है और आपको लेआउट और डेवलपर फ़ोल्डर्स की संरचना का ज्ञान होना चाहिए। आप मौजूदा CMS फ़ाइलों के साथ-साथ अपनी JavaScript और CSS फ़ाइलों को जोड़ना सीखेंगे, बिना मूल प्रणाली फ़ाइलों में बदलाव किए।

हम स्क्रीनशॉट में दिखाए गए फ़ाइलों BxHeadScript_own.js और BxStyle_own.css का उपयोग करेंगे। दोनों फ़ाइलें स्पष्ट रूप से लेआउट में जोड़ी जाती हैं ताकि CMS उन्हें वेबसाइट लोड करते समय ध्यान में रखे।

1. लेआउट खोलें

CMS में लेआउट क्षेत्र खोलें और लेआउट - HTML चुनें। उसके बाद उस लेआउट को खोलें जिसमें आप अपनी JavaScript और CSS फ़ाइलें जोड़ना चाहते हैं। इस उदाहरण में, हम मानक लेआउट का उपयोग कर रहे हैं।

लेआउट परिभाषा में पहले से ही केंद्रीय CMS फ़ाइलों के लिए जोड़ियां मिलेंगी, जैसे कि BxHeadScript.js और BxStyle.css। आप अपनी अतिरिक्त फ़ाइलों को सीधे उनके बगल में जोड़ सकते हैं।

2. फ़ाइल मैनेजर में अपनी JavaScript फ़ाइल बनाएं

फ़ाइल प्रबंधक खोलें और लाल रंग में चिह्नित प्रणाली फ़ोल्डर bx_script में जाएं। वहां आप bluetronix CMS की केंद्रीय JavaScript फ़ाइलें और संभवतः भाषा-आधारित विकल्प पाएंगे।

वहाँ अपनी फ़ाइल BxHeadScript_own.js बनाएँ या चयन करें, यदि यह पहले से मौजूद है। आप इसके लिए एक उपयुक्त मौजूदा फ़ाइल को टेम्पलेट के रूप में कॉपी कर सकते हैं।

संपादित करें चुनें ताकि आप अपनी फ़ाइल में JavaScript कोड को पाठ संपादक में खोल सकें।

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

अपनी विस्तार के लिए मूल BxHeadScript.js को न बदलें। bx_ प्रणाली फ़ोल्डर्स के भीतर फ़ाइलें CMS अपडेट के दौरान ओवरराइट की जा सकती हैं। अपनी फ़ाइलों को वहां _own के साथ चिह्नित करें।

3. लेआउट में अपनी JavaScript फ़ाइल शामिल करें

फिर से लेआउट - HTML पर जाएं। अपनी JavaScript फ़ाइल को मौजूदा CMS फ़ाइल के अलावा जोड़ें। यदि आपका स्क्रिप्ट पहले लोड होना चाहिए, तो इसे स्क्रीनशॉट के अनुसार head क्षेत्र में मौजूदा Head-Script के बाद जोड़ें।

<script src="__FV_/bx_script/BxHeadScript_own_min.js__"></script>
<script src="__FV_/bx_script/BxHeadScript_own.js__"></script>

अतिरिक्त पंक्ति आपके अपने JavaScript कोड को लोड करती है। मूल BxHeadScript.js अपरिवर्तित रहता है। अपनी फ़ाइल का पथ और वर्तनी फ़ाइल प्रबंधक में फ़ाइल से मेल खानी चाहिए।

4. फ़ाइल मैनेजर में अपनी CSS फ़ाइल बनाएं

फ़ाइल प्रबंधक में प्रणाली फ़ोल्डर bx_style खोलें। यहां केंद्रीय स्टाइलशीट BxStyle.css शामिल है। अपने अनुकूलनों के लिए हम एक अलग फ़ाइल का उपयोग करेंगे जिसका नाम BxStyle_own.css है।

फ़ाइल BxStyle_own.css बनाएं या मौजूदा अपनी फ़ाइल खोलें। इस दौरान प्रणाली फ़ाइल BxStyle.css सुरक्षित रहेगी।

आप संपादित करें के माध्यम से इस फ़ाइल में अपनी CSS नियम लिख सकते हैं और सहेज सकते हैं।

5. लेआउट में अपनी CSS फ़ाइल शामिल करें

फिर से लेआउट - HTML खोलें। head क्षेत्र में मौजूदा स्टाइलशीट के बाद अपनी CSS फ़ाइल जोड़ें। क्रम महत्वपूर्ण है, जब आपकी अपनी नियमों को मानक स्वरूपण को ओवरराइट करना हो।

<link rel="stylesheet" href="__FV_/bx_style/BxStyle_own_min.css__">
<link rel="stylesheet" href="__FV_/bx_style/BxStyle_own.css__">

मानक CSS फ़ाइल वैसी की वैसी रहेगी, जबकि आप अतिरिक्त या भिन्न स्वरूपण को अलग BxStyle_own.css में प्रबंधित करेंगे।

6. हेड में या पृष्ठ के अंत में JavaScript का उपयोग करें

JavaScript फ़ाइलें उनके कार्य के आधार पर head क्षेत्र में या पृष्ठ के अंत में बंद करने वाले body टैग से पहले जोड़ी जा सकती हैं। दिखाए गए BxHeadScript_own.js को Head में लोड किया जाता है। अन्य स्क्रिप्ट के लिए आप एक अपनी परियोजना फ़ोल्डर का भी उपयोग कर सकते हैं और बाद में इसे लेआउट में जोड़ सकते हैं।

पृष्ठ के अंत में एक अपने फ़ोल्डर से अतिरिक्त फ़ाइल का उदाहरण:

<script src="__FV_/bx_script/BxScript_own_min.js__"></script>
<script src="__FV_/script/MyScript.js__"></script>

यह उदाहरण एक अतिरिक्त फ़ाइल को दर्शाता है। यदि आप इसके बजाय एक प्रणाली फ़ाइल को अपनी संस्करण से बदलना चाहते हैं, तो आपको चयनित लेआउट में उचित जोड़ियों को जानबूझकर समायोजित करना होगा और यह सुनिश्चित करना होगा कि कोई आवश्यक CMS फ़ंक्शन छूट न जाए।

7. प्रणाली फ़ोल्डर और अपने परियोजना फ़ोल्डर में अंतर करें

लाल रंग में चिह्नित bx_ फ़ोल्डर bluetronix CMS के अंतर्गत आते हैं। इन फ़ोल्डरों के भीतर अपनी फ़ाइलों को _own के साथ चिह्नित किया जाना चाहिए, ताकि उन्हें नियमित CMS अपडेट के दौरान प्रणाली फ़ाइलों के रूप में न माना जाए।

आप अपनी JavaScript और CSS फ़ाइलों को वैकल्पिक रूप से बिना bx_ उपसर्ग के आत्म-निर्मित परियोजना फ़ोल्डरों में रख सकते हैं, जैसे कि /script/ या /my_scripts/। वहाँ _own का चिह्नन अनिवार्य नहीं है। वास्तविक पथ का उपयोग आपको फिर अपनी लेआउट परिभाषा में करना होगा।

चिह्नन _own लेआउट में जोड़ को प्रतिस्थापित नहीं करता है: एक अलग से बनाई गई फ़ाइल तब ही लोड होती है जब इसे उचित script या link पंक्ति के माध्यम से जोड़ा जाता है।

8. स्वचालित फ़ाइल संस्करणन

दिखाए गए लेआउट इंटरफेस में, bluetronix CMS __FV_…__ का चिह्नन उपयोग करता है। इसके माध्यम से CMS एक संस्करण पैरामीटर को संशोधन तिथि के आधार पर पूरा कर सकता है। परिवर्तन के बाद, ब्राउज़र इस प्रकार वर्तमान JavaScript या CSS फ़ाइल को लोड करता है, बजाय इसके कि एक पुरानी कैश संस्करण का उपयोग किया जाए।

उदाहरण: एक मौलिक पथ जैसे /script/MyScript.js को प्रक्रिया के बाद एक संस्करण पैरामीटर के साथ जोड़ा जा सकता है। आपको आवश्यक रूप से जुड़े फ़ाइलों में हर लेआउट में संस्करण संख्या को स्वयं अपडेट करने की आवश्यकता नहीं है।

9. परिवर्तन सहेजें और जांचें

सबसे पहले अपनी स्वयं की JavaScript और CSS फ़ाइलें सहेजें और फिर संशोधित लेआउट को। अपनी वेबसाइट को फिर से लोड करें और जांचें कि आपकी JavaScript फ़ंक्शन लागू हो रही हैं और आपकी CSS नियम लागू हो रहे हैं।

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

सारांश

स्वयं के एक्सटेंशन के लिए, आप उदाहरण के लिए BxHeadScript_own.js फ़ोल्डर bx_script में और BxStyle_own.css फ़ोल्डर bx_style में बनाएँगे। उसके बाद, आप इन दोनों फ़ाइलों को Layout - HTML में मूल CMS फ़ाइलों के साथ जोड़ते हैं। इस तरह, मानक फ़ाइलें अपरिवर्तित रहती हैं, जबकि आप परियोजना-विशिष्ट JavaScript और CSS कोड को अलग से प्रबंधित करते हैं।