1. Home
  2. gebruik Blocs
  3. Blocs
  4. Migreer een Blocs V2 Project naar Blocs V5
  1. Home
  2. Ermee beginnen
  3. Migreer een Blocs V2 Project naar Blocs V5
  1. Home
  2. Tips
  3. Migreer een Blocs V2 Project naar Blocs V5

Migreer een Blocs V2 Project naar Blocs V5

Een van de grootste verschillen in Blocs V5 vergeleken met Blocs V2 is een feit Blocs maakt geen websites meer met behulp van Bootstrap 3 en gebruikt in plaats daarvan het nieuwe en verbeterde Bootstrap 4 kader.

Migratiehulpmiddel

Projecten gemaakt in Blocs V2 gebruikt de Bootstrap 3 kader wat natuurlijk niet ideaal is, aangezien Bootstrap 3 en 4 behoorlijk verschillend zijn. Echter, Blocs V5 wordt geleverd met een ingebouwde migratietool die is ontworpen om te helpen bij het converteren Blocs V2-projecten (Bootstrap 3) in Blocs V5-projecten (Bootstrap 4) met zo min mogelijk verstoring.

Bij het migreren van een Blocs V2-project (Bootstrap 3) naar een Blocs V5-project (Bootstrap 4) zul je gegarandeerd merken dat verschillende aspecten van je site meer aandacht nodig hebben, dit komt door een aantal factoren die we in dit bericht zullen uitdiepen.

Onthoud ook Blocs V2 kan langszij rennen Blocs V5, dus als u grote sites of projecten met deadlines heeft, moet u deze niet migreren, tenzij u de tijd heeft om substantiële handmatige wijzigingen aan te brengen die mogelijk nodig zijn.

Maak een back-up van uw project

Het belangrijkste om te onthouden voordat u een project migreert Blocs V2 naar Blocs V5 is om er een back-up van te maken. Als een project eenmaal is gemigreerd en opgeslagen, kan het niet meer worden teruggedraaid, wat betekent dat het niet kan worden geopend of gebruikt Blocs V2. Maak dus een back-up van uw projecten voordat u doorgaat met migreren.

Het migratieproces

Wanneer je een Blocs V2-project in Blocs V5, Blocs zal vragen of u het project wilt migreren naar Blocs V5. Het is op dit punt belangrijk om ervoor te zorgen dat u een back-up van uw project hebt, zodat u gemakkelijk kunt terugkeren naar Blocs 2 als uw migratie veel meer werk vereist dan u aanvankelijk voor ogen had.

. Blocs migreert een project naar Bootstrap 4, het controleert de HTML van het project op verwijzingen naar oude Bootstrap 3-klassen en scant ook de HTML-structuur door indien nodig wijzigingen aan te brengen. Het is belangrijk om te onthouden Blocs verandert geen aangepaste klassen, dus eventuele visuele stijlproblemen die door aangepaste klassen worden veroorzaakt, moeten handmatig worden aangepast.

Natuurlijke visuele verschillen

Er zijn een aantal factoren die ervoor zorgen dat uw site er anders uitziet Blocs V5 vergeleken met Blocs V2. Het volgende is normaal en wordt veroorzaakt door belangrijke wijzigingen in het Bootstrap-framework.

Tekst is groter

Na de migratie is de meest voorkomende verandering die u wellicht opmerkt, de tekst er groter uit kan zien. Dit komt omdat Bootstrap 4 nu grotere lettergroottes gebruikt in al zijn kerntypografische stijlen. De onderstaande referentie illustreert de verschillen tussen Bootstrap 3 en 4 die de lettergroottes voor de koptags opnieuw indelen.

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

Schakel de opmaak van symbolen in of uit

Een ander veelvoorkomend visueel probleem bij het migreren zijn problemen met de opmaak van het wisselsymbool. Dit komt doordat in Bootstrap 4 het navigator-wisselsymbool nu een SVG-afbeelding is. Dit betekent dat het niet langer mogelijk is om het schakelsymbool aan te passen met oude subklassen van Blocs V2. Om de kleur van het schakelsymbool te wijzigen in Blocs V5 voor lichte of donkere achtergronden, moet u de bovenliggende navigatie instellen Brics thema stijl.

Cacheproblemen

Wanneer u een project migreert naar Bootstrap 4 en het exporteert, is het zeer waarschijnlijk dat de servercache ervoor zorgt dat uw site er aanvankelijk niet goed uitziet zodra deze wordt gehost. Dit kan eenvoudig worden opgelost door het cachegeheugen van een browser te wissen. U kunt meer lezen over het oplossen van problemen met de browsercache hier..

Font Awesome

In Blocs V5, de Font Awesome icon set is geüpdatet naar V5. Blocs zal proberen om oude pictogramklassen te migreren van Font Awesome V4 naar de nieuwe klassen die vereist zijn voor V5. Als u echter uw eigen aangepaste code-implementaties van de Font Awesome-pictogrammen heeft toegevoegd, moeten deze handmatig worden bijgewerkt.

U kunt lezen welke klassen zijn gewijzigd in Font Awesome V5 en hoe u de klassen handmatig kunt migreren hier..

In Blocs V5 de carrousel, lichtbak en scroll to top-knop gebruiken SVG-pictogrammen in plaats van pictogramlettertypen, dit betekent dat de oude subklassen die werden gebruikt in Blocs V3 om de kleur van de pictogrammen in te stellen, werkt niet meer. Er zijn nieuwe subklassen die gericht zijn op deze SVG-pictogrammen.
Houd er rekening mee dat u niet langer de letterkleur gebruikt om de kleur van het pictogram in te stellen, maar in plaats daarvan de SVG-lijnkleur stijlbedieningen in de Klasse-editor.

Parallax achtergrond

De manier waarop parallax werkt, is veranderd Blocs V5, eerder gebruikt deze techniek die de klassenregel toepast background-attachment: fixed;​ Deze aanpak heeft echter een groot nadeel: het werkt niet op mobiele apparaten.

In Blocs V5, wordt parallax nu aangedreven door een Javascript-oplossing wat betekent dat het geweldig werkt op desktop en mobiel​ Er zijn een paar nadelen aan deze nieuwe parallax-methode, waarvan de belangrijkste is dat achtergronden niet langer naadloos worden herhaald als je een aantal Blocs gestapeld met dezelfde achtergrondafbeelding. Een oplossing hiervoor is door simpelweg de hoofdrijen met de Bloc inhoud van elk individu Bloc en plaats ze in een enkele Bloc met het parallax-achtergrondeffect ingeschakeld.

Als je echt de klassieker nodig hebt Blocs V3 parallax-effect in Blocs V5, Deze gids zal u door het proces leiden om het handmatig te maken.

In Blocs V5 het schakelmenupictogram is nu een inline SVG. Dit betekent dat het eenvoudig kan worden gestyled en aangepast met behulp van aangepaste klassen. Als u echter eerder een custom Bric zoals Easy Burger om het menu van uw website aan te passen, kunt u enkele problemen tegenkomen. We raden aan om uw menu opnieuw op te bouwen en eventuele te verwijderen Brics die het menu manipuleren, als u problemen ondervindt.

Marge

Blocs V5 heeft in plaats daarvan niet langer beperkte vooraf ingestelde margecontroles voor tekst en afbeeldingen Blocs heeft volledige toegang tot de Hulpprogramma's voor bootstrap-afstand die een veel grotere ervaring bieden. Hiermee kunt u vooraf ingestelde marges en opvulling toepassen voor elke rand op elk element. Wanneer u echter spatiëring gebruikt, is het mogelijk dat de besturingselementen niet werken. Om een ​​element, marge of opvulling leeg te maken, houdt u de optietoets ingedrukt en klikt u op de kleine X op het relevante randgesegmenteerde besturingselement dat u wilt wissen. Hierna kunt u nu een nieuwe marge/opvulwaarde toepassen op die rand.

Kleuren

Blocs V5 heeft een geheel nieuw kleurensysteem met veel geweldige voordelen. Door zo'n grote verandering kunt u echter enkele globale stalen tegenkomen die mogelijk niet correct werken Blocs V5, wanneer u ze probeert toe te wijzen aan een element. Klik met de rechtermuisknop op het problematische staal in Swatch Manager en dupliceer het, verwijder nu het origineel en gebruik de gedupliceerde versie.

Opmerking voor beginners

Vergeet niet, Blocs V5 wordt ook geleverd met toegang tot de WebKit-ontwikkelaarstools in preview-modus, klik gewoon met de rechtermuisknop en inspecteer om ze te openen. Het gebruik van de dev-tools is een geweldige manier om erachter te komen welke aangepaste klassen mogelijk ongewenste stylingproblemen op uw site veroorzaken, waardoor deze sneller kunnen worden opgelost.

gebruik Blocs V2 en V5 naast elkaar

Het is mogelijk om te rennen Blocs V2 en V5 op hetzelfde systeem, omdat ze beide versiespecifieke ondersteuningsbronnen voor toepassingen gebruiken. Er moet echter rekening worden gehouden met de volgende punten.

  • Beide versies Blocs dezelfde naam delen, betekent dit dat het onmogelijk is dat beide apps dezelfde ruimte innemen in de MacOS-programmamap. Om dit probleem te voorkomen, hernoemt u gewoon het Blocs V2-applicatie van Blocs naar Blocs V2​ Hierdoor kunnen beide apps in de MacOS-toepassingsmap worden geplaatst.
  • Blocs V2 en V5 hebben verschillende bestandstypen. Dit betekent dat zodra een bestand is opgeslagen in Blocs V5 kan niet worden geopend Blocs V2. Met dit in gedachten raden we u aan om meerdere kopieën van uw projecten te bewaren, om te voorkomen dat u ze in een specifieke versie van uw project moet gebruiken. Blocs.
Bijgewerkt op 30 januari 2023

Was dit artikel behulpzaam?

Gerelateerde artikelen