Importera Bootstrap-5-layout

Målet med guiden

Du lär dig hur du importerar en Bootstrap-5-layout som en ZIP-fil till bluetronix CMS, kontrollerar importen och säkerställer att layoutbilder, layout-HTML, CSS/JS samt de skapade sidavsnittsmallarna kontrolleras.

Viktigt: Använd en Bootstrap-5-layout för import som uppfyller de angivna kraven nedan. Själva importen kan ta upp till 15 minuter.

1. Import - Öppna layout

Öppna området Layout i CMS och välj sedan Import - Layout.

2. Välj ZIP-fil

I fönstret Import - Layout klickar du på Välj ZIP-fil. Med den här funktionen öppnar du filhanteraren och kan välja ZIP-filen för din Bootstrap-5-layout.

Dessutom finns det temabilder tillgängliga som senare kan användas som ersättning för layoutbilder om originalbilderna inte ska användas vidare.

3. Öppna mappen bx_Import

I filhanteraren öppnar du nästa utvecklarkatalog bx_Import. Denna mapp används för att tillhandahålla den ZIP-fil som ska importeras.

4. Ladda upp Layout.zip

Ladda nu upp din egen ZIP-fil i mappen bx_Import. I vårt exempel kallas filen Layout.zip. Välj sedan denna fil för layoutimport.

5. Förutsättningar för Bootstrap-5-layouten

CMS:et kontrollerar innan importen om det finns en lämplig Bootstrap-5-struktur i ZIP-arkivet. De fullständiga kraven och de stödda filändelserna hittar du i den följande tekniska översikten.

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. Kontrollera importstegen

När du har valt ZIP-filen visar CMS:et stegen som utförs under importen under temabilderna. Kontrollera denna översikt innan du startar importen.

Importen omfattar i den visade versionen följande steg:

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. Starta importen

Klicka på Importera. CMS:et påpekar att importen kan ta upp till 15 minuter och att fönstret inte får stängas under tiden.

Bekräfta med OK. Därefter startar layoutens import.

8. Kontrollera framgångsrik import

När importen är klar visas först meddelandet att layouten har importerats framgångsrikt.

Efter det kan du kontrollera om alla enskilda bearbetningssteg har slutförts framgångsrikt. Framgångsrikt genomförda steg markeras i grönt.

9. Kontrollera den nya layouten på webbplatsen

Stäng importfönstret och återvänd till startsidan på din webbplats. Direkt efter importen kan den tidigare presentationen fortfarande vara synlig.

Klicka vid behov på Ladda om. Därefter bör den importerade layouten visas. Jämför presentationen med den ursprungliga layouten som du ville importera.

10. Kontrollera importerade bilder

Öppna sedan Layout → Import - Bilder. Där kan du kontrollera vilka bilder från den importerade layouten som tas över eller ersätts med temabilder.

CMS:et visar bilder där uppgifter om licens eller källa saknas. Kontrollera dessa anmärkningar noggrant och bestäm om bilderna får användas vidare eller ska ersättas med lämpliga temabilder.

Om du inte vill använda de befintliga originalbilderna kan du välja passande temabilder eller skapa egna temabilder. Efter ersättningen bör layouten kontrolleras visuellt igen.

11. Kontrollera layout-HTML

Öppna under Layout området Layout - HTML. Där kan du kontrollera den HTML-grundstruktur som skapades från importen.

I layoutdatabasen ser du den importerade HTML-koden. Kontrollera här speciellt om grundstrukturen är komplett och om de nödvändiga CMS-taggarna har överförts till layouten.

12. Kontrollera importerade CSS- och JavaScript-filer

Öppna sedan Layout → Import - CSS JS.

Här ser du CSS-, JavaScript- och andra resurser som har upptäckts vid importen. Om en resurs är markerad som Externa källor kommer den inte att laddas lokalt enbart från den importerade layouten. Sådana externa länkar bör du noggrant kontrollera och hantera innan publicering.

13. Testa redigerbarhet i editorn

Öppna den importerade sidan i editorn och kontrollera om innehållet kan redigeras som förväntat. Testa särskilt texter, länkar, bilder och repetitiva områden.

14. Kontrollera skapade sidavsnittsmallar

Öppna i editorn Infoga → Sidesektion. Importen skapar ytterligare mallkategorier från den ursprungliga layouten. Dessa inkluderar Layout-Huvud, Layout-Huvuddel och Layout-Fot.

Väljer du till exempel Layout-Huvuddel kommer de Main-Sections som har extraherats från den ursprungliga layouten att visas som enskilda mallar. Dessa kan du sedan fritt infoga i sidor och redigera vidare.

15. Slutkontroll

Efter importen bör du kontrollera resultatet i sin helhet: Layoutvisning, bilder, HTML, CSS/JS, externa resurser, redigerbarhet och de skapade sidor-sektionsmallarna. Först när dessa kontroller är slutförda bör du börja med den ytterligare innehållsanpassningen av den importerade layouten.