Share
Wenn Sie an einer statischen Site arbeiten, kann Ihr Leben wesentlich einfacher werden, wenn Sie auf einfache Weise eine lokale Vorschau Ihres Designs aktivieren können.
Noch besser ist es, wenn diese lokale Vorschau über eine Live-Nachladefunktion verfügt, sodass Ihre Änderungen automatisch während der Arbeit wirksam werden. Und noch besser, wenn Sie Ihre Site über eine http: // Protokoll, da Dinge manchmal nicht ganz wie erwartet funktionieren, wenn man sie über ein Protokoll betrachtet Datei:// Protokoll.
Es gibt mehrere Möglichkeiten, lokale Vorschauen einzurichten, aber eine der einfachsten Möglichkeiten besteht darin, direkt über den Atom-Code-Editor zu arbeiten und dabei das hervorragende System der Erweiterungspakete zu nutzen. Alles, was Sie tun müssen, ist, Ihr bevorzugtes Paket zu installieren, es zu aktivieren, und Sie können loslegen.
In diesem kurzen Tipp zeige ich Ihnen drei der besten Atom-Pakete, mit denen Sie schnell und einfach lokale Vorschaubilder einrichten können. Lass uns anfangen!
Hinweis: Wenn Sie Atom noch nicht haben, können Sie es unter https://atom.io/ abrufen.
Das Atom-Live-Server Das Paket ist mein persönliches Ziel, wenn ich schnell und einfach eine Vorschau des statischen Codes anzeigen möchte. Es wird eine lokale Vorschau mit einer http: // Protokoll und wird automatisch aktualisiert, wenn Änderungen an den in Ihrem Projekt verwendeten Dateien gespeichert werden.
Um es zu installieren, gehe zu Pakete> Einstellungsansicht> Pakete / Designs installieren. Suchen Sie dann nach "atom-live-server" und klicken Sie auf Install Taste wenn du es findest.
Um das Paket verwenden zu können, müssen Sie einen Projektordner hinzugefügt haben Projekt Seitenleiste. Von hier aus nach Pakete> atom-live-server> Server starten Eine Vorschau Ihrer Site wird in Ihrem Standardbrowser geöffnet. Wenn Sie den Server erneut anhalten müssen, gehen Sie zu Pakete> atom-live-server> Server stoppen.
Wenn Sie mehrere Projekte in der Seitenleiste geöffnet haben, wird jeweils eines davon in der Vorschau angezeigt. Wenn Sie von der Vorschau eines Projekts zu einem anderen wechseln müssen, stoppen Sie den Server, ziehen Sie das Projekt, das Sie in der Vorschau anzeigen möchten, und legen Sie es in den oberen Bereich der Seitenleiste. Anschließend starten Sie den Server neu.
Anstatt eine Vorschau in Ihrem Standardbrowser zu öffnen, wird die Atom-HTML-Vorschau Mit dem Paket erhalten Sie eine Inline-Vorschau aller HTML-Seiten im Atom-Editor. Um dieses Paket zu installieren, befolgen Sie die gleichen Anweisungen wie oben für das Paket. Suchen Sie jedoch stattdessen nach "atom-html-preview".
Öffnen Sie nach der Installation die HTML-Datei, die Sie in der Vorschau anzeigen möchten, und wechseln Sie dann zu Pakete> HTML-Vorschau> Vorschau aktivieren. Sie sehen dann Ihren Arbeitsbereich aufgeteilt, wobei Ihr Code im linken Bereich und Ihre Live-Vorschau im rechten Bereich angezeigt wird.
Beim Benutzen Atom-HTML-Vorschau, Dateien müssen nicht gespeichert werden, damit die Vorschau aktualisiert wird. Vielmehr wird Ihre Vorschau während der Eingabe laufend aktualisiert.
Das Atom-Browser Mit diesem Paket können Sie eine Vorschau des HTML-Codes in einem in Atom eingebetteten Browserfenster anzeigen, ähnlich wie in Atom-HTML-Vorschau. Leider sind Voransichten über eine Datei:// Protokoll, aber es enthält Live-Reload.
Der eigentliche Vorteil dieses Pakets ist jedoch, dass Sie das Inline-Vorschaufenster als normalen Browser verwenden können. Dies macht es sehr praktisch, die Dokumentation während der Arbeit nachzuschlagen oder beispielsweise ein Codierungs-Lernprogramm zu befolgen.
Installieren Sie das Paket, indem Sie die zuvor beschriebenen Schritte ausführen und danach suchen Atom-Browser.
Öffnen Sie nach der Installation den Browser für das reguläre Browsen, indem Sie auf klicken Pakete> Atom Browser> Umschalten.
Um eine Vorschau eines HTML-Dokuments anzuzeigen, klicken Sie mit der rechten Maustaste darauf Projekt Seitenleiste und wählen Sie Atomvorschau. Klicken Sie auf das kleine Blitzsymbol neben dem URL-Feld des Browsers, um das Live-Laden während des Codes zu aktivieren.
Das umfasst drei sehr praktische Live-Vorschau-Pakete für Atom. Wenn Sie diese in Ihrem Tool-Kit verwenden, sollten Sie Ihre Entwürfe im Auge behalten, während Sie mit ihnen arbeiten!
Haben Sie noch andere Vorschläge zur schnellen und einfachen Handhabung lokaler Vorschauen? Wenn ja, fahren Sie fort und teilen Sie sie mit anderen Tuts + -Lesern in den Kommentaren unten.
Accentsconagua