وارد کردن چیدمان Bootstrap-5

هدف این آموزش

شما یاد می‌گیرید که چگونه یک طرح Bootstrap-5 را به صورت فایل ZIP در CMS بلوترانیکس وارد کرده، واردات را بررسی کرده و سپس تصاویر طرح، HTML طرح، CSS/JS و همچنین الگوهای بخش‌های صفحات ایجاد شده را کنترل کنید.

مهم: برای واردات از یک طرح Bootstrap-5 استفاده کنید که شرایط زیر را داشته باشد. خود فرآیند واردات ممکن است تا ۱۵ دقیقه طول بکشد.

1. وارد کردن - باز کردن چیدمان

در CMS بخش طرح را باز کنید و سپس واردات - طرح را انتخاب کنید.

2. انتخاب فایل ZIP

در پنجره واردات - طرح بر روی انتخاب فایل ZIP کلیک کنید. از این قابلیت می‌توانید مدیر فایل را باز کرده و فایل ZIP طرح Bootstrap-5 خود را انتخاب کنید.

علاوه بر این، تصاویر موضوعی در دسترس هستند که می‌توانند بعداً به عنوان جایگزین برای تصاویر طرح استفاده شوند، اگر بخواهید تصاویر اصلی را دوباره استفاده نکنید.

3. باز کردن پوشه bx_Import

در مدیر فایل، سپس پوشه توسعه‌دهنده bx_Import را باز کنید. این پوشه برای تهیه فایل ZIP که باید وارد شود، استفاده می‌شود.

4. بارگذاری Layout.zip

اکنون فایل ZIP خود را به پوشه bx_Import بارگذاری کنید. در مثال ما، نام فایل Layout.zip است. سپس این فایل را برای واردات طرح انتخاب کنید.

5. پیش‌نیازهای چیدمان Bootstrap-5

CMS قبل از واردات بررسی می‌کند که آیا در آرشیو ZIP ساختار مناسب Bootstrap-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. کنترل مراحل وارد کردن

پس از انتخاب فایل ZIP، 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 به شما یادآوری می‌کند که واردات ممکن است تا ۱۵ دقیقه طول بکشد و در این مدت پنجره نباید بسته شود.

با تایید یادآوری را تأیید کنید. سپس واردات طرح آغاز می‌شود.

8. بررسی وارد کردن موفق

پس از اتمام واردات، ابتدا پیامی ظاهر می‌شود که نشان می‌دهد طرح با موفقیت وارد شده است.

سپس می‌توانید کنترل کنید که آیا همه مراحل پردازش به طور موفقیت‌آمیز به پایان رسیده‌اند یا خیر. مراحل انجام شده با رنگ سبز مشخص می‌شوند.

9. کنترل چیدمان جدید در وب‌سایت

پنجره واردات را ببندید و به صفحه اصلی وب‌سایت خود بازگردید. بلافاصله پس از واردات ممکن است ابتدا تصویر قبلی دیده شود.

اگر نیاز بود، بر روی بارگذاری مجدد کلیک کنید. سپس باید طرح وارد شده نمایش داده شود. نمایش را با طرح اصلی که می‌خواستید وارد کنید مقایسه کنید.

10. بررسی تصاویر وارد شده

سپس به طرح → واردات - تصاویر بروید. در آنجا می‌توانید بررسی کنید که کدام تصاویر از طرح وارد شده گرفته شده‌اند یا با تصاویر موضوعی جایگزین شده‌اند.

CMS تصاویری را نمایش می‌دهد که اطلاعاتی در مورد حق امتیاز یا منبع آن‌ها موجود نیست. این هشدارها را به دقت بررسی کرده و تصمیم بگیرید که آیا تصاویر باید دوباره استفاده شوند یا با تصاویر موضوعی مناسب جایگزین شوند.

اگر نمی‌خواهید از تصاویر اصلی موجود استفاده کنید، می‌توانید تصاویر موضوعی مناسب را انتخاب کنید یا تصاویر جدید بسازید. پس از جایگزینی، باید طرح دوباره به صورت بصری کنترل شود.

11. کنترل HTML چیدمان

زیر طرح به بخش طرح - HTML بروید. در آنجا می‌توانید HTML پایه‌ای که از واردات ایجاد شده را بررسی کنید.

در پایگاه داده طرح، کد HTML وارد شده را می‌بینید. در اینجا به ویژه بررسی کنید که آیا ساختار پایه به طور کامل موجود است و نشانه‌های لازم CMS در طرح گنجانده شده‌اند.

12. بررسی فایل‌های CSS و JavaScript وارد شده

سپس چیدمان → واردات - CSS JS را باز کنید.

در اینجا CSS، JavaScript و دیگر منابعی که هنگام واردات شناسایی شده‌اند را مشاهده می‌کنید. اگر یک منبع به عنوان منابع خارجی علامت‌گذاری شده باشد، به‌طور انحصاری از چیدمان وارد شده بارگذاری نمی‌شود. شما باید این لینک‌های خارجی را قبل از انتشار به دقت بررسی کنید و به‌طور مناسب با آن‌ها برخورد کنید.

13. تست قابلیت ویرایش در ویرایشگر

صفحه وارد شده را در ویرایشگر باز کنید و بررسی کنید که آیا محتواها به صورت مورد نظر قابل ویرایش هستند یا خیر. به‌ویژه متن‌ها، لینک‌ها، تصاویر و بخش‌های تکرارپذیر را تست کنید.

14. بررسی الگوهای بخش‌های صفحات ایجاد شده

در ویرایشگر درج → بخش صفحه را باز کنید. واردات دسته‌بندی‌های قالب اضافی را از چیدمان اصلی ایجاد می‌کند. این موارد شامل سرصفحه چیدمان، محتوای اصلی چیدمان و پاورقی چیدمان می‌شود.

به عنوان مثال، اگر محتوای اصلی چیدمان را انتخاب کنید، بخش‌های اصلی استخراج شده از چیدمان اصلی به عنوان الگوهای جداگانه نمایش داده می‌شوند. شما سپس می‌توانید آن‌ها را به راحتی در صفحات درج کرده و ویرایش کنید.

15. کنترل نهایی

پس از واردات، باید نتیجه را به‌طور کامل بررسی کنید: نمایش چیدمان، تصاویر، HTML، CSS/JS، منابع خارجی، قابلیت ویرایش و الگوهای بخش‌های صفحه تولید شده. فقط زمانی که این بررسی‌ها به پایان رسید، باید به تنظیمات محتوایی چیدمان ورودی ادامه دهید.