Bootstrap-5-ös elrendezés importálása
Ismerkedj meg a teljes elrendezésimportálással: a Bootstrap-5-ös ellenőrzéstől és ZIP-fájltól, az automatikus feldolgozáson át az importált elrendezés ellenőrzéséig a szerkesztőben.
A tutoriál célja
Megtanulod, hogyan importálj egy Bootstrap-5 elrendezést ZIP fájlként a bluetronix CMS-be, ellenőrizd az importot, majd ellenőrizd az elrendezés képeit, HTML-jét, CSS/JS-t, valamint a létrehozott oldalszakasz sablonokat.
Fontos: Az importáláshoz használj egy Bootstrap-5 elrendezést, amely megfelel az alább leírt feltételeknek. Az importálás akár 15 percig is eltarthat.
1. Import - Elrendezés megnyitása
A CMS-ben nyisd meg a Layout részt, majd válaszd ki a Import - Layout lehetőséget.
2. Válassz ki egy ZIP fájlt
Az Import - Layout ablakban kattints a ZIP fájl kiválasztása lehetőségre. Ezzel a funkcióval megnyithatod a fájlkezelőt, és kiválaszthatod a Bootstrap-5 elrendezésed ZIP fájlját.
Továbbá elérhetők témaképek is, amelyeket később az elrendezés képeinek helyettesítésére használhatsz, ha az eredeti képek nem szeretnéd, hogy továbbhasználják.
3. Nyisd meg a bx_Import mappát
A fájlkezelőben nyisd meg a bx_Import fejlesztőmappát. Ezt a mappát az importálni kívánt ZIP fájl biztosítására használják.
4. Töltsd fel a Layout.zip fájlt
Most töltsd fel a saját ZIP fájlodat a bx_Import mappába. Példánkban a fájl neve Layout.zip. Ezután válaszd ki ezt a fájlt az elrendezés importálásához.
5. A Bootstrap-5 elrendezés feltételei
A CMS az importálás előtt ellenőrzi, hogy a ZIP archívumban található-e megfelelő Bootstrap-5 struktúra. A teljes körű feltételeket és a támogatott fájlkiterjesztéseket a következő technikai áttekintés tartalmazza.
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. Ellenőrizd az import lépéseit
Miután kiválasztottad a ZIP fájlt, a CMS a témaképek alatt megjeleníti az importálás során végrehajtandó lépéseket. Ellenőrizd ezt az áttekintést, mielőtt elindítod az importálást.
Az importálás a bemutatott verzióban a következő lépéseket tartalmazza:
- 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. Indítsd el az importálást
Kattints a Importálás gombra. A CMS figyelmeztet, hogy az importálás akár 15 percig is eltarthat, és az ablakot ez idő alatt nem szabad bezárni.
Erősítsd meg a figyelmeztetést a OK gombbal. Ezt követően elindul a tervezés importálása.
8. Ellenőrizd a sikeres importálást
A betöltés befejezése után először megjelenik az üzenet, hogy a tervezés sikeresen importálva lett.
Ezután ellenőrizheted, hogy az egyes feldolgozási lépések sikeresen befejeződtek-e. A sikeresen végrehajtott lépések zöld színnel vannak jelölve.
9. Ellenőrizd az új elrendezést a weboldalon
Zárd be az importálási ablakot, és térj vissza a weboldalad kezdőlapjára. Közvetlenül az importálás után először még a korábbi megjelenítés látható lehet.
Szükség esetén kattints a Reload gombra. Ezt követően az importált tervezésnek meg kell jelennie. Hasonlítsd össze a megjelenítést az eredeti tervezéssel, amelyet importálni szerettél volna.
10. Ellenőrizd az importált képeket
Ezután nyisd meg a Layout → Import - Képek menüpontot. Itt ellenőrizheted, hogy mely képek kerültek át az importált tervezésből, illetve melyeket helyettesítettek témaképek.
A CMS olyan képeket mutat, amelyeknél hiányoznak a licenc- vagy forrásegyüttesei. Gondosan nézd át ezeket a figyelmeztetéseket, és döntsd el, hogy a képek továbbra is felhasználhatóak-e vagy megfelelő témaképekkel helyettesítendők.
Ha nem szeretnéd a meglévő eredeti képeket felhasználni, választhatsz megfelelő témaképeket, vagy készíthetsz saját témaképeket. A helyettesítés után a tervezést ismét vizuálisan ellenőrizni kell.
11. Ellenőrizd az elrendezés HTML-jét
Nyisd meg a Layout menüben a Layout - HTML részt. Itt ellenőrizheted az importálás során létrejött HTML alapstruktúrát.
A tervezési adatbázisban láthatod az importált HTML-kódot. Itt különösen fontos ellenőrizni, hogy az alapstruktúra teljes mértékben rendelkezésre áll-e, és hogy a szükséges CMS-jelölések bekerültek-e a tervezésbe.
12. Ellenőrizd az importált CSS és JavaScript fájlokat
Ezután nyisd meg a Layout → Import - CSS JS menüpontot.
Itt láthatod a CSS-, JavaScript- és egyéb forrásokat, amelyeket az importálás során észleltünk. Ha egy forrást Külső források jelöléssel láttak el, azt nem kizárólagosan a helyi importált tervezésből töltik be. Az ilyen külső hivatkozásokat célzottan ellenőrizned kell a közzététel előtt, és ennek megfelelően kezelni.
13. Teszteld a szerkeszthetőséget a szerkesztőben
Nyisd meg az importált oldalt a szerkesztőben, és ellenőrizd, hogy a tartalmak a vártnak megfelelően szerkeszthetők-e. Különösen teszteld a szövegeket, linkeket, képeket és az ismételhető területeket.
14. Ellenőrizd a létrehozott oldal szakasz sablonokat
Nyisd meg a szerkesztőben a Beszúrás → Oldalszakasz menüpontot. Az importálás során a korábbi tervből további sablonkategóriák jönnek létre. Ezek közé tartozik a Layout-Header, Layout-Main és Layout-Footer.
Ha például a Layout-Main lehetőséget választod, a korábbi tervezésből kinyert fő szakaszok külön sablonként jelennek meg. Ezeket később szabadon beillesztheted az oldalakba és tovább szerkesztheted.
15. Záróellenőrzés
Az importálás után teljes mértékben ellenőrizned kell az eredményt: tervezés megjelenítése, képek, HTML, CSS/JS, külső források, szerkeszthetőség és az előállított oldalszakasz-sablonok. Csak ezek a vizsgálatok után kezdj bele a importált tervezés további tartalmi személyre szabásába.
GYIK
Miket kérdeznek tőlünk gyakran az ügyfelek?
Milyen terveket lehet importálni?
Az importálás a Bootstrap-5 tervekhez készült. A CMS egy megfelelő Bootstrap-CSS fájt, valamint egy index.html vagy index.htm fájlt keres a megfelelő mappaszinten.
Hol indítom a tervezés importálását?
Nyisd meg a CMS-ben a Layout részt, és válaszd az Import - Tervezés lehetőséget.
Melyik mappába kerül a ZIP fájl?
A kiválasztott tervezési ZIP fájlt a fejlesztői területen a bx_Import használja.
Milyen Bootstrap fájlokat ismer fel?
A bootstrap.css, bootstrap.min.css és további fájlok, amelyek a bootstrap***.css séma szerint vannak, elismerésre kerülnek. Ehhez a bemutatóhoz Bootstrap 5-nek kell lennie.
Milyen fájltípusokat importálunk?
Importálni lehet a bemutatóban felsorolt HTML-, CSS-, JavaScript-, font-, kép-, videó-, audio-, JSON- és PDF-fájltípusokat. Más fájlkiterjesztések nem használhatók.
Meddig tarthat az importálás?
A megjelenített értesítés legfeljebb 15 percet említ. Az importáló ablakot ez alatt nem szabad bezárni.
Hogyan ismerem fel a sikeres importálást?
Az egyes importlépéseket zöld színnel jelölik, majd megjelenik az üzenet, hogy a dizájn sikeresen importálva lett.
Mit tegyek, ha az importálás után még mindig a régi dizájn jelenik meg?
Térj vissza a kezdőlapra, és szükség esetén használd a Frissítés lehetőséget. Ezt követően a frissen importált dizájnnak meg kell jelennie.
Hol ellenőrizhetem az importált képeket?
Nyisd meg a Dizájn → Import - Képek menüpontot. Ott ellenőrizheted az eredeti képeket, a témaképeket, valamint a licencre és forrásra vonatkozó információkat.
Hol ellenőrizhetem az importált HTML-kódot?
A Dizájn → Dizájn - HTML menüben ellenőrizheted a létrehozott HTML alapstruktúráját a dizájndatákban.
Hol ellenőrizhetem a CSS- és JavaScript-erőforrásokat?
Nyisd meg a Dizájn → Import - CSS JS menüpontot. Ott láthatod az importáláskor észlelt erőforrásokat és lehetséges utalásokat a külső forrásokra.
Milyen oldalrész sablonok készülnek a dizájnból?
Az importálás a következő kategóriákban készít sablonokat: Dizájn-Felirat, Dizájn-Fő rész és Dizájn-Lábjegyzet.
Mit kell utoljára letesztelnem az importálás után?
Ellenőrizd a dizájn megjelenését, a képeket, a HTML-t, a CSS/JS-t, a külső erőforrásokat, a szerkesztőségi módot és a létrehozott oldalrész sablonokat.