Importer la mise en page Bootstrap-5

Objectif du tutoriel

Vous apprendrez à importer un layout Bootstrap-5 en tant que fichier ZIP dans le CMS bluetronix, à vérifier l'importation, puis à contrôler les images du layout, le HTML du layout, le CSS/JS ainsi que les modèles de sections créés.

Important : Utilisez un layout Bootstrap-5 pour l'importation qui respecte les conditions décrites ci-dessous. L'importation proprement dite peut prendre jusqu'à 15 minutes.

1. Importer - Ouvrir le layout

Ouvrez dans le CMS la section Layout puis sélectionnez Importer - Layout.

2. Sélectionner le fichier ZIP

Dans la fenêtre Importer - Layout, cliquez sur Sélectionner le fichier ZIP. Cette fonction ouvre le gestionnaire de fichiers et vous permet de sélectionner le fichier ZIP de votre layout Bootstrap-5.

Des images de thème sont également disponibles, qui peuvent être utilisées ultérieurement comme remplacement pour les images de layout si les images originales ne doivent pas être réutilisées.

3. Ouvrir le dossier bx_Import

Dans le gestionnaire de fichiers, ouvrez ensuite le dossier de développement bx_Import. Ce dossier est utilisé pour la mise à disposition du fichier ZIP à importer.

4. Télécharger Layout.zip

Téléchargez maintenant votre propre fichier ZIP dans le dossier bx_Import. Dans notre exemple, le fichier s'appelle Layout.zip. Sélectionnez ensuite ce fichier pour l'importation du layout.

5. Conditions requises pour le layout Bootstrap-5

Le CMS vérifie avant l'importation si une structure Bootstrap-5 appropriée peut être trouvée dans l'archive ZIP. Les conditions complètes et les extensions de fichiers prises en charge se trouvent dans le résumé technique suivant.

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. Vérifier les étapes d'importation

Après avoir sélectionné le fichier ZIP, le CMS affiche en dessous des images de thème les différentes étapes qui seront exécutées pendant l'importation. Vérifiez cet aperçu avant de démarrer l'importation.

L'importation comprend dans la version affichée les étapes suivantes :

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. Démarrer l'importation

Clique sur Importer. Le CMS indique que l'importation peut prendre jusqu'à 15 minutes et que la fenêtre ne doit pas être fermée pendant ce temps.

Confirme l'avis avec OK. Ensuite, l'importation de la mise en page commence.

8. Vérifier l'importation réussie

Après l'achèvement de l'importation, un message s'affiche d'abord pour indiquer que la mise en page a été importée avec succès.

Ensuite, tu peux vérifier si toutes les étapes de traitement individuelles ont été menées à bien. Les étapes réussies sont marquées en vert.

9. Contrôler le nouveau layout sur le site web

Ferme la fenêtre d'importation et retourne à la page d'accueil de ton site web. Juste après l'importation, il est possible que l'affichage précédent soit encore visible.

Clique sur Rafraîchir si besoin. Ensuite, la mise en page importée devrait s'afficher. Compare l'affichage avec la mise en page originale que tu voulais importer.

10. Vérifier les images importées

Ouvre ensuite Mise en page → Importer - Images. Là, tu peux vérifier quelles images de la mise en page importée ont été prises ou remplacées par des images thématiques.

Le CMS affiche des images pour lesquelles il manque des informations sur la licence ou la source. Vérifie ces avis attentivement et décide si les images peuvent être réutilisées ou doivent être remplacées par des images thématiques appropriées.

Si tu ne souhaites pas utiliser les images originales existantes, tu peux choisir des images thématiques appropriées ou créer tes propres images thématiques. Après le remplacement, la mise en page doit être à nouveau vérifiée visuellement.

11. Vérifier le HTML du layout

Ouvre sous Mise en page la section Mise en page - HTML. Là, tu peux vérifier la structure HTML de base générée à partir de l'importation.

Dans la base de données de mise en page, tu vois le code HTML importé. Vérifie ici en particulier si la structure de base est complète et si les balises CMS nécessaires ont été intégrées dans la mise en page.

12. Vérifier les fichiers CSS et JavaScript importés

Ouvre ensuite Mise en page → Importer - CSS JS.

Ici, tu vois les ressources CSS, JavaScript et d'autres qui ont été reconnues lors de l'importation. Si une ressource est marquée comme Sources externes, elle n'est pas chargée uniquement localement à partir de la mise en page importée. Ces liens externes doivent être vérifiés soigneusement avant la publication et traités en conséquence.

13. Tester l'éditabilité dans l'éditeur

Ouvre la page importée dans l'éditeur et vérifie si les contenus peuvent être modifiés comme prévu. Teste notamment les textes, les liens, les images et les zones répétables.

14. Vérifier les modèles de sections créés

Ouvre dans l'éditeur Insérer → Section de page. L'importation crée des catégories de modèles supplémentaires à partir de la mise en page d'origine. Celles-ci incluent En-tête de mise en page, Mise en page principale et Pied de page de mise en page.

Si tu choisis par exemple Mise en page principale, les sections principales extraites de la mise en page d'origine apparaissent comme des modèles individuels. Tu peux ensuite les insérer librement dans les pages et les modifier.

15. Contrôle final

Après l'importation, tu devrais vérifier complètement le résultat : affichage de la mise en page, images, HTML, CSS/JS, ressources externes, capacité de modification et modèles de sections de page générés. Ce n'est qu'une fois ces contrôles terminés que tu devrais commencer à ajuster le contenu de la mise en page importée.