Импортировать макет Bootstrap-5

Цель учебного пособия

Вы научитесь импортировать макет Bootstrap-5 в формате ZIP в CMS bluetronix, проверять импорт, а затем контролировать изображения макета, HTML-код макета, CSS/JS и созданные шаблоны для разделов страниц.

Важно: Используйте для импорта макет Bootstrap-5, который соответствует ниже описанным требованиям. Сам импорт может занять до 15 минут.

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 предупреждает, что импорт может занять до 15 минут, и окно не должно быть закрыто в это время.

Подтвердите уведомление нажатием ОК. Далее начнется импорт макета.

8. Проверить успешный импорт

После завершения импорта сначала появится сообщение о том, что макет был успешно импортирован.

Затем вы можете проверить, были ли все отдельные этапы обработки успешно завершены. Успешно выполненные шаги будут отмечены зеленым.

9. Проверить новый макет на странице

Закройте окно импорта и вернитесь на главную страницу вашего сайта. Сразу после импорта может быть отображен прежний вид.

При необходимости нажмите на Обновить. Далее должно отображаться импортированное оформление. Сравните отображение с оригинальным макетом, который вы хотели импортировать.

10. Проверить импортированные изображения

Затем откройте Макет → Импорт - Изображения. Там вы можете проверить, какие изображения из импортированного макета были унаследованы или заменены тематическими изображениями.

CMS показывает изображения, для которых отсутствуют данные о лицензии или источнике. Внимательно проверьте эти указания и решите, могут ли изображения быть использованы дальше или следует заменить их подходящими тематическими изображениями.

Если вы не хотите использовать имеющиеся оригинальные изображения, вы можете выбрать подходящие тематические изображения или создать собственные тематические изображения. После замены макет следует визуально проверить еще раз.

11. Проверить HTML макета

Откройте в разделе Макет область Макет - HTML. Там вы можете проверить созданный из импорта HTML-код.

В базе данных макета вы видите импортированный HTML-код. Проверьте здесь, в частности, наличие полного каркаса и были ли нужные метки CMS включены в макет.

12. Проверьте импортированные CSS- и JavaScript-файлы

Затем откройте Макет → Импорт - CSS JS.

Здесь вы видите CSS, JavaScript и другие ресурсы, которые были распознаны при импорте. Если ресурс помечен как Внешние источники, он не загружается исключительно локально из импортированного макета. Такие внешние ссылки следует тщательно проверять и обрабатывать перед публикацией.

13. Проверьте редактируемость в редакторе

Откройте импортированную страницу в редакторе и проверьте, можно ли редактировать содержимое так, как задумано. Особенно протестируйте тексты, ссылки, изображения и повторяемые области.

14. Проверьте созданные шаблоны для разделов страниц

В редакторе откройте Вставка → Раздел страницы. Импорт создает дополнительные категории шаблонов из первоначального макета. К ним относятся Заголовок макета, Основной макет и Нижний колонтитул макета.

Например, если вы выберете Основной макет, секции, извлеченные из первоначального макета, будут отображаться как отдельные шаблоны. Эти шаблоны можно свободно вставлять в страницы и редактировать дальше.

15. Финальная проверка

После импорта вам следует полностью проверить результат: отображение макета, изображения, HTML, CSS/JS, внешние ресурсы, возможность редактирования и созданные шаблоны разделов страниц. Только после завершения этих проверок вы должны начать дальнейшую настройку содержимого импортированного макета.