استيراد تخطيط Bootstrap-5

هدف البرنامج التعليمي

ستتعلم كيفية استيراد تخطيط Bootstrap-5 كملف ZIP إلى نظام bluetronix CMS، والتحقق من الاستيراد ثم مراجعة صور التخطيط وHTML للتخطيط وCSS/JS بالإضافة إلى نماذج أقسام الصفحات التي تم إنشاؤها.

مهم: استخدم لتصدير تخطيط Bootstrap-5 الذي يلبي المتطلبات الموضحة أدناه. قد تستغرق عملية الاستيراد الفعلية ما يصل إلى 15 دقيقة.

1. استيراد - فتح التخطيط

افتح قسم التخطيط في نظام إدارة المحتوى واختر بعد ذلك استيراد - تخطيط.

2. اختيار ملف ZIP

في نافذة استيراد - تخطيط، انقر على اختيار ملف ZIP. من خلال هذه الوظيفة، يمكنك فتح مدير الملفات واختيار ملف ZIP للتخطيط الخاص بك.

بالإضافة إلى ذلك، تتوفر لك صور المواضيع التي يمكن استخدامها لاحقًا كبديل لصور التخطيط، إذا لم يكن هناك رغبة في إعادة استخدام الصور الأصلية.

3. فتح مجلد bx_Import

في مدير الملفات، افتح مجلد المطور bx_Import. يُستخدم هذا المجلد لتوفير ملف ZIP الذي سيتم استيراده.

4. تحميل Layout.zip

قم الآن بتحميل ملف ZIP الخاص بك إلى المجلد bx_Import. في مثالنا، يُسمى الملف Layout.zip. بعد ذلك، اختر هذا الملف لاستيراد التخطيط.

5. متطلبات تخطيط Bootstrap-5

يتحقق نظام إدارة المحتوى قبل الاستيراد مما إذا كان يمكن العثور على هيكل مناسب لـ Bootstrap-5 في أرشيف ZIP. يمكنك العثور على المتطلبات الكاملة ونوع الملفات المدعومة في نظرة تقنية يليها.

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. مراقبة خطوات الاستيراد

بعد تحديد ملف ZIP، يعرض نظام إدارة المحتوى أسفل صور المواضيع الخطوات الفردية التي سيتم تنفيذها أثناء الاستيراد. تحقق من هذه النظرة العامة قبل بدء الاستيراد.

يتضمن الاستيراد في النسخة المعروضة الخطوات التالية:

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. بدء الاستيراد

انقر على استيراد. يشير نظام إدارة المحتوى إلى أن الاستيراد قد يستغرق ما يصل إلى 15 دقيقة وأنه لا ينبغي غلق النافذة أثناء ذلك.

أكد على الرسالة باستخدام موافق. بعد ذلك، يبدأ استيراد التخطيط.

8. التحقق من استيراد النجاح

بعد الانتهاء من الاستيراد، تظهر أولًا رسالة تفيد بأن التخطيط قد تم استيراده بنجاح.

بعد ذلك، يمكنك التحقق مما إذا كانت جميع خطوات المعالجة الفردية قد اكتملت بنجاح. يتم تمييز الخطوات التي تمت بنجاح باللون الأخضر.

9. مراقبة التخطيط الجديد على الموقع الإلكتروني

اغلق نافذة الاستيراد وارجع إلى الصفحة الرئيسية لموقعك. بعد الاستيراد، قد تظهر التوضيحات السابقة.

إذا لزم الأمر، انقر على تحديث. بعد ذلك، يجب عرض التخطيط المستورد. قارن العرض مع التخطيط الأصلي الذي كنت ترغب في استيراده.

10. التحقق من الصور المستوردة

ثم افتح Layout → استيراد - الصور. هناك يمكنك التحقق من الصور التي تم أخذها من التخطيط المستورد أو التي تم استبدالها بصور المواضيع.

يعرض نظام إدارة المحتوى الصور التي تفتقر إلى معلومات الترخيص أو المصدر. تحقق من هذه الملاحظات بعناية وقرر ما إذا كانت الصور يمكن إعادة استخدامها أو يجب استبدالها بصور مواضيع مناسبة.

إذا كنت لا ترغب في استخدام الصور الأصلية المتاحة، يمكنك اختيار صور مواضيع مناسبة أو إنشاء صور مواضيع خاصة بك. بعد الاستبدال، ينبغي فحص التخطيط بصريًا مرة أخرى.

11. مراقبة HTML للتخطيط

افتح تحت Layout قسم Layout - HTML. هناك يمكنك التحقق من الهيكل الأساسي لصيغة HTML التي تم إنشاؤها من الاستيراد.

في قاعدة بيانات التخطيط، سترى الشيفرة HTML المستوردة. تحقق هنا بشكل خاص مما إذا كان الهيكل الأساسي موجودًا بالكامل وما إذا كانت علامات نظام إدارة المحتوى المطلوبة قد تم دمجها في التخطيط.

12. التحقق من ملفات CSS وJavaScript المستوردة

ثم افتح Layout → استيراد - CSS JS.

هنا ترى ملفات CSS وJavaScript والموارد الأخرى التي تم التعرف عليها أثناء الاستيراد. إذا كانت مورد ما موسومًا كـ مصادر خارجية، فلن يتم تحميله فقط محليًا من التخطيط المستورد. يجب عليك التحقق بعناية من هذه الروابط الخارجية ومعالجتها قبل النشر.

13. اختبار قابلية التحرير في المحرر

افتح الصفحة المستوردة في المحرر وتحقق مما إذا كانت المحتويات يمكن تعديلها كما هو متوقع. اختبر بشكل خاص النصوص والروابط والصور والمناطق القابلة للتكرار.

14. التحقق من نماذج أقسام الصفحات التي تم إنشاؤها

افتح في المحرر إدراج → قسم الصفحة. يقوم الاستيراد بإنشاء فئات قوالب إضافية من التخطيط الأصلي. تشمل ذلك ترويسة التخطيط ومحتوى التخطيط وتذييل التخطيط.

إذا اخترت على سبيل المثال محتوى التخطيط، سيتم عرض الأقسام الرئيسية التي تم استخراجها من التخطيط الأصلي كقوالب فردية. يمكنك بعدها إدراجها بحرية في الصفحات وتعديلها.

15. التحقق النهائي

بعد الاستيراد، يجب عليك التحقق من النتيجة بالكامل: عرض التخطيط والصور وHTML وCSS/JS والموارد الخارجية وقابلية التعديل والقوالب التي تم إنشاؤها لأقسام الصفحة. فقط بعد الانتهاء من هذه الفحوصات، يجب عليك البدء في التعديل الإضافي لمحتوى التخطيط المستورد.