Bootstrappauksen 5. asettelun tuonti
Tutustu täydelliseen asettelun tuontiin: Bootstrappauksen 5. tarkastuksesta ja ZIP-tiedostosta automaattiseen käsittelyyn ja tuodun asettelun tarkastukseen editorissa.
Oppaan tavoite
Opit, kuinka voit tuoda Bootstrappauksen 5. asettelun ZIP-tiedostona bluetronix CMS:ään, tarkistaa tuonnin ja jälkeenpäin tarkistaa asettelukuvat, asettelun HTML:n, CSS/JS:n sekä luodut sivuosamallit.
Tärkeää: Käytä tuontiin Bootstrappauksen 5. asettelua, joka täyttää alla kuvatut vaatimukset. Varsinainen tuonti voi kestää jopa 15 minuuttia.
1. Tuo - Asettelua avataan
Avaa CMS:ssä kohta Asettelu ja valitse sitten Tuo - Asettelu.
2. Valitse ZIP-tiedosto
Ikkuressa Tuo - Asettelu napsauta Valitse ZIP-tiedosto. Tämän toiminnon kautta avaat tiedostohallinnan ja voit valita Bootstrappauksen 5. asettelusi ZIP-tiedoston.
Lisäksi käytettävissäsi on teema-kuvia, joita voidaan myöhemmin käyttää asettelukuvien sijasta, jos alkuperäisiä kuvia ei haluta käyttää uudelleen.
3. Avaa kansio bx_Import
Tiedostonhallinnassa avaa kehittäjähakemisto bx_Import. Tätä hakemistoa käytetään tuonnin ZIP-tiedoston toimittamiseen.
4. Lataa Layout.zip
Lataa nyt oma ZIP-tiedostosi hakemistoon bx_Import. Esimerkissämme tiedoston nimi on Layout.zip. Valitse sitten tämä tiedosto asettelun tuontia varten.
5. Bootstrappauksen 5. asettelun vaatimukset
CMS tarkistaa tuonnin yhteydessä, voidaanko ZIP-arkistosta löytää sopiva Bootstrap-5 -rakenne. Täydelliset vaatimukset ja tuetut tiedostopäätteet löytyvät seuraavasta teknisestä yleiskatsauksesta.
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. Tarkista tuontivaiheet
Kun olet valinnut ZIP-tiedoston, CMS näyttää teematietojen alla eri vaiheet, jotka suoritetaan tuonnin aikana. Tarkista tämä yleiskatsaus ennen tuonnin aloittamista.
Tuonti sisältää seuraavat vaiheet esitettynä:
- 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. Aloita tuonti
Napsauta Tuoda. CMS huomauttaa, että tuonti voi kestää jopa 15 minuuttia ja ikkunaa ei saa sulkea tänä aikana.
Vahvista ilmoitus napsauttamalla OK. Tämän jälkeen asettelun tuonti alkaa.
8. Tarkista onnistunut tuonti
Tuonnin päätyttyä ensin näkyy ilmoitus, että asettelu on tuotu onnistuneesti.
Voit sitten tarkistaa, onko kaikki yksittäiset käsittelyvaiheet suoritettu onnistuneesti. Onnistuneesti suoritettuja vaiheita merkitään vihreällä.
9. Tarkista uusi asettelu verkkosivustolla
Sulje tuonti-ikkuna ja palaa verkkosivustosi etusivulle. Välittömästi tuonnin jälkeen voi aluksi näkyä edellinen esitys.
Napsauta tarvittaessa Uudelleenlataa. Tämän jälkeen tuotu asettelu pitäisi näkyä. Vertaa esitystä alkuperäiseen asetteluun, jonka halusit tuoda.
10. Tarkista tuodut kuvat
Avaa sitten Asettelu → Tuonti - Kuvia. Siellä voit tarkistaa, mitkä kuvat on vastaanotettu tuodusta asettelusta tai onko ne vaihdettu teematietoihin.
CMS näyttää kuvat, joilta puuttuu tiedot lisenssistä tai lähteestä. Tarkista nämä tiedot huolellisesti ja päätä, voidaanko kuvia käyttää edelleen vai onko ne korvattava sopivilla teematiedoilla.
Jos et halua käyttää olemassa olevia alkuperäisiä kuvia, voit valita sopivia teematietoja tai luoda omia teematietoja. Vaihdon jälkeen asettelu tulisi tarkistaa visuaalisesti uudelleen.
11. Tarkista asettelun HTML
Avaa Asettelu -osassa Asettelu - HTML. Siellä voit tarkistaa tuonnista luodun HTML-perusrakenteen.
Asettelu-tietokannassa näet tuodun HTML-koodin. Tarkista erityisesti, onko perusrakenne täysin olemassa ja ovatko tarvittavat CMS-tunnukset otettu mukaan asetteluun.
12. Tarkista tuodut CSS- ja JavaScript-tiedostot
Avaa sitten Asettelu → Tuonti - CSS JS.
Täältä näet CSS-, JavaScript- ja muut resurssit, jotka tunnistettiin tuonnissa. Jos resurssi on merkitty Ulkona oleviksi lähteiksi, sitä ei ladattu vain paikallisesti tuodusta asettelusta. Tällaiset ulkoiset linkit kannattaa tarkistaa huolellisesti ennen julkaisua ja käsitellä asianmukaisesti.
13. Testaa muokattavuutta editorissa
Avaa tuotu sivu editorissa ja tarkista, voitko muokata sisältöjä kuten on suunniteltu. Testaa erityisesti tekstejä, linkkejä, kuvia ja toistettavia alueita.
14. Tarkista luodut sivuosamallit
Avaa editorissa Lisää → Sivun osa. Tuonti luo alkuperäisestä asettelusta lisäpohjakategorioita. Näitä ovat Asettelu-otsikko, Asettelu-pääosa ja Asettelu-alatunniste.
Jos valitset esimerkiksi Asettelu-pääosa, alkuperäisestä asettelusta eristetyt pääosat näkyvät erillisinä malleina. Voit sitten liittää nämä vapaasti sivuille ja muokata niitä edelleen.
15. Lopputarkastus
Tuonnin jälkeen sinun tulee tarkistaa tulos täysin: asettelun esitys, kuvat, HTML, CSS/JS, ulkoiset resurssit, muokattavuus ja luodut sivuosamallit. Vasta näiden tarkastusten jälkeen voit alkaa tehdä sisältömuutoksia tuodulle asettelulle.
UKK
mitä asiakkaat meiltä usein kysyvät
Mitä asetteluja voi tuoda?
Tuonti on tarkoitettu Bootstrap-5-asetteluja varten. CMS etsii sopivaa Bootstrap-CSS-tiedostoa sekä index.html tai index.htm -tiedostoa vastaavalta kansiotasolta.
Mistä aloitan asettelun tuonnin?
Avaa CMS:ssä osio Layout ja valitse Tuonti - Layout.
Mihin kansioon ZIP-tiedosto otetaan?
Valittua Layout-ZIP-tiedostoa käytetään kehittäjäalueella bx_Import.
Mitä Bootstrap-tiedostoja tunnistetaan?
Tunnistetaan Bootstrap-CSS-tiedostoja kuten bootstrap.css, bootstrap.min.css ja muita tiedostoja kaavalla bootstrap***.css. Tämän oppaan osalta se on oltava Bootstrap 5.
Mitä tiedostotyyppejä tuodaan?
Tuodaan oppaassa luetellut HTML-, CSS-, JavaScript-, fontti-, kuva-, video-, ääni-, JSON- ja PDF-tiedostotyypit. Muita tiedostopäätteitä ei oteta vastaan.
Kuinka kauan tuonti voi kestää?
Näytettävä ilmoitus mainitsee mahdolliseksi kestoksi jopa 15 minuuttia. Tuonti-ikkunaa ei saa sulkea sinä aikana.
Mistä tiedän, että tuonti on onnistunut?
Yksittäiset tuontivaiheet merkitään vihreällä ja sen jälkeen näkyy ilmoitus, että layout on tuotu onnistuneesti.
Mitä teen, jos vanha layout näkyy edelleen tuonnin jälkeen?
Palaa etusivulle ja käytä tarvittaessa Uudelleenlataus. Sen jälkeen pitäisi näkyä uudelleen tuotu layout.
Missä tarkistan tuodut kuvat?
Avaa Layout → Tuonti - Kuva. Siellä voit tarkistaa alkuperäiset kuvat, teeman kuvat sekä tiedot lisenssistä ja lähteestä.
Missä tarkistan tuodun HTML-näkymän?
Otsikossa Layout → Layout - HTML voit tarkistaa luodun HTML-perusrakenteen layout-tietueessa.
Missä tarkistan CSS- ja JavaScript-resurssit?
Avaa Layout → Tuonti - CSS JS. Siellä näet tuonnin yhteydessä tunnistetut resurssit ja mahdolliset viittaukset ulkoisiin lähteisiin.
Mitä sivuosamalleja luodaan layoutista?
Tuonti tarjoaa malleja luokissa Layout-Otsikko, Layout-Pää ja Layout-Jalan.
Mitä pitäisi testata tuonnin jälkeen?
Tarkista layoutin esitys, kuvat, HTML, CSS/JS, ulkoiset resurssit, muokattavuus editorissa ja luodut sivuosamallit.