Εισαγωγή διάταξης Bootstrap-5
Μάθε για την πλήρη εισαγωγή διάταξης: από τον έλεγχο Bootstrap-5 και το αρχείο ZIP μέχρι την αυτόματη επεξεργασία και τον έλεγχο της εισαγόμενης διάταξης στον επεξεργαστή.
Σκοπός του σεμιναρίου
Μαθαίνεις πώς να εισάγεις ένα Bootstrap-5 layout ως αρχείο ZIP στο bluetronix CMS, να ελέγξεις την εισαγωγή και στη συνέχεια να ελέγξεις τις εικόνες του layout, το HTML του layout, CSS/JS και τα δημιουργημένα πρότυπα σελίδων.
Σημαντικό: Χρησιμοποίησε ένα Bootstrap-5 layout για την εισαγωγή που πληροί τις προϋποθέσεις που περιγράφονται παρακάτω. Η πραγματική εισαγωγή μπορεί να διαρκέσει έως 15 λεπτά.
1. Εισαγωγή - Άνοιγμα διάταξης
Άνοιξε στον τομέα του CMS το τμήμα Layout και στη συνέχεια διάλεξε Εισαγωγή - Layout.
2. Επιλογή αρχείου ZIP
Στο παράθυρο Εισαγωγή - Layout κάνε κλικ στο Επιλογή αρχείου ZIP. Μέσω αυτής της λειτουργίας ανοίγει ο διαχειριστής αρχείων και μπορείς να επιλέξεις το αρχείο ZIP του Bootstrap-5 layout σου.
Επιπλέον, διατίθενται εικόνες θεμάτων που μπορούν να χρησιμοποιηθούν αργότερα ως αντικατάσταση των εικόνων layout, αν δεν θέλεις να χρησιμοποιήσεις περαιτέρω τις αρχικές εικόνες.
3. Άνοιγμα φακέλου bx_Import
Στον διαχειριστή αρχείων, αφού ανοίξεις τον φάκελο προγραμματιστή bx_Import. Αυτός ο φάκελος χρησιμοποιείται για την παροχή του αρχείου ZIP που θα εισαχθεί.
4. Μεταφόρτωση layout.zip
Ανέβασε τώρα το δικό σου αρχείο ZIP στον φάκελο bx_Import. Στο παράδειγμά μας, το αρχείο ονομάζεται Layout.zip. Στη συνέχεια, διάλεξε αυτό το αρχείο για την εισαγωγή του layout.
5. Προϋποθέσεις για το Bootstrap-5-Layout
Το CMS ελέγχει πριν από την εισαγωγή αν μπορεί να βρει μια κατάλληλη δομή Bootstrap-5 στο ZIP αρχείο. Οι πλήρεις προϋποθέσεις και οι υποστηριζόμενες καταλήξεις αρχείων καταγράφονται στην παρακάτω τεχνική επισκόπηση.
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. Έλεγχος βημάτων εισαγωγής
Αφού επιλέξεις το αρχείο ZIP, το CMS εμφανίζει κάτω από τις εικόνες θεμάτων τα διάφορα βήματα που θα εκτελούνται κατά τη διάρκεια της εισαγωγής. Έλεγξε αυτήν την επισκόπηση πριν ξεκινήσεις την εισαγωγή.
Η εισαγωγή περιλαμβάνει στην εμφανιζόμενη έκδοση τα εξής βήματα:
- 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. Έναρξη εισαγωγής
Κάνε κλικ στο Εισαγωγή. Το CMS επισημαίνει ότι η εισαγωγή μπορεί να διαρκέσει έως 15 λεπτά και το παράθυρο δεν πρέπει να κλείσει κατά τη διάρκεια αυτού.
Επιβεβαίωσε την προειδοποίηση με OK. Στη συνέχεια, ξεκινά η εισαγωγή του layout.
8. Έλεγχος επιτυχούς εισαγωγής
Μετά την ολοκλήρωση της εισαγωγής, εμφανίζεται αρχικά το μήνυμα ότι το layout εισήχθη με επιτυχία.
Στη συνέχεια, μπορείς να ελέγξεις αν όλα τα μεμονωμένα βήματα επεξεργασίας ολοκληρώθηκαν με επιτυχία. Τα επιτυχώς εκτελούμενα βήματα επισημαίνονται με πράσινο.
9. Έλεγχος νέου layout στην ιστοσελίδα
Κλείσε το παράθυρο εισαγωγής και γύρισε στην αρχική σελίδα της ιστοσελίδας σου. Άμεσα μετά την εισαγωγή, μπορεί αρχικά να είναι εμφανής η προηγούμενη εμφάνιση.
Κάνε κλικ στο Reload αν χρειαστεί. Ακολούθως, θα πρέπει να εμφανιστεί η εισαγόμενη διάταξη. Σύγκρινε την εμφάνιση με την αρχική διάταξη που ήθελες να εισάγεις.
10. Έλεγχος εισαγόμενων εικόνων
Άνοιξε στη συνέχεια Layout → Import - Bilder. Εκεί μπορείς να ελέγξεις ποιες εικόνες από την εισαγόμενη διάταξη έχουν υιοθετηθεί ή έχουν αντικατασταθεί από εικόνες θεμάτων.
Το CMS εμφανίζει εικόνες για τις οποίες λείπουν πληροφορίες σχετικά με την άδεια ή την πηγή. Έλεγξε αυτές τις επισημάνσεις προσεκτικά και αποφάσισε εάν οι εικόνες μπορούν να χρησιμοποιηθούν περαιτέρω ή αν πρέπει να αντικατασταθούν με κατάλληλες εικόνες θεμάτων.
Αν δεν θέλεις να χρησιμοποιήσεις τις υπάρχουσες αρχικές εικόνες, μπορείς να επιλέξεις κατάλληλες εικόνες θεμάτων ή να δημιουργήσεις δικές σου. Μετά την αντικατάσταση, θα πρέπει να ελεγθεί ξανά η διάταξη οπτικά.
11. Έλεγχος HTML layout
Άνοιξε στην καρτέλα Layout την ενότητα Layout - HTML. Εκεί μπορείς να ελέγξεις τη βασική δομή HTML που παραχθηκε από την εισαγωγή.
Στη βάση δεδομένων διάταξης βλέπεις τον εισαγόμενο κώδικα HTML. Έλεγξε εδώ ιδιαιτέρως αν η βασική δομή είναι πλήρως παρούσα και αν οι απαραίτητες ετικέτες CMS έχουν ενσωματωθεί στη διάταξη.
12. Έλεγχος εισαγόμενων αρχείων CSS και JavaScript
Άνοιξε στη συνέχεια Layout → Import - CSS JS.
Εδώ βλέπεις τους πόρους CSS, JavaScript και άλλους που αναγνωρίστηκαν κατά την εισαγωγή. Αν ένας πόρος επισημαίνεται ως Εξωτερικές Πηγές, δεν φορτώνεται αποκλειστικά από τη τοπική εισαγμένη διάταξη. Αυτούς τους εξωτερικούς συνδέσμους θα πρέπει να τους ελέγξεις στοχευμένα πριν από τη δημοσίευση και να τους διαχειριστείς κατάλληλα.
13. Δοκιμή επεξεργασίας στον επεξεργαστή
Άνοιξε την εισαγόμενη σελίδα στον επεξεργαστή και έλεγξε αν οι περιεχόμενες όπως προγραμματίζεται μπορούν να επεξεργαστούν. Δοκίμασε ειδικά κείμενα, συνδέσμους, εικόνες και επαναλαμβανόμενες περιοχές.
14. Έλεγχος παραπάνω σελίδων
Άνοιξε στον επεξεργαστή Εισαγωγή → Τμήμα Σελίδας. Η εισαγωγή δημιουργεί επιπλέον κατηγορίες προτύπων από την αρχική διάταξη. Αυτές περιλαμβάνουν Layout-Header, Layout-Main και Layout-Footer.
Επιλέγοντας π.χ. Layout-Main, οι κύριες ενότητες που έχουν εξαγγελθεί από την αρχική διάταξη εμφανίζονται ως ξεχωριστά πρότυπα. Αυτά μπορείς στη συνέχεια να τα ενσωματώσεις ελεύθερα σε σελίδες και να τα επεξεργαστείς περαιτέρω.
15. Τελικός έλεγχος
Μετά την εισαγωγή, θα πρέπει να ελέγξει το αποτέλεσμα εντελώς: εμφάνιση διάταξης, εικόνες, HTML, CSS/JS, εξωτερικοί πόροι, επεξεργασιμότητα και τα δημιουργημένα πρότυπα τμήματος σελίδας. Μόνο όταν ολοκληρωθούν αυτές οι έλεγχοι, θα πρέπει να αρχίσεις τις περαιτέρω περιεχόμενα προσαρμογές της εισαγόμενης διάταξης.
Συχνές Ερωτήσεις
τι ρωτούν συχνά οι πελάτες μας
Ποιες διατάξεις μπορούν να εισαχθούν;
Η εισαγωγή είναι προγραμματισμένη για διατάξεις Bootstrap-5. Το CMS αναζητά ένα κατάλληλο αρχείο CSS Bootstrap καθώς και ένα index.html ή index.htm στο αντίστοιχο επίπεδο φακέλου.
Πού ξεκινώ την εισαγωγή διάταξης;
Άνοιξε στο CMS την ενότητα Layout και επίλεξε Import - Layout.
Σε ποιον φάκελο θα εισαχθεί το αρχείο ZIP;
Το επιλεγμένο αρχείο ZIP διάταξης θα χρησιμοποιηθεί στην ενότητα προγραμματιστών bx_Import.
Ποια αρχεία Bootstrap αναγνωρίζονται;
Αναγνωρίζονται αρχεία CSS Bootstrap όπως bootstrap.css, bootstrap.min.css και άλλα αρχεία σύμφωνα με το σχήμα bootstrap***.css. Για αυτό το εγχειρίδιο θα πρέπει να πρόκειται για Bootstrap 5.
Ποιοι τύποι αρχείων εισάγονται;
Εισάγονται οι τύποι αρχείων HTML, CSS, JavaScript, Font, εικόνας, βίντεο, ήχου, JSON και PDF που αναφέρονται στο εγχειρίδιο. Άλλες ενότητες αρχείων δεν υιοθετούνται.
Πόσο καιρό μπορεί να διαρκέσει η εισαγωγή;
Η εμφανιζόμενη ένδειξη αναφέρει πιθανή διάρκεια έως 15 λεπτών. Το παράθυρο εισαγωγής δεν θα πρέπει να κλείνει κατά τη διάρκεια αυτή.
Πώς αναγνωρίζω μια επιτυχημένη εισαγωγή;
Τα διάφορα βήματα εισαγωγής σημειώνονται με πράσινο χρώμα και στη συνέχεια εμφανίζεται το μήνυμα ότι το layout εισήχθη επιτυχώς.
Τι κάνω αν μετά την εισαγωγή εμφανίζεται ακόμη το παλιό layout;
Επέστρεψε στην αρχική σελίδα και χρησιμοποίησε το Reload αν χρειαστεί. Μετά, θα πρέπει να εμφανιστεί το νέο εισαγόμενο layout.
Πού ελέγχω τις εισαγόμενες εικόνες;
Άνοιξε το Layout → Import - Bilder. Εκεί μπορείς να ελέγξεις τις πρωτότυπες εικόνες, τις θεματικές εικόνες καθώς και τις πληροφορίες για άδεια και πηγή.
Πού ελέγχω τον εισαγόμενο κώδικα HTML;
Κάτω από το Layout → Layout - HTML μπορείς να ελέγξεις τη δημιουργημένη βάση του HTML στο αρχείο layout.
Πού ελέγχω τους πόρους CSS και JavaScript;
Άνοιξε το Layout → Import - CSS JS. Εκεί βλέπεις τους πόρους που αναγνωρίστηκαν κατά την εισαγωγή και πιθανές πληροφορίες για εξωτερικές πηγές.
Ποιες πρότυπες ενότητες σελίδας παράγονται από το layout;
Η εισαγωγή παρέχει πρότυπα στις κατηγορίες Layout-Header, Layout-Main και Layout-Footer.
Τι θα πρέπει να ελέγξω μετά την εισαγωγή;
Έλεγξε την εμφάνιση του layout, τις εικόνες, το HTML, το CSS/JS, τους εξωτερικούς πόρους, την επεξεργασιμότητα στον επεξεργαστή και τα παραγόμενα πρότυπα ενότητας σελίδας.