Share
Wanneer u op een statische site werkt, kunt u uw leven veel eenvoudiger maken als u een eenvoudige manier hebt om een lokaal voorbeeld van uw ontwerp te activeren.
Wat nog beter is, is of deze lokale preview een live herlaadfunctie heeft, zodat u automatisch ziet dat uw wijzigingen effect hebben terwijl u werkt. En nog beter, als u uw site via a kunt bekijken http: // protocol, aangezien het soms niet werkt zoals verwacht wanneer het wordt bekeken via een het dossier:// protocol.
Er zijn meerdere manieren om lokale voorbeelden in te stellen, maar een van de gemakkelijkste manieren is om rechtstreeks via de Atom-code-editor te werken en gebruik te maken van het uitstekende ecosysteem van uitbreidingspakketten. Het enige dat u hoeft te doen, is uw voorkeurspakket installeren, activeren en klaar om te gebruiken.
In deze snelle tip laat ik je drie van de beste Atom-pakketten zien voor het snel en eenvoudig instellen van live herladen van lokale previews. Laten we beginnen!
Notitie: Als je nog geen Atom hebt, kun je het pakken via https://atom.io/
De atom-klare server pakket is mijn persoonlijke "go to" wanneer ik een snelle en eenvoudige manier nodig heb om een voorbeeld van een statische code te bekijken. Het draait een lokale preview op met een http: // protocol en wordt automatisch vernieuwd wanneer wijzigingen in een van de bestanden die in uw project worden gebruikt, worden opgeslagen.
Ga naar om het te installeren Pakketten> Weergave Instellingen> Pakketten / thema's installeren. Zoek vervolgens naar "atom-live-server" en druk op de installatie van het pakket knop wanneer je het vindt.
Om het pakket te gebruiken, moet u een projectmap toegevoegd hebben aan de project zijbalk. Ga vanaf hier naar Pakketten> atom-live-server> Start Server en een voorbeeld van uw site wordt geopend in uw standaardbrowser. Als u de server opnieuw moet stoppen, gaat u naar Pakketten> atom-live-server> Stop Server.
Als er meerdere projecten in de zijbalk zijn geopend, wordt afhankelijk van welke bovenaan staat, een voorbeeld weergegeven. Als u van het bekijken van een voorbeeld naar een ander project wilt overschakelen, moet u eerst de server stoppen en vervolgens het project waarvan u een voorbeeld wilt weergeven naar de bovenkant van de zijbalk slepen en de server opnieuw starten..
In plaats van een voorbeeld in uw standaardbrowser te openen, is de atom-html-voorbeeld pakket geeft u een inline voorbeeld van elke HTML-pagina in de Atom-editor. Om dit pakket te installeren volg je dezelfde instructies als bij het bovenstaande pakket, maar zoek je in plaats daarvan naar "atoom-html-preview".
Na de installatie opent u het HTML-bestand waarvan u een voorbeeld wilt bekijken en gaat u vervolgens naar Pakketten> HTML voorvertonen> Voorbeeld inschakelen. Vervolgens ziet u uw werkruimte gesplitst, waarbij uw code wordt weergegeven in het linkerdeelvenster en uw live voorbeeld in het rechterdeelvenster.
Tijdens gebruik atom-html-voorbeeld, bestanden hoeven niet op volgorde te worden opgeslagen om het voorbeeld te kunnen bijwerken. Integendeel, terwijl u typt, wordt uw voorbeeld doorlopend bijgewerkt.
De atom-browser Met dit pakket kunt u een voorbeeld van uw HTML bekijken in een browservenster dat is ingesloten in Atom, vergelijkbaar met atom-html-voorbeeld. Helaas zijn previews via een het dossier:// protocol, maar het bevat live reload.
Het echte opvallende voordeel van dit pakket is dat u het inline voorbeeldvenster kunt gebruiken als een normale browser. Dit maakt het erg handig om documentatie op te zoeken terwijl u werkt, of om bijvoorbeeld een codeerhandleiding te volgen.
Installeer het pakket door de stappen te volgen die eerder zijn beschreven en te zoeken naar atom-browser.
Open na de installatie de browser voor normaal browsen door naar Pakketten> Atom Browser> Toggle.
Als u een voorbeeld van een HTML-document wilt bekijken, klikt u er met de rechtermuisknop op in de project zijbalk en kies Atom Preview. Als u tijdens het coderen live reload wilt inschakelen, klikt u op het kleine bliksempictogram naast het URL-veld van de browser.
Dat omvat drie superhandige live preview-pakketten voor Atom. Met deze in uw toolkit houdt u uw ontwerpen bij terwijl uw lay-outs een stuk vloeiender en gemakkelijker zouden moeten zijn!
Heeft u nog andere suggesties over snelle en eenvoudige manieren om lokale voorbeelden te verwerken? Als dit het geval is, ga dan verder en deel ze met andere Tuts + -lezers in de onderstaande opmerkingen.
Accentsconagua