Importere Bootstrap-5-layout
Lær den komplette layout-import at kende: fra Bootstrap-5-kontrol og ZIP-fil til den automatiske behandling og kontrol af det importerede layout i editoren.
Mål med vejledningen
Du lærer, hvordan du importerer et Bootstrap 5-layout som en ZIP-fil til bluetronix CMS, tjekker importen, og derefter kontrollerer layoutbilleder, layout-HTML, CSS/JS samt de genererede sektionsskabeloner.
Vigtigt: Brug et Bootstrap 5-layout til import, der opfylder de nedenfor beskrevne krav. Selve importen kan tage op til 15 minutter.
1. Import - Åbn layout
Åbn Layout sektionen i CMS'et, og vælg derefter Import - Layout.
2. Vælg ZIP-fil
I vinduet Import - Layout klikker du på Vælg ZIP-fil. Gennem denne funktion åbner du filhåndteringen og kan vælge ZIP-filen til dit Bootstrap 5-layout.
Derudover har du adgang til tema- billeder, som senere kan bruges som erstatning for layoutbilleder, hvis originalbillederne ikke skal genbruges.
3. Åbn mappe bx_Import
I filhåndteringen åbner du derefter udviklermappen bx_Import. Denne mappe bruges til at placere den ZIP-fil, der skal importeres.
4. Upload Layout.zip
Upload nu din egen ZIP-fil til mappen bx_Import. I vores eksempel hedder filen Layout.zip. Vælg derefter denne fil til layoutimport.
5. Forudsætninger for Bootstrap-5-layout
CMS'et kontrollerer før importen, om der kan findes en passende Bootstrap 5-struktur i ZIP-arkivet. De fulde krav og de understøttede filtyper findes i den følgende tekniske oversigt.
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. Kontroller importtrinene
Når du har valgt ZIP-filen, viser CMS'et under tema-billederne de enkelte trin, der udføres under importen. Tjek denne oversigt, inden du starter importen.
Importen omfatter i den viste version følgende trin:
- 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. Start importen
Klik på Importer. CMS'et påpeger, at importen kan tage op til 15 minutter, og at vinduet ikke må lukkes i mellemtiden.
Bekræft med OK. Herefter starter importen af layoutet.
8. Tjek den succesfulde import
Når importen er afsluttet, vises først en meddelelse om, at layoutet er blevet importeret med succes.
Derefter kan du kontrollere, om alle individuelle behandlingstrin er blevet gennemført med succes. Udførte trin vises med grønt.
9. Kontroller nyt layout på hjemmesiden
Luk importvinduet og vend tilbage til startsiden på din hjemmeside. Umiddelbart efter importen kan den tidligere visning stadig være synlig.
Klik om nødvendigt på Opdater. Derefter bør det importerede layout vises. Sammenlign visningen med det oprindelige layout, som du ønskede at importere.
10. Tjek importerede billeder
Åbn derefter Layout → Import - Billeder. Her kan du kontrollere, hvilke billeder der er overtaget fra det importerede layout eller hvilke der er blevet erstattet af tema-billeder.
CMS'et viser billeder uden oplysninger om licens eller kilde. Gennemgå disse oplysninger omhyggeligt og afgør, om billederne må genbruges eller skal erstattes med passende tema-billeder.
Hvis du ikke ønsker at bruge de eksisterende originalbilleder, kan du vælge passende tema-billeder eller oprette dine egne tema-billeder. Efter udskiftningen bør layoutet kontrolleres visuelt igen.
11. Kontroller layout-HTML
Åbn under Layout sektionen Layout - HTML. Her kan du kontrollere den genererede HTML-struktur fra importen.
I layoutdatabasen ser du den importerede HTML-kode. Kontroller her især, om den grundlæggende struktur er fuldstændig til stede, og om de nødvendige CMS-tags er blevet overført til layoutet.
12. Tjek importerede CSS- og JavaScript-filer
Åbn derefter Layout → Import - CSS JS.
Her ser du de CSS-, JavaScript- og andre ressourcer, der blev fundet ved importen. Hvis en ressource er markeret som Eksterne kilder, vil den ikke blive indlæst udelukkende fra det importerede layout. Sådanne eksterne links bør du kontrollere grundigt før offentliggørelse og håndtere dem passende.
13. Test redigerbarhed i editoren
Åbn den importerede side i editoren og kontroller, om indholdet kan redigeres som forventet. Test især tekst, links, billeder og gentagelige områder.
14. Tjek genererede sektionsskabeloner
Åbn i editoren Indsæt → Side-afsnit. Importen genererer ekstra skabelonkategorier fra det oprindelige layout. Dette inkluderer Layout-header, Layout-main og Layout-footer.
Vælger du f.eks. Layout-main, vises de Main-sektioner, der blev udtrukket fra det oprindelige layout, som individuelle skabeloner. Disse kan du derefter frit indsætte i sider og redigere videre.
15. Slutkontrol
Efter importen bør du kontrollere resultatet fuldstændigt: Layoutvisning, billeder, HTML, CSS/JS, eksterne ressourcer, redigerbarhed og de genererede sideafsnitsskabeloner. Først når disse kontroller er afsluttet, bør du begynde med den videre indholdsmæssige tilpasning af det importerede layout.
FAQ
hvad kunder ofte spørger os
Hvilke layouts kan importeres?
Importen er beregnet til Bootstrap-5-layouts. CMS'et leder efter en passende Bootstrap-CSS-fil samt en index.html eller index.htm på det relevante mappeniveau.
Hvor starter jeg layoutimporten?
Åbn i CMS-området Layout og vælg Import - Layout.
Hvilken mappe bliver ZIP-filen overført til?
Den valgte layout-ZIP-fil vil blive brugt i udviklerområdet bx_Import.
Hvilke Bootstrap-filer bliver genkendt?
Genkendt bliver Bootstrap-CSS-filer som bootstrap.css, bootstrap.min.css og andre filer efter skemaet bootstrap***.css. For denne tutorial skal det være Bootstrap 5.
Hvilke filtyper bliver importeret?
Importerede bliver de HTML-, CSS-, JavaScript-, font-, billede-, video-, lyd-, JSON- og PDF-filtyper, der er opført i tutorialen. Andre filendelser bliver ikke overført.
Hvor lang tid kan importen tage?
Den viste meddelelse nævner en mulig varighed på op til 15 minutter. Importvinduet må ikke lukkes imens.
Hvordan kan jeg se, om importen var succesfuld?
De enkelte importtrin vil blive markeret grønt, og derefter vises meddelelsen om, at layoutet er blevet importeret med succes.
Hvad gør jeg, hvis det gamle layout stadig vises efter importen?
Gå tilbage til startsiden og brug eventuelt Genindlæs. Derefter bør det nyimporterede layout vises.
Hvor kan jeg tjekke de importerede billeder?
Åbn Layout → Import - Billeder. Her kan du kontrollere originalbilleder, temaer samt oplysninger om licens og kilde.
Hvor kontrollerer jeg den importerede HTML-kode?
Under Layout → Layout - HTML kan du gøre dig bekendt med det genererede HTML-grundlag i layout-datasættet.
Hvor kontrollerer jeg CSS- og JavaScript-ressourcer?
Åbn Layout → Import - CSS JS. Her kan du se de ressourcer, der blev erkendt ved importen, samt eventuelle henvisninger til eksterne kilder.
Hvilke sektionsskabeloner genereres fra layoutet?
Importen giver skabeloner i kategorierne Layout-Header, Layout-Main og Layout-Footer.
Hvad skal jeg teste til sidst efter importen?
Tjek layoutets visning, billeder, HTML, CSS/JS, eksterne ressourcer, redigerbarhed i editoren og de genererede sektionsskabeloner.