Importovat layout Bootstrap-5
Poznejte kompletní import layoutu: od kontroly Bootstrap-5 a ZIP souboru po automatické zpracování až po kontrolu importovaného layoutu v editoru.
Cíl tutoriálu
Naučíte se, jak importovat Bootstrap-5 rozvržení jako ZIP soubor do CMS bluetronix, zkontrolovat import a následně ověřit obrázky rozvržení, HTML rozvržení, CSS/JS a vytvořené šablony sekcí stránek.
Důležité: Pro import používejte Bootstrap-5 rozvržení, které splňuje níže uvedené požadavky. Skutečný import může trvat až 15 minut.
1. Import - Otevřít layout
Otevřete v CMS sekci Rozvržení a poté vyberte Import - Rozvržení.
2. Vybrat ZIP soubor
V okně Import - Rozvržení klikněte na Vybrat ZIP soubor. Tuto funkci použijete k otevření správce souborů a můžete vybrat ZIP soubor vašeho Bootstrap-5 rozvržení.
Kromě toho máte k dispozici obrázky témat, které mohou být později použity jako náhrada za obrázky rozvržení, pokud se původní obrázky nebudou dále používat.
3. Otevřít složku bx_Import
Ve správci souborů poté otevřete vývojářskou složku bx_Import. Tato složka se používá k poskytování ZIP souboru, který se má importovat.
4. Nahrát layout.zip
Nyní nahrajte svůj vlastní ZIP soubor do složky bx_Import. V našem příkladu se soubor nazývá Layout.zip. Poté vyberte tento soubor pro import rozvržení.
5. Požadavky na Bootstrap-5 layout
CMS kontroluje před importem, zda v ZIP archivu lze nalézt odpovídající strukturu Bootstrap-5. Úplné požadavky a podporované přípony souborů naleznete v následujícím technickém přehledu.
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. Zkontrolovat kroky importu
Jakmile vyberete ZIP soubor, CMS pod obrázky témat zobrazuje jednotlivé kroky, které se během importu vykonají. Zkontrolujte tento přehled, než začnete import.
Import zahrnuje ve zobrazené verzi následující 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. Spustit import
Klikněte na Importovat. CMS upozorňuje, že import může trvat až 15 minut a okno během tohoto procesu nesmí být zavřeno.
Potvrďte upozornění pomocí OK. Poté začne import rozvržení.
8. Zkontrolovat úspěšný import
Po dokončení importu se zprvu zobrazí oznámení, že rozvržení bylo úspěšně importováno.
Následně můžete zkontrolovat, zda byly všechny jednotlivé zpracovatelské kroky úspěšně dokončeny. Úspěšně provedené kroky jsou označeny zeleně.
9. Zkontrolovat nový layout na stránce
Zavřete okno importu a vraťte se na domovskou stránku vašeho webu. Přímo po importu může být zprvu stále viditelný předchozí vzhled.
Pokud je to potřeba, klikněte na Načíst. Poté by se mělo zobrazit importované rozvržení. Porovnejte vzhled s původním rozvržením, které jste chtěli importovat.
10. Zkontrolovat importované obrázky
Následně otevřete Rozvržení → Import - Obrázky. Zde můžete zkontrolovat, které obrázky byly převzaty z importovaného rozvržení nebo byly nahrazeny obrázky témat.
CMS zobrazuje obrázky, u kterých chybí údaje o licencích nebo zdrojích. Pečlivě zkontrolujte tyto informace a rozhodněte, zda mohou být obrázky dále použity, nebo mají být nahrazeny vhodnými obrázky témat.
Pokud nechcete používat původní obrázky, můžete vybrat vhodné obrázky témat nebo vytvořit vlastní obrázky témat. Po nahrazení by mělo být rozvržení znovu vizuálně zkontrolováno.
11. Zkontrolovat HTML layoutu
Otevřete v sekci Rozvržení část Rozvržení - HTML. Zde si můžete zkontrolovat HTML kostru vytvořenou importem.
V databázi rozvržení vidíte importovaný HTML kód. Zde zkontrolujte zejména, zda je kostra kompletní a zda byly potřebné značky CMS převzaty do rozvržení.
12. Zkontrolujte importované CSS a JavaScript soubory
Poté otevři Rozvržení → Import - CSS JS.
Zde vidíš CSS, JavaScript a další zdroje, které byly při importu rozpoznány. Pokud je zdroj označen jako Externí zdroje, nebude načten pouze lokálně z importovaného rozvržení. Tyto externí odkazy bys měl před publikováním cíleně prověřit a podle toho se s nimi zachovat.
13. Ověřte editovatelnost v editoru
Otevři importovanou stránku v editoru a zkontroluj, zda mohou být obsah upravován podle očekávání. Zvlášť otestuj texty, odkazy, obrázky a opakující se oblasti.
14. Zkontrolujte vytvořené šablony sekcí stránek
Otevři v editoru Vložit → Sekce stránky. Import vytváří další kategorie šablon z původního rozvržení. Patří sem Hlava rozvržení, Hlavní rozvržení a Zápatí rozvržení.
Pokud například vybereš Hlavní rozvržení, budou sekce Main extrahované z původního rozvržení zobrazeny jako jednotlivé šablony. Tyto šablony můžeš pak svobodně vkládat a dále upravovat na stránkách.
15. Závěrečná kontrola
Po importu bys měl plně zkontrolovat výsledek: zobrazení rozvržení, obrázky, HTML, CSS/JS, externí zdroje, možnosti editace a vygenerované šablony sekcí stránek. Až tyto kontroly dokončíš, máš začít s dalšími úpravami importovaného rozvržení.
Často kladené otázky
co se nás zákazníci často ptají
Jaká rozvržení mohou být importována?
Import je určen pro Bootstrap-5 rozvržení. CMS vyhledá odpovídající Bootstrap-CSS soubor a také index.html nebo index.htm na odpovídající úrovni složky.
Kde zahájím import rozvržení?
Otevři v CMS oblast Rozvržení a vyber Import - Rozvržení.
Do kterého složky bude ZIP soubor převzat?
Vybraný ZIP soubor s rozvržením bude použit v oblasti vývojáře bx_Import.
Jaké soubory Bootstrapu jsou rozpoznány?
Rozpoznávají se Bootstrap-CSS soubory jako bootstrap.css, bootstrap.min.css a další soubory podle schématu bootstrap***.css. Pro tento návod musí být použito Bootstrap 5.
Jaké typy souborů se importují?
Importují se typy souborů uvedené v příručka, jako jsou HTML, CSS, JavaScript, Font, obrázkové, video, audio, JSON a PDF formáty. Ostatní koncovky souborů nebudou převzaty.
Jak dlouho může import trvat?
Zobrazený tip uvádí možnou dobu až 15 minut. Během této doby nesmí být okno pro import uzavřeno.
Jak poznám úspěšný import?
Jednotlivé kroky importu budou označeny zeleně a poté se objeví zpráva, že rozvržení bylo úspěšně importováno.
Co dělat, když se po importu stále zobrazuje staré rozvržení?
Vrať se na domovskou stránku a v případě potřeby použij Obnovit. Poté by se mělo zobrazit nově importované rozvržení.
Kde mohu zkontrolovat importované obrázky?
Otevři Rozvržení → Import - Obrázky. Tam můžeš zkontrolovat originální obrázky, obrázky témat a informace o licenci a zdroji.
Kde kontroluji importovaný HTML kód?
V části Rozvržení → Rozvržení - HTML si můžeš prohlédnout vytvořenou HTML kostru v datovém záznamu rozvržení.
Kde mohu kontrolovat CSS a JavaScriptové zdroje?
Otevři Rozvržení → Import - CSS JS. Zde uvidíš poznané zdroje při importu a možné odkazy na externí zdroje.
Jaké šablony sekcí stránek jsou generovány z rozvržení?
Import poskytuje šablony v kategoriích Rozvržení-Header, Rozvržení-Main a Rozvržení-Footer.
Co bych měl otestovat po importu?
Zkontroluj vzhled rozvržení, obrázky, HTML, CSS/JS, externí zdroje, editovatelnost v editoru a vytvořené šablony sekcí stránek.