1. Casa
  2. utilizzando Blocs
  3. Blocs
  4. Migrare a Blocs Progetto V2 a Blocs V5
  1. Casa
  2. Iniziamo
  3. Migrare a Blocs Progetto V2 a Blocs V5
  1. Casa
  2. Consigli
  3. Migrare a Blocs Progetto V2 a Blocs V5

Migrare a Blocs Progetto V2 a Blocs V5

Una delle maggiori differenze in Blocs V5 rispetto a Blocs V2 è il fatto Blocs non crea più siti web utilizzando Bootstrap 3 e invece utilizza il nuovo e migliorato Bootstrap 4 framework.

Strumento di migrazione

Progetti creati in Blocs V2 usa il Bootstrap 3 framework il che ovviamente non è l'ideale, poiché Bootstrap 3 e 4 sono abbastanza diversi. Tuttavia, Blocs V5 viene fornito con uno strumento di migrazione integrato progettato per aiutare la conversione Blocs Progetti V2 (Bootstrap 3) in Blocs Progetti V5 (Bootstrap 4) con il minimo turbamento possibile.

Durante la migrazione di un file Blocs progetto V2 (Bootstrap 3) a a Blocs Progetto V5 (Bootstrap 4) sei sicuro di notare che vari aspetti del tuo sito potrebbero richiedere ulteriore attenzione, ciò è dovuto a una serie di fattori che approfondiremo in questo post.

Ricorda anche Blocs V2 può funzionare a fianco Blocs V5, quindi se hai siti o progetti di grandi dimensioni con scadenze, evita di migrarli a meno che tu non abbia il tempo di apportare modifiche manuali sostanziali che potrebbero essere necessarie.

Esegui il backup del tuo progetto

La cosa più importante da ricordare prima di migrare un progetto da Blocs V2 a Blocs V5 è per eseguirne il backup. Una volta che un progetto è stato migrato e salvato, non può più essere ripristinato, il che significa che non può essere aperto o utilizzato con Blocs V2. Quindi, esegui il backup dei tuoi progetti prima di continuare la migrazione.

Il processo di migrazione

Quando apri un file Blocs Progetto V2 in Blocs V5, Blocs ti chiederà se desideri migrare il progetto in Blocs V5. A questo punto è importante assicurarsi di avere un backup del progetto in modo da poterlo ripristinare facilmente Blocs 2 se la tua migrazione richiede molto più lavoro di quanto avevi inizialmente previsto.

Quando Blocs migra un progetto a Bootstrap 4, controlla l'HTML del progetto per i riferimenti alle vecchie classi Bootstrap 3 e scansiona anche la struttura HTML apportando modifiche quando richiesto. È importante ricordare Blocs non modifica le classi personalizzate, quindi qualsiasi problema di stile visivo causato dalle classi personalizzate dovrà essere modificato manualmente.

Differenze visive naturali

Ci sono una serie di fattori che faranno sì che il tuo sito abbia un aspetto diverso Blocs V5 rispetto a Blocs V2. I seguenti sono normali e causati a causa di modifiche chiave al framework Bootstrap.

Il testo è più grande

Dopo la migrazione, la modifica più comune che potresti notare è che il testo potrebbe sembrare più grande. Questo perché Bootstrap 4 ora utilizza caratteri di dimensioni maggiori in tutto il suo stile tipografico di base. Il riferimento seguente illustra le differenze tra Bootstrap 3 e 4 che modificano le dimensioni dei caratteri per i tag di intestazione.

Bootstrap 3

H1 = 36 px
H2 = 30 px
H3 = 24 px
H4 = 18 px
H5 = 14 px
H6 = 12 px

Bootstrap 4

H1 = 2.5 rem
H2 = 2 rem
H3 = 1.75 rem
H4 = 1.5 rem
H5 = 1.25 rem
H6 = 1 rem

Attiva / disattiva lo stile dei simboli

Un altro problema visivo comune durante la migrazione sono i problemi con lo stile dei simboli di attivazione / disattivazione. Questo perché, in Bootstrap 4, il simbolo di attivazione / disattivazione del navigatore è ora un'immagine SVG. Ciò significa che non è più possibile personalizzare il simbolo di commutazione con vecchie sottoclassi da Blocs V2. Per cambiare il colore del simbolo di attivazione / disattivazione in Blocs V5 per sfondi chiari o scuri, dovrai impostare la navigazione principale Brics stile del tema.

Problemi di cache

Quando esegui la migrazione di un progetto a Bootstrap 4 e lo esporti, è molto probabile che la cache del server faccia inizialmente sembrare il tuo sito non funzionante una volta ospitato. Questo può essere facilmente risolto svuotando la cache di un browser. Puoi leggere ulteriori informazioni su come risolvere i problemi della cache del browser qui.

Font Impressionante

In Blocs V5, il set di icone Font Awesome è stato aggiornato alla V5. Blocs tenterà di migrare tutte le vecchie classi di icone da Font Awesome V4 fino alle nuove classi richieste per V5. Tuttavia, se hai aggiunto le tue implementazioni di codice personalizzato delle icone Font Awesome, queste dovranno essere aggiornate manualmente.

Puoi leggere quali classi sono cambiate in Font Awesome V5 e come migrare manualmente le classi qui.

In Blocs V5 il carosello, la scatola luminosa e il pulsante di scorrimento in alto utilizzano le icone SVG anziché i caratteri delle icone, questo significa che le vecchie sottoclassi che erano usate in Blocs V3 per impostare il colore delle icone non funzionerà più. Ci sono nuove sottoclassi che prendono di mira queste icone SVG.
Tieni presente che non utilizzerai più il colore del carattere per impostare il colore dell'icona, ma usa invece il Colore tratto SVG controlli di stile nell'Editor di classi.

Sfondo di Parallax

Il modo in cui funziona la parallasse è cambiato Blocs V5, precedentemente utilizzato questa tecnica che applica la regola di classe background-attachment: fixed;. Tuttavia, questo approccio ha uno svantaggio principale che è che non funziona sui dispositivi mobili.

In Blocs V5, la parallasse è ora alimentata da un file Soluzione Javascript il che significa che funziona alla grande tavolo e mobile. Ci sono alcuni aspetti negativi di questo nuovo metodo di parallasse, il principale è che gli sfondi non si ripetono più senza interruzioni se si dispone di un numero di Blocs impilati insieme alla stessa immagine di sfondo. Una soluzione alternativa è semplicemente riposizionare le righe principali contenenti il ​​file Bloc contenuto di ogni individuo Bloc e metterli in un unico Bloc con l'effetto di sfondo parallasse attivato.

Se hai davvero bisogno di ottenere il classico Blocs Effetto di parallasse V3 in formato Blocs V5, questa guida ti guiderà attraverso il processo di creazione manuale.

In Blocs V5 l'icona del menu a levetta è ora un SVG in linea. Ciò significa che può essere facilmente stilizzata e personalizzata utilizzando classi personalizzate. Tuttavia, se in precedenza hai utilizzato un Bric personalizzato come Easy Burger per personalizzare il menu del tuo sito Web, potresti riscontrare alcuni problemi. Ti consigliamo di creare nuovamente il tuo menu e di rimuovere qualsiasi Brics che manipolano il menu, se riscontri problemi.

Margine

Blocs V5 non ha più controlli di margine preimpostati limitati per testo e immagini, invece Blocs ha pieno accesso al Utilità di spaziatura Bootstrap che offrono un'esperienza molto più grande. Questi ti consentono di applicare margini e padding preimpostati per qualsiasi bordo su qualsiasi elemento. Tuttavia, quando si utilizza la spaziatura, è possibile che i controlli non abbiano effetto. Per svuotare un elemento, un margine o una spaziatura interna, tieni premuto il tasto opzione e fai clic sulla piccola X sul controllo segmentato del bordo pertinente che desideri cancellare. Successivamente puoi ora applicare un nuovo valore di margine/padding a quel bordo.

Colori

Blocs V5 ha un sistema di colori completamente nuovo con molti grandi vantaggi. Tuttavia, a causa di un cambiamento così grande, potresti riscontrare alcuni campioni globali che potrebbero non funzionare correttamente Blocs V5, quando provi ad assegnarli a un elemento. Fai semplicemente clic con il pulsante destro del mouse sul campione problematico in Swatch Manager e duplicalo, ora rimuovi l'originale e usa la versione duplicata.

Nota per principianti

Non dimenticare, Blocs V5 include anche l'accesso agli strumenti per sviluppatori WebKit in modalità anteprima, è sufficiente fare clic con il pulsante destro del mouse e ispezionarli per accedervi. L'utilizzo degli strumenti di sviluppo è un ottimo modo per scoprire quali classi personalizzate potrebbero causare problemi di stile indesiderati nel tuo sito, rendendolo più veloce da risolvere.

utilizzando Blocs V2 e V5 uno accanto all'altro

È possibile correre Blocs V2 e V5 sullo stesso sistema poiché entrambi utilizzano risorse di supporto dell'applicazione dedicate alla versione. Tuttavia, dovrebbero essere considerati i seguenti punti.

  • Entrambe le versioni di Blocs condividono lo stesso nome, questo significa che è impossibile per entrambe le app occupare lo stesso spazio all'interno della cartella delle applicazioni di MacOS. Per evitare questo problema, rinomina semplicemente il file Blocs Applicazione V2 da Blocs a Blocs V2. Ciò consentirà a entrambe le app di essere posizionate nella cartella dell'applicazione MacOS.
  • Blocs V2 e V5 hanno diversi tipi di file. Ciò significa che una volta salvato un file in Blocs V5 non può essere aperto Blocs V2. Con questo in mente, ti consigliamo di conservare più copie dei tuoi progetti, per evitare di essere costretto a usarli in una versione specifica di Blocs.
Aggiornato il 30 gennaio 2023

questo articolo è stato utile?

Articoli Correlati