Bootstrap-5-indeling importeren
Leer de volledige indeling-Import kennen: van de Bootstrap-5-controle en ZIP-bestand tot de automatische verwerking en de controle van de geïmporteerde indeling in de editor.
Doel van de tutorial
Je leert hoe je een Bootstrap-5-layout als ZIP-bestand in het bluetronix CMS importeert, de import controleert en vervolgens layout-afbeeldingen, layout-HTML, CSS/JS evenals de gemaakte pagina-sectie templates controleert.
Belangrijk: Gebruik voor de import een Bootstrap-5-layout die voldoet aan de hieronder beschreven voorwaarden. De daadwerkelijke import kan tot 15 minuten duren.
1. Import - Indeling openen
Open in het CMS het deel Layout en kies vervolgens Import - Layout.
2. ZIP-bestand selecteren
In het venster Import - Layout klik je op ZIP-bestand kiezen. Via deze functie open je de bestandsbeheerder en kun je het ZIP-bestand van je Bootstrap-5-layout selecteren.
Bovendien heb je toegang tot themabeelden die later als vervanging voor layout-afbeeldingen kunnen worden gebruikt, als de originele afbeeldingen niet verder gebruikt moeten worden.
3. Map bx_Import openen
In de bestandsbeheerder open je vervolgens de map bx_Import. Deze map wordt gebruikt om het te importeren ZIP-bestand beschikbaar te stellen.
4. Layout.zip uploaden
Upload nu je eigen ZIP-bestand naar de map bx_Import. In ons voorbeeld heet het bestand Layout.zip. Kies vervolgens dit bestand voor de layout-import.
5. Voorwaarden voor de Bootstrap-5-indeling
Het CMS controleert voorafgaand aan de import of er een geschikte Bootstrap-5-structuur in het ZIP-archief kan worden gevonden. De volledige voorwaarden en de ondersteunde bestandsindelingen vind je in het volgende technische overzicht.
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. Importstappen controleren
Nadat je het ZIP-bestand hebt gekozen, geeft het CMS onder de themabeelden de alle stappen weer die tijdens de import worden uitgevoerd. Controleer dit overzicht voordat je de import start.
De import omvat in de getoonde versie de volgende stappen:
- 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. Import starten
Klik op Importeren. Het CMS wijst erop dat de import tot 15 minuten kan duren en dat het venster gedurende deze tijd niet gesloten mag worden.
Bevestig de melding met OK. Vervolgens begint de import van de layout.
8. Succesvolle import controleren
Na afloop van de import verschijnt eerst de melding dat de layout succesvol is geïmporteerd.
Vervolgens kun je controleren of alle afzonderlijke verwerkingsstappen succesvol zijn afgerond. Succesvol voltooide stappen worden groen gemarkeerd.
9. Nieuwe indeling op de website controleren
Sluit het importvenster en keer terug naar de startpagina van je website. Direct na de import kan in eerste instantie de eerdere weergave zichtbaar zijn.
Klik indien nodig op Herladen. Vervolgens zou de geïmporteerde layout weergegeven moeten worden. Vergelijk de weergave met de oorspronkelijke layout die je wilde importeren.
10. Geïmporteerde afbeeldingen controleren
Open vervolgens Layout → Import - Beelden. Daar kun je controleren welke beelden uit de geïmporteerde layout zijn overgenomen of door themabeelden zijn vervangen.
Het CMS toont beelden waarvoor informatie over licentie of bron ontbreekt. Controleer deze aanwijzingen zorgvuldig en beslis of de beelden verder gebruikt mogen worden of door geschikte themabeelden vervangen moeten worden.
Als je de bestaande originele beelden niet wilt gebruiken, kun je passende themabeelden selecteren of eigen themabeelden creëren. Na het vervangen moet de layout opnieuw visueel worden gecontroleerd.
11. Indeling-HTML controleren
Open onder Layout het gebied Layout - HTML. Daar kun je de uit de import gegenereerde HTML-structuur controleren.
In de layout-database zie je de geïmporteerde HTML-code. Controleer hier vooral of de structuur volledig aanwezig is en of de benodigde CMS-tags in de layout zijn overgenomen.
12. Geïmporteerde CSS- en JavaScript-bestanden controleren
Open vervolgens Layout → Import - CSS JS.
Hier zie je de CSS-, JavaScript- en andere middelen die bij de import zijn herkend. Als een middel als Externe bronnen is gemarkeerd, wordt het niet uitsluitend lokaal vanuit de geïmporteerde lay-out geladen. Zulke externe koppelingen dien je voor de publicatie zorgvuldig te controleren en dienovereenkomstig te behandelen.
13. Bewerkbaarheid in de editor testen
Open de geïmporteerde pagina in de editor en controleer of de inhoud zoals bedoeld kan worden bewerkt. Test vooral teksten, links, afbeeldingen en herhaalbare secties.
14. Gemaakt pagina-sectie templates controleren
Open in de editor Invoegen → Pagina-sectie. De import genereert extra sjablooncategorieën uit de oorspronkelijke lay-out. Dit omvat Layout-Kop, Layout-Main en Layout-Footer.
Wanneer je bijvoorbeeld Layout-Main selecteert, worden de uit de oorspronkelijke lay-out geëxtraheerde Main-secties als afzonderlijke sjablonen weergegeven. Deze kun je vervolgens vrij in pagina's invoegen en verder bewerken.
15. Eindcontrole
Na de import moet je het resultaat volledig controleren: lay-outweergave, afbeeldingen, HTML, CSS/JS, externe middelen, bewerkbaarheid en de gegenereerde pagina-sectie-sjablonen. Pas wanneer deze controles zijn afgerond, kun je beginnen met de verdere inhoudelijke aanpassing van de geïmporteerde lay-out.
FAQ
wat klanten ons vaak vragen
Welke lay-outs kunnen worden geïmporteerd?
De import is bedoeld voor Bootstrap 5-lay-outs. Het CMS zoekt naar een passende Bootstrap-CSS-bestand en naar een index.html of index.htm op het overeenkomstige mappeniveau.
Waar start ik de lay-outimport?
Open in het CMS het gedeelte Lay-out en kies Import - Lay-out.
In welke map wordt het ZIP-bestand overgenomen?
Het geselecteerde lay-out-ZIP-bestand wordt in het ontwikkelaarsgebied bx_Import gebruikt.
Welke Bootstrap-bestanden worden herkend?
Herkenbaar zijn Bootstrap-CSS-bestanden zoals bootstrap.css, bootstrap.min.css en andere bestanden volgens het schema bootstrap***.css. Voor deze tutorial moet het om Bootstrap 5 gaan.
Welke bestandstypen worden geïmporteerd?
In de tutorial worden de HTML-, CSS-, JavaScript-, lettertype-, afbeelding-, video-, audio-, JSON- en PDF-bestandstypen geïmporteerd. Andere bestandsextensies worden niet overgenomen.
Hoe lang kan de import duren?
De weergegeven melding noemt een mogelijke duur van tot 15 minuten. Het importvenster mag tijdens deze tijd niet worden gesloten.
Hoe herken ik een succesvolle import?
De afzonderlijke importstappen worden groen gemarkeerd en daarna verschijnt de melding dat de lay-out met succes is geïmporteerd.
Wat moet ik doen als na de import nog de oude lay-out wordt weergegeven?
Ga terug naar de startpagina en gebruik indien nodig Herladen. Daarna zou de nieuw geïmporteerde lay-out moeten worden weergegeven.
Waar controleer ik de geïmporteerde afbeeldingen?
Open Lay-out → Import - Afbeeldingen. Daar kun je originele afbeeldingen, themabeelden en informatie over licentie en bron controleren.
Waar controleer ik de geïmporteerde HTML-code?
Onder Lay-out → Lay-out - HTML kun je de gegenereerde HTML-basisset in het lay-outrecord controleren.
Waar controleer ik CSS- en JavaScript-bronnen?
Open Lay-out → Import - CSS JS. Hier zie je de bij de import herkende bronnen en mogelijke aanwijzingen voor externe bronnen.
Welke pagina-sectie sjablonen worden uit het lay-out gegenereerd?
De import biedt sjablonen in de categorieën Lay-out-header, Lay-out-hoofd en Lay-out-footer.
Wat moet ik na de import uiteindelijk testen?
Controleer de weergave van het lay-out, afbeeldingen, HTML, CSS/JS, externe bronnen, de bewerkbaarheid in de editor en de gegenereerde pagina-sectie sjablonen.