Importere Bootstrap-5-layout

Målet med veiledningen

Du lærer hvordan du importer et Bootstrap-5-layout som en ZIP-fil til bluetronix CMS, sjekker importen, og deretter kontrollerer layoutbilder, layout-HTML, CSS/JS samt de genererte malene for seksjoner.

Viktig: Bruk et Bootstrap-5-layout som oppfyller kravene beskrevet nedenfor for importen. Selve importen kan ta opptil 15 minutter.

1. Import - Åpne layout

Åpne Layout i CMS og velg deretter Import - Layout.

2. Velg ZIP-fil

I vinduet Import - Layout klikker du på Velg ZIP-fil. Gjennom denne funksjonen åpner du filbehandleren og kan velge ZIP-filen til ditt Bootstrap-5-layout.

I tillegg har du tilgjengelige tematisk bilder som senere kan brukes som erstatning for layoutbilder, hvis originalbildene ikke skal brukes videre.

3. Åpne mappen bx_Import

I filbehandleren åpner du deretter utviklermappen bx_Import. Denne mappen brukes til å levere ZIP-filen som skal importeres.

4. Last opp Layout.zip

Last nå opp din egen ZIP-fil til mappen bx_Import. I vårt eksempel heter filen Layout.zip. Velg deretter denne filen for layout-import.

5. Forutsetninger for Bootstrap-5-layout

CMS sjekker før importen om det finnes en passende Bootstrap-5-struktur i ZIP-arkivet. Du finner de fullstendige kravene og støttede filtyper i den følgende tekniske oversikten.

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. Kontrollere importtrinn

Når du har valgt ZIP-filen, viser CMS under de tematisk bildene de enkelte trinnene som utføres under importen. Sjekk denne oversikten før du starter importen.

Importen består av følgende trinn i den viste versjonen:

1. Layout einlesen: ZIP-Datei entpacken und auf ein gültiges Bootstrap-5-Layout prüfen.
2. HTML-Grundgerüst extrahieren: Standard-Layout in der Datenbank 00_layout erstellen.
3. Kopfzeile / Fußzeile extrahieren: Header und Footer ermitteln und /bx_Header.html sowie /bx_Footer.html neu erstellen.
4. index.html aus Layout erstellen: Inhalt der Startseite ermitteln und /index.html neu erstellen.
5. Seiten-Abschnitte extrahieren: Header, Main-Sections und Footer als Layout-Section-Dateien erzeugen.
6. Bilder ersetzen: Layout-Bilder bei Bedarf durch CMS-Themenbilder ersetzen.
7. CSS / JS importieren: gefundene CSS- und JS-Dateien in den Main-Ordner übernehmen.

7. Start importen

Klikk på Importer. CMS påpeker at importen kan ta opptil 15 minutter, og vinduet må ikke lukkes i løpet av denne tiden.

Bekreft meldingen med OK. Deretter starter importen av layouten.

8. Sjekk vellykket import

Etter at importen er fullført, vises først meldingen om at layouten har blitt importert med suksess.

Deretter kan du kontrollere om alle individuelle prosesseringsskritt har blitt fullført med suksess. Vel gjennomførte trinn vil bli merket med grønt.

9. Kontroller nytt layout på nettsiden

Lukk importvinduet og gå tilbake til startsiden på nettstedet ditt. Rett etter importen kan den tidligere visningen fortsatt være synlig.

Klikk om nødvendig på Last inn igjen. Deretter bør den importerete layouten vises. Sammenlign visningen med det opprinnelige layoutet du ønsket å importere.

10. Sjekk importerte bilder

Åpne deretter Layout → Import - Bilder. Der kan du kontrollere hvilke bilder fra det importerete layoutet som blir tatt med eller erstattet med tematiske bilder.

CMS viser bilder der informasjon om lisens eller kilde mangler. Sjekk disse meldingene nøye og avgjør om bildene kan brukes videre eller skal erstattes med passende tematiske bilder.

Hvis du ikke ønsker å bruke de originale bildene, kan du velge passende tematiske bilder eller lage dine egne tematiske bilder. Etter erstatning bør layouten kontrolleres visuelt igjen.

11. Kontroller layout-HTML

Åpne Layout i delen Layout - HTML. Der kan du kontrollere HTML-grunnstrukturen som er laget fra importen.

I layoutdatabasen ser du den importerete HTML-koden. Sjekk spesielt om grunnstrukturen er fullstendig til stede og om de nødvendige CMS-taggene er inkludert i layouten.

12. Sjekk importerte CSS- og JavaScript-filer

Åpne deretter Layout → Import - CSS JS.

Her ser du CSS-, JavaScript- og andre ressurser som ble oppdaget under importen. Hvis en ressurs er merket som Eksterne kilder, vil den ikke bli lastet inn utelukkende lokalt fra den importerte layouten. Slike eksterne koblinger bør du sjekke nøye før publisering og håndtere dem deretter.

13. Teste redigerbarhet i editoren

Åpne den importerte siden i redigereren og sjekk om innholdet kan redigeres som forventet. Test spesielt tekster, lenker, bilder og gjentakbare områder.

14. Sjekk de genererte malene for seksjoner

Åpne i redigereren Sett inn → Side-område. Importen genererer ekstra malkategorier fra den opprinnelige layouten. Dette inkluderer Layout-header, Layout-hoveddel og Layout-bunntekst.

Velger du for eksempel Layout-hoveddel, vises de utvunnede hovedseksjonene fra den opprinnelige layouten som separate maler. Du kan deretter fritt sette dem inn i sider og videreføre redigeringen.

15. Sluttkontroll

Etter importen bør du kontrollere resultatet grundig: Layoutpresentasjon, bilder, HTML, CSS/JS, eksterne ressurser, redigerbarhet og de genererte sideområde-malene. Først når disse sjekkene er fullført, bør du begynne med den videre innholdsmessige tilpasningen av den importerte layouten.