Importovať Bootstrap-5-rozloženie
Spoznajte kompletný import rozloženia: od kontroly Bootstrap-5 a ZIP súboru cez automatické spracovanie až po kontrolu importovaného rozloženia v editore.
Cieľ tutoriálu
Naučíte sa, ako importovať Bootstrap-5 rozloženie ako ZIP súbor do systému bluetronix CMS, skontrolovať import a následne kontrolovať obrázky rozloženia, HTML rozloženie, CSS/JS a vytvorené šablóny sekcií stránok.
Dôležité: Pre import použite Bootstrap-5 rozloženie, ktoré spĺňa nižšie opísané požiadavky. Skutočný import môže trvať až 15 minút.
1. Import - Otvoriť rozloženie
V CMS otvorte sekciu Rozloženie a potom vyberte Import - Rozloženie.
2. Vybrať ZIP súbor
V okne Import - Rozloženie kliknite na Vybrať ZIP súbor. Touto funkciou otvoríte správcu súborov a môžete vybrať ZIP súbor vášho Bootstrap-5 rozloženia.
Okrem toho máte k dispozícii tématické obrázky, ktoré môžu nahradiť obrázky rozloženia, ak sa pôvodné obrázky nebudú ďalej používať.
3. Otvoriť zložku bx_Import
V správcovi súborov následne otvorte adresár vývojára bx_Import. Tento adresár sa používa na poskytnutie ZIP súboru na import.
4. Nahrať layout.zip
Nahrajte teraz vlastný ZIP súbor do adresára bx_Import. V našom príklade má súbor názov Layout.zip. Potom vyberte tento súbor na import rozloženia.
5. Predpoklady pre Bootstrap-5-rozloženie
CMS pred importom kontroluje, či sa v ZIP archíve nájde vhodná Bootstrap-5 štruktúra. Kompletné požiadavky a podporované koncovky súborov nájdete v nasledujúcom technickom prehľade.
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. Skontrolovať kroky importu
Po výbere ZIP súboru CMS pod tématickými obrázkami zobrazuje jednotlivé kroky, ktoré sa vykonajú počas importu. Skontrolujte tento prehľad pred začatím importu.
Import v zobrazenom režime zahŕňa nasledujúce kroky:
- 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. Spustiť import
Kliknite na Importovať. CMS upozorní, že import môže trvať až 15 minút a že okno sa počas tejto doby nesmie zatvoriť.
Potvrďte upozornenie kliknutím na OK. Potom sa spustí import rozloženia.
8. Skontrolovať úspešný import
Po dokončení importu sa najprv zobrazí správa, že rozloženie bolo úspešne importované.
Potom môžete skontrolovať, či boli všetky jednotlivé spracovateľské kroky úspešne dokončené. Úspešne vykonané kroky sú označené zelenou farbou.
9. Skontrolovať nové rozloženie na webovej stránke
Zatvorte okno importu a vráťte sa na domovskú stránku vašej webovej stránky. Ihneď po importe sa môže najprv zobraziť predchádzajúci vzhľad.
V prípade potreby kliknite na Obnoviť. Potom by sa malo zobraziť importované rozloženie. Porovnajte vzhľad s pôvodným rozložením, ktoré ste chceli importovať.
10. Skontrolovať importované obrázky
Následne otvorte Rozloženie → Import - Obrázky. Tam môžete skontrolovať, aké obrázky boli prevzaté z importovaného rozloženia alebo nahradené tématickými obrázkami.
CMS zobrazuje obrázky, pri ktorých chýbajú údaje o licenciách alebo zdrojoch. Tieto upozornenia starostlivo skontrolujte a rozhodnite, či sa obrázky môžu ďalej používať alebo by mali byť nahradené vhodnými tématickými obrázkami.
Ak nechcete používať dostupné pôvodné obrázky, môžete vybrať vhodné tématické obrázky alebo vytvoriť vlastné. Po nahradení by sa malo rozloženie opäť vizuálne skontrolovať.
11. Skontrolovať HTML rozloženia
Otvorte v Rozložení sekciu Rozloženie - HTML. Tam môžete skontrolovať HTML základný rámec, ktorý bol vytvorený importom.
V databáze rozloženia vidíte importovaný HTML kód. Skontrolujte tu najmä to, či je základný rámec úplne prítomný a či boli potrebné CMS značky prenesené do rozloženia.
12. Skontrolujte importované CSS a JavaScript súbory
Potom otvor Rozloženie → Import - CSS JS.
Tu vidíš CSS, JavaScript a ďalšie zdroje, ktoré boli pri importe rozpoznané. Ak je zdroj označený ako Externé zdroje, nebude sa načítavať len lokálne z importovaného rozloženia. Takéto externé prepojenia by si mal pred zverejnením dôkladne skontrolovať a prípadne upraviť.
13. Otestujte editovateľnosť v editore
Otvor importovanú stránku v editore a skontroluj, či je možné obsah upravovať, ako sa predpokladalo. Otestuj najmä texty, odkazy, obrázky a opakovateľné oblasti.
14. Skontrolujte vytvorené šablóny sekcií stránok
V editore otvor Vložiť → Sekcia stránky. Import vytvorí ďalšie kategórie šablón z pôvodného rozloženia. Tieto zahŕňajú Hlavicka rozloženia, Hlavné rozloženie a Pätička rozloženia.
Ak napríklad vyberieš Hlavné rozloženie, jednotlivé hlavné sekcie extrahované z pôvodného rozloženia sa zobrazia ako samostatné šablóny. Tieto môžeš následne voľne vložiť do stránok a ďalej upravovať.
15. Záverečná kontrola
Po importe by si mal dôkladne skontrolovať výsledok: zobrazenie rozloženia, obrázky, HTML, CSS/JS, externé zdroje, editovateľnosť a vytvorené šablóny sekcií stránok. Až keď sú tieto kontroly ukončené, by si mal začať s ďalšími úpravami obsahu importovaného rozloženia.
Často kladené otázky
čo sa nás zákazníci často pýtajú
Aké rozloženia môžu byť importované?
Import je určený pre rozloženia Bootstrap-5. CMS vyhľadáva vhodný súbor Bootstrap-CSS a index.html alebo index.htm na príslušnej úrovni adresára.
Kde začnem import rozloženia?
Otvor v CMS sekciu Rozloženie a vyber Import - Rozloženie.
Do ktorého priečinka sa preberie ZIP súbor?
Vybratý ZIP súbor rozloženia sa použije v oblasti vývoja bx_Import.
Aké súbory Bootstrap sú rozpoznávané?
Rozpoznávajú sa súbory Bootstrap-CSS ako bootstrap.css, bootstrap.min.css a ďalšie súbory podľa schémy bootstrap***.css. Na tento tutoriál musí ísť o Bootstrap 5.
Aké typy súborov sa importujú?
Importujú sa HTML, CSS, JavaScript, Font, Obrázok, Video, Audio, JSON a PDF typy súborov uvedené v tutoriáli. Iné prípony súborov sa nepreberajú.
Ako dlho môže trvať import?
Zobrazená správa uvádza možnú dĺžku až 15 minút. Počas toho sa nesmie zavrieť okno importu.
Ako spoznám úspešný import?
Jednotlivé kroky importu sú označené zelenou farbou a následne sa objaví správa, že rozloženie bolo úspešne importované.
Čo mám robiť, ak sa po importe stále zobrazuje staré rozloženie?
Vráť sa na domovskú stránku a ak je to potrebné, použi Obnoviť. Potom by sa malo zobraziť novozískané rozloženie.
Kde kontrolujem importované obrázky?
Otvor Rozloženie → Import - Obrázky. Tam môžeš skontrolovať pôvodné obrázky, obrázky tém a poznámky o licencii a zdroji.
Kde kontrolujem importovaný HTML kód?
V sekcii Rozloženie → Rozloženie - HTML môžeš skontrolovať vygenerovaný základný HTML kód v zázname rozloženia.
Kde kontrolujem CSS a JavaScriptové zdroje?
Otvor Rozloženie → Import - CSS JS. Tam uvidíš zdroje rozpoznané pri importe a možné upozornenia na externé zdroje.
Ktoré šablóny častí stránky sú vytvorené z rozloženia?
Import poskytuje šablóny v kategóriách Rozloženie-Hlavný, Rozloženie-Hlavný obsah a Rozloženie-Päta.
Čo by som mal konečne otestovať po importe?
Skontroluj zobrazenie rozloženia, obrázky, HTML, CSS/JS, externé zdroje, editovateľnosť v editore a vytvorené šablóny častí stránky.