Importowanie layoutu Bootstrap-5
Poznaj pełen proces importu layoutu: od weryfikacji Bootstrap-5 i pliku ZIP przez automatyczne przetwarzanie po kontrolę zaimportowanego layoutu w edytorze.
Cel samouczka
Nauczysz się, jak zaimportować układ Bootstrap 5 jako plik ZIP do CMS bluetronix, sprawdzić import, a następnie kontrolować obrazy układów, HTML układów, CSS/JS oraz utworzone szablony sekcji strony.
Ważne: Użyj do importu układu Bootstrap 5, który spełnia opisane poniżej wymagania. Sam import może zająć do 15 minut.
1. Import - Otwórz layout
Otwórz w CMS sekcję Układ, a następnie wybierz Import - Układ.
2. Wybierz plik ZIP
W oknie Import - Układ kliknij Wybierz plik ZIP. Dzięki tej funkcji otworzysz menedżera plików, w którym możesz wybrać plik ZIP swojego układu Bootstrap 5.
Dodatkowo dostępne są obrazy tematyczne, które mogą być później użyte jako zamienniki dla obrazów układów, jeśli oryginalne obrazy nie mają być ponownie wykorzystywane.
3. Otwórz folder bx_Import
W menedżerze plików otwórz folder dewelopera bx_Import. Ten folder jest używany do przechowywania pliku ZIP do zaimportowania.
4. Załaduj Layout.zip
Teraz załaduj swój własny plik ZIP do folderu bx_Import. W naszym przykładzie plik nazywa się Layout.zip. Następnie wybierz ten plik do importu układu.
5. Wymagania dla layoutu Bootstrap-5
CMS sprawdza przed importem, czy w archiwum ZIP znajduje się odpowiednia struktura Bootstrap 5. Pełne wymagania oraz obsługiwane rozszerzenia plików znajdziesz w następującym przeglądzie technicznym.
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. Sprawdź kroki importowania
Po wybraniu pliku ZIP CMS wyświetli poniżej obrazów tematycznych poszczególne kroki, które zostaną wykonane podczas importu. Sprawdź ten przegląd przed rozpoczęciem importu.
Import obejmuje w pokazanej wersji następujące kroki:
- Layout einlesen: ZIP-Datei entpacken und auf ein gültiges Bootstrap-5-Layout prüfen.
- HTML-Grundgerüst extrahieren: Standard-Layout in der Datenbank 00_layout erstellen.
- Kopfzeile / Fußzeile extrahieren: Header und Footer ermitteln und /bx_Header.html sowie /bx_Footer.html neu erstellen.
- index.html aus Layout erstellen: Inhalt der Startseite ermitteln und /index.html neu erstellen.
- Seiten-Abschnitte extrahieren: Header, Main-Sections und Footer als Layout-Section-Dateien erzeugen.
- Bilder ersetzen: Layout-Bilder bei Bedarf durch CMS-Themenbilder ersetzen.
- CSS / JS importieren: gefundene CSS- und JS-Dateien in den Main-Ordner übernehmen.
7. Rozpocznij import
Kliknij Importuj. CMS informuje, że import może zająć do 15 minut i okno nie może być w tym czasie zamknięte.
Potwierdź komunikat klikając OK. Następnie rozpocznie się import układu.
8. Sprawdź udany import
Po zakończeniu importu najpierw wyświetli się komunikat, że układ został pomyślnie zaimportowany.
Następnie możesz sprawdzić, czy wszystkie poszczególne etapy przetwarzania zostały pomyślnie zakończone. Pomyślnie wykonane kroki będą oznaczone na zielono.
9. Sprawdź nowy layout na stronie
Zamknij okno importu i wróć do strony głównej swojej witryny. Bezpośrednio po imporcie może być widoczne wcześniejsze wyświetlenie.
W razie potrzeby kliknij Odśwież. Następnie powinien zostać wyświetlony zaimportowany układ. Porównaj wyświetlenie z oryginalnym układem, który chciałeś zaimportować.
10. Sprawdź zaimportowane obrazy
Następnie otwórz Układ → Import - Obrazy. Tam możesz sprawdzić, które obrazy z zaimportowanego układu zostały przyjęte lub zastąpione obrazami tematycznymi.
CMS wyświetla obrazy, dla których brakuje informacji o licencji lub źródle. Starannie sprawdź te wskazówki i zdecyduj, czy obrazy mogą być dalej wykorzystywane, czy powinny być zastąpione odpowiednimi obrazami tematycznymi.
Jeśli nie chcesz korzystać z dostępnych oryginalnych obrazów, możesz wybrać odpowiednie obrazy tematyczne lub stworzyć własne. Po zastąpieniu układ powinien zostać ponownie wizualnie sprawdzony.
11. Sprawdź HTML layoutu
Otwórz w sekcji Układ część Układ - HTML. Tam możesz sprawdzić wygenerowaną w wyniku importu strukturę HTML.
W bazie danych układów widzisz zaimportowany kod HTML. Sprawdź tutaj szczególnie, czy struktura podstawowa jest w pełni obecna i czy niezbędne znaczniki CMS zostały wprowadzone do układu.
12. Sprawdź zaimportowane pliki CSS i JavaScript
Następnie otwórz Układ → Import - CSS JS.
Tutaj zobaczysz zasoby CSS, JavaScript i inne, które zostały wykryte podczas importu. Jeśli zasób jest oznaczony jako Źródła zewnętrzne, nie będą one ładowane wyłącznie lokalnie z zaimportowanego układu. Takie zewnętrzne powiązania należy starannie sprawdzić przed publikacją i odpowiednio je obsłużyć.
13. Przetestuj edytowalność w edytorze
Otwórz zaimportowaną stronę w edytorze i sprawdź, czy zawartości można edytować zgodnie z zamierzeniami. Szczególnie testuj teksty, linki, obrazy i powtarzalne obszary.
14. Sprawdź utworzone szablony sekcji strony
Otwórz w edytorze Wstaw → Sekcja strony. Import generuje dodatkowe kategorie szablonów z pierwotnego układu. Należą do nich Header układu, Main układu i Footer układu.
Jeśli na przykład wybierzesz Main układu, sekcje główne wyodrębnione z pierwotnego układu będą wyświetlane jako pojedyncze szablony. Możesz je następnie dowolnie wstawiać do stron i dalej edytować.
15. Kontrola końcowa
Po imporcie powinieneś dokładnie sprawdzić wyniki: wyświetlanie układu, obrazy, HTML, CSS/JS, zasoby zewnętrzne, możliwość edycji oraz utworzone szablony sekcji strony. Dopiero po zakończeniu tych kontroli powinieneś przystąpić do dalszej edycji treści zaimportowanego układu.
FAQ
co klienci często nas pytają
Jakie układy mogą być importowane?
Import jest przeznaczony dla układów Bootstrap-5. CMS poszukuje odpowiedniego pliku CSS Bootstrap oraz pliku index.html lub index.htm na odpowiednim poziomie folderu.
Gdzie rozpoczynam import układu?
Otwórz w CMS sekcję Układ i wybierz Import - Układ.
Do którego folderu zostanie przeniesiony plik ZIP?
Wybrany plik ZIP z układem zostanie użyty w obszarze deweloperskim bx_Import.
Jakie pliki Bootstrap są rozpoznawane?
Rozpoznawane są pliki CSS Bootstrap, takie jak bootstrap.css, bootstrap.min.css oraz inne pliki według schematu bootstrap***.css. Dla tego samouczka musi to być Bootstrap 5.
Jakie typy plików są importowane?
Importowane są pliki HTML, CSS, JavaScript, czcionek, obrazów, wideo, audio, JSON i PDF wymienione w samouczku. Inne rozszerzenia plików nie są akceptowane.
Jak długo może trwać import?
Wyświetlany komunikat wskazuje możliwy czas trwania do 15 minut. Okno importu nie może w tym czasie zostać zamknięte.
Jak rozpoznać udany import?
Poszczególne kroki importu są oznaczane na zielono, a następnie pojawia się komunikat, że układ został pomyślnie zaimportowany.
Co zrobić, jeśli po imporcie wciąż wyświetla się stary układ?
Wróć do strony głównej i w razie potrzeby użyj Przeładuj. Po tym powinien być widoczny nowo zaimportowany układ.
Gdzie sprawdzam zaimportowane obrazy?
Otwórz Układ → Import - Obrazy. Możesz tam kontrolować oryginalne obrazy, obrazy tematyczne oraz informacje o licencji i źródle.
Gdzie sprawdzam zaimportowany kod HTML?
W sekcji Układ → Układ - HTML możesz sprawdzić wygenerowaną strukturę HTML w rekordzie układu.
Gdzie sprawdzam zasoby CSS i JavaScript?
Otwórz Układ → Import - CSS JS. Zobaczysz tam zasoby rozpoznane podczas importu oraz ewentualne wskazówki dotyczące zewnętrznych źródeł.
Jakie szablony sekcji strony są generowane z układu?
Import udostępnia szablony w kategoriach Układ-Nagłówek, Układ-Główna i Układ-Futer.
Co powinienem przetestować po zakończeniu importu?
Sprawdź prezentację układu, obrazy, HTML, CSS/JS, zewnętrzne zasoby, edytowalność w edytorze oraz wygenerowane szablony sekcji strony.