Bootstrap-5-लेआउट आयात करें

ट्यूटोरियल का लक्ष्य

आप सीखेंगे कि किस प्रकार बूटस्ट्रैप-5 लेआउट को ज़िप फ़ाइल के रूप में bluetronix CMS में आयात करना है, आयात की जांच करना है और फिर लेआउट चित्र, लेआउट-HTML, CSS/JS और उत्पन्न पृष्ठ अनुभाग टेम्पलेट्स की भी जांच करनी है।

महत्वपूर्ण: आयात के लिए एक बूटस्ट्रैप-5 लेआउट का उपयोग करें, जो नीचे वर्णित आवश्यकताओं को पूरा करता हो। वास्तविक आयात में 15 मिनट तक का समय लग सकता है।

1. आयात - लेआउट खोलें

CMS में लेआउट क्षेत्र खोलें और इसके बाद आयात - लेआउट चुनें।

2. ज़िप फ़ाइल चुनें

खिड़की आयात - लेआउट में, आप ज़िप फ़ाइल चुनें पर क्लिक करें। इस कार्यक्षमता के जरिए आप फ़ाइल प्रबंधक खोल सकते हैं और अपने बूटस्ट्रैप-5 लेआउट की ज़िप फ़ाइल का चयन कर सकते हैं।

अतिरिक्त रूप से, आपके पास विषय चित्र उपलब्ध हैं, जिन्हें बाद में लेआउट चित्रों के विकल्प के रूप में उपयोग किया जा सकता है, यदि मूल चित्रों का आगे उपयोग नहीं करना हो।

3. फ़ोल्डर bx_Import खोलें

फ़ाइल प्रबंधक में, आप बाद में विकास फ़ोल्डर bx_Import खोलते हैं। यह फ़ोल्डर आयात की जाने वाली ज़िप फ़ाइल को उपलब्ध कराने के लिए उपयोग किया जाता है।

4. Layout.zip अपलोड करें

अब अपनी ज़िप फ़ाइल को फ़ोल्डर bx_Import में अपलोड करें। हमारे उदाहरण में फ़ाइल का नाम Layout.zip है। इसके बाद इस फ़ाइल को लेआउट आयात के लिए चुनें।

5. बूटस्ट्रैप-5 लेआउट के लिए आवश्यकताएँ

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

Detecting and Importing a Bootstrap Layout

When importing a layout, the system first checks whether it is a valid Bootstrap layout.

1. Detecting a Bootstrap Layout

For a layout to be recognized and imported as a Bootstrap layout, two requirements must be met:

1. A Bootstrap CSS file must be present.
2. An index.html or index.htm file must exist at the corresponding directory level.

The following files, for example, are recognized as Bootstrap files:

bootstrap.css
bootstrap.min.css
bootstrap-grid.css
bootstrap-grid.min.css
bootstrap-reboot.css
bootstrap-*.css

In general, the system searches for a file whose name matches the following pattern:

bootstrap***.css

The file must belong to Bootstrap version 5.

Example 1

/index.html
/assets/css/bootstrap.min.css

The layout is recognized. The index.html file is located at the root level, while the Bootstrap file is located in:

/assets/css/

Example 2

/index.html
/assets/css/bootstrap.css

This layout is also recognized.

Example 3

/index.html
/css/bootstrap.min.css

A Bootstrap file located in the /css/ directory is also recognized.

Important:
Once a matching index.html or index.htm file and a Bootstrap CSS file have been found, that directory level is used as the starting point of the layout. From this level onward, the required files are extracted from the ZIP archive and processed.

2. Which Files Are Imported?

During the import process, only supported file types are included.

HTML Files
.html
.htm

JavaScript and CSS Files
.js
.mjs
.css

Fonts
.woff
.woff2
.ttf
.otf
.eot

Images and Graphics
.svg
.jpg
.jpeg
.jpg
.webp
.avif
.gif
.ico

Video Files
.mp4
.webm

Audio Files
.mp3
.ogg
.wav

Data Files
.json

Documents
.pdf

All other file extensions are excluded from the layout import process.

6. आयात चरणों की जांच करें

एक बार जब आप ज़िप फ़ाइल चुन लेते हैं, तो CMS विषय चित्रों के नीचे आयात के दौरान किए जाने वाले प्रत्येक चरणों को प्रदर्शित करता है। आयात शुरू करने से पहले इस अवलोकन की जांच करें।

निर्यात निम्नलिखित चरणों को शामिल करता है:

1. Layout einlesen: ZIP-Datei entpacken und auf ein gültiges Bootstrap-5-Layout prüfen.
2. HTML-Grundgerüst extrahieren: Standard-Layout in der Datenbank 00_layout erstellen.
3. Kopfzeile / Fußzeile extrahieren: Header und Footer ermitteln und /bx_Header.html sowie /bx_Footer.html neu erstellen.
4. index.html aus Layout erstellen: Inhalt der Startseite ermitteln und /index.html neu erstellen.
5. Seiten-Abschnitte extrahieren: Header, Main-Sections und Footer als Layout-Section-Dateien erzeugen.
6. Bilder ersetzen: Layout-Bilder bei Bedarf durch CMS-Themenbilder ersetzen.
7. CSS / JS importieren: gefundene CSS- und JS-Dateien in den Main-Ordner übernehmen.

7. आयात प्रारंभ करें

आयात करें पर क्लिक करें। CMS यह संकेत देता है कि आयात में 15 मिनट तक का समय लग सकता है और इस दौरान विंडो बंद नहीं की जानी चाहिए।

ओके के साथ चेतावनी की पुष्टि करें। इसके बाद लेआउट का आयात शुरू होता है।

8. सफल आयात की जाँच करें

आयात के पूर्ण होने के बाद सबसे पहले एक संदेश दिखाई देता है कि लेआउट सफलतापूर्वक आयात किया गया है।

इसके बाद आप यह जांच सकते हैं कि सभी व्यक्तिगत प्रोसेसिंग चरण सफलतापूर्वक पूर्ण हुए हैं या नहीं। सफलतापूर्वक निष्पादित चरण हरे रंग में चिन्हित किए जाते हैं।

9. वेबसाइट पर नए लेआउट की जाँच करें

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

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

10. आयातित चित्रों की जाँच करें

इसके बाद लेआउट → आयात - चित्र खोलें। वहां आप यह जांच सकते हैं कि आयातित लेआउट से कौन से चित्र लिए गए हैं या विषय चित्रों से बदल दिए गए हैं।

CMS उन चित्रों को प्रदर्शित करता है, जिनकी लाइसेंस या स्रोत की जानकारी गायब है। इन संकेतों की सावधानी से जांच करें और निर्णय लें कि क्या चित्रों का पुनः उपयोग किया जा सकता है या उन्हें उपयुक्त विषय चित्रों से बदला जाना चाहिए।

यदि आप मौजूदा मूल चित्रों का उपयोग नहीं करना चाहते हैं, तो आप उपयुक्त विषय चित्र चुन सकते हैं या अपने स्वयं के विषय चित्र बना सकते हैं। स्थानांतरण के बाद लेआउट को फिर से दृश्य रूप से जांचा जाना चाहिए।

11. लेआउट-HTML की जाँच करें

लेआउट के तहत लेआउट - HTML खोलें। वहां आप आयात से उत्पन्न HTML की मूल ढांचे की जांच कर सकते हैं।

लेआउट डेटाबेस में आप आयातित HTML कोड देख सकते हैं। यहां खासतौर पर जांचें कि क्या मूल ढांचा पूरा मौजूद है और आवश्यक CMS टैग लेआउट में शामिल किए गए हैं।

12. आयातित CSS और JavaScript फ़ाइलों की जाँच करें

इसके बाद लेआउट → आयात - CSS JS खोलें।

यहां आप उन CSS, JavaScript और अन्य संसाधनों को देख सकते हैं, जिन्हें आयात के दौरान पहचाना गया था। यदि किसी संसाधन को बाहर के स्रोत के रूप में चिह्नित किया गया है, तो यह विशेष रूप से आयातित लेआउट से स्थानीय रूप से नहीं लोड की जाती है। ऐसे बाहरी लिंक की जांच आपको प्रकाशन से पहले विशेष रूप से करनी चाहिए और समुचित रूप से निपटना चाहिए।

13. संपादक में संपादन क्षमता का परीक्षण करें

आयातित पृष्ठ को संपादक में खोलें और जांचें कि क्या सामग्री को आवश्यकतानुसार संपादित किया जा सकता है। विशेष रूप से टेक्स्ट, लिंक, चित्र और पुनरावृत्त क्षेत्र का परीक्षण करें।

14. उत्पन्न पृष्ठ अनुभाग टेम्पलेट्स की जाँच करें

संपादक में डालें → पृष्ठ अनुभाग खोलें। आयात मूल लेआउट से अतिरिक्त टेम्पलेट श्रेणियाँ उत्पन्न करता है। इसमें लेआउट-हेडर, लेआउट-मेन और लेआउट-फूटर शामिल हैं।

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

15. समापन जांच

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