Exporteren

Als je eenmaal tevreden bent met een ontwerp, kun je het als een normaal ontwerp exporteren statische website, bestaande uit HTML, CSS, JS en afbeeldingen. Bootstrap Studio maakt dit gemakkelijk - klik gewoon op de knop Exporteren in de hoofdwerkbalk of gebruik de sneltoets Ctrl/Cmd + E.

Instellingen exporteren

Er zijn een aantal exportinstellingen beschikbaar die van invloed kunnen zijn op de manier waarop HTML-code wordt gegenereerd.

Hier is een kort overzicht van de opties:

• Verklein JavaScript en CSS - Alle extra witruimte wordt verwijderd uit .js en .css bronnen, waardoor hun bestandsgrootte wordt verkleind, maar ze ook moeilijker leesbaar worden.
• Gebruik een CDN voor bibliotheken - De jQuery-bibliotheek, bootstrap-frameworkbronnen en gebruikte pictogramlettertypen worden gekoppeld vanaf een CDN leverancier voor extra prestaties. Indien uitgeschakeld, worden ze opgenomen als lokale bestanden.
• Sla ongebruikte afbeeldingen over - Scant of de afbeeldingen die u in uw ontwerp hebt geïmporteerd, worden gebruikt of niet, en zal naar schijf schrijven enige die dat zijn.
• Exportlabels -Labels zijn extra tekstelementen die naast uw componenten worden weergegeven in het Overview panel. Normaal gesproken worden ze genegeerd bij het exporteren, maar als u deze optie inschakelt, worden ze ingevoegd als <!-- Start: XXX --> en <!-- End: XXX --> opmerkingen in de HTML.
• Verkleinen HTML - Schakel deze optie in om extra witruimte te verwijderen uit de geëxporteerde HTML.
• Gebruik absolute paden - Alle pagina-, CSS-, JS-, afbeeldings- en andere bron-URL's worden voorafgegaan door een schuine streep (/).
• Versie-items - Indien ingeschakeld, voegt deze optie inhoudshashes toe aan alle activa-URL's, waardoor de browser wordt gedwongen om altijd een nieuwe versie van genoemde bronnen te vernieuwen (cache-busting).
• Exporteer SASS - Als je SASS-bestanden in je ontwerp hebt, schakel deze optie dan in om de SASS-bronnen te exporteren. Standaard wordt alleen de gecompileerde css naar schijf geschreven.
• Website-URL - A tekstinvoer om de URL in te voeren waarop u uw website wilt uploaden. Het wordt gebruikt wanneer de app sitemaps en Facebook/Twitter-metatags genereert.

Sla uw instellingen op en wanneer u de volgende keer op de knop Exporteren klikt, ontwerp wordt naar de door u geselecteerde map geschreven.

Een enkele pagina exporteren

Als je ontwerp uit meerdere bestaat pagina's, kunt u alleen een specifieke exporteren. Klik met de rechtermuisknop op de pagina in het Ontwerppaneel en kies Exporteren. Dit zal alleen de geselecteerde pagina schrijven en naast de CSS- en afbeeldingsbestanden die het gebruikt.

Aangepaste export

Voor een meer fijnmazige ervaring kunt u het menu Bestand > Exporteren > Aangepast exporteren kiezen. In het dialoogvenster kunt u bestanden filteren op type en alleen de bestanden selecteren die u wilt exporteren.

Scripts exporteren

Voor ervaren gebruikers van de app is er ook de mogelijkheid om Export Scripts te configureren. Met deze geavanceerde functie kun je een script programmeren dat elke keer dat u uw ontwerp exporteert. U kunt ze gebruiken om bestanden te hernoemen, afbeeldingen te verplaatsen, dingen als eslint uit te voeren of zelfs uw site automatisch naar uw server te uploaden.

Om dit te doen, moet je vertrouwd zijn met schrijven code. Daarom is de functie verborgen in het gebied Geavanceerd in Exportinstellingen:

Je wijst het naar een executable bestand ergens op uw schijf. Dit kan een shellscript of een gecompileerd programma zijn. De enige vereiste is dat het kan worden uitgevoerd vanaf een terminal en niet wacht op invoer van de gebruiker.

Mac/Linux

Voor macOS en Linux zijn shellscripts een eenvoudige maar krachtige optie voor het schrijven van exportscripts. Het exportbestemmingspad wordt doorgegeven als arg 1, dus u moet: cd $1 om naar de map met de geëxporteerde bestanden te navigeren.

Hier is een voorbeeld, geschreven in bash, dat de extensie van je indexbestand verandert in php:

<span class="token shebang important">#!/bin/bash</span>
<span class="token ingebouwde class-name">cd</span> <span class="token variabele">$1</span>
<span class="token function">mv</span> index.html index.php

Vergeet niet om het script als uitvoerbaar te markeren, zodat het besturingssysteem het als een programma kan starten:

<span class="token function">chmod</span> +x
uwscript.sh

Voor complexere taken kunt u uw scripts schrijven in Node, Python, Ruby, PHP of iets anders waar u zich prettig bij voelt. Zorg ervoor dat het script is gemarkeerd als uitvoerbaar en dat de #! rij is toegevoegd, zodat de interpreter kan worden gelokaliseerd door het os.

Windows

Voor Windows zouden gewone batchbestanden of gecompileerde programma's werk. Het exportbestemmingspad wordt doorgegeven als arg 1, dus u moet cd %1 gebruiken om naar de map met de geëxporteerde bestanden te navigeren.

Hier is een voorbeeld van een batchbestand dat uw index.html-bestand hernoemt naar: php:

@ECHO UIT
cd %1
verplaats index.html index.php

Sla dit op als tekstbestand met de extensie bat. Dit is nodig zodat Windows weet dat dit bestand als een programma moet worden uitgevoerd.

Belangrijk

Veel Windows-batchvoorbeelden die u online kunt vinden om toe te voegen een PAUSE-opdracht aan het einde van het script. Voeg dit niet toe aan uw exportscripts, omdat het script dan blijft hangen en opnemen geheugen wanneer het wordt gestart door Bootstrap Studio.

Een alternatief voor het schrijven van uw scripts is om betere exportfunctionaliteit te gebruiken om uw script als een uitvoerbaar bestand.

Het script instellen om uit te voeren

Het enige dat overblijft is om Bootstrap Studio te vertellen om uw script uit te voeren bij het exporteren. Open met uw ontwerp geladen de Instellingen dialoogvenster en selecteer het item Export aan de linkerkant. Vouw vervolgens het gedeelte Geavanceerd uit, klik op de knop Bladeren en zoek uw exportscript.

Foutafhandeling

Als uw script fouten of logberichten genereert, worden deze naar een error.log-bestand in de exportmap geschreven. U kunt het gebruiken om mogelijke problemen op te sporen.

U kunt een complexer voorbeeld bekijken voor uw website automatisch publiceren naar Github Pages na een export.