Live-Vorschau einer WordPress-Website mit Adobe Brackets

8992
henrywright

Adobe Brackets verfügt über eine Live-Vorschau, mit der ich eine HTML-Webseite anzeigen kann, während ich an den .css- und .html-Dateien arbeite.

Ich beginne jetzt mit der Arbeit an einer WordPress-Website, die .html. .css, .jsUnd .phpDateien beinhaltet. Wie kann ich eine Live-Vorschau einer WordPress-Website mithilfe von Klammern anzeigen?

4
Dies ist der Brackets-Community bekannt, aber ab sofort funktioniert die Live-Vorschau-Funktion nicht mit serverbasierten Websites (z. B. CMS-gestützte Website wie WP). Sie können das Neueste hier verfolgen: https://github.com/adobe/brackets/issues/3007 Trevor vor 9 Jahren 0

3 Antworten auf die Frage

3
NReilingh

I think I figured out a solution to this!

You can set a Live Preview Base URL in your project settings. When Brackets tries to preview the page, it will load the file name and path in your project of the current file, appended to the end of that base URL.

The issue with WordPress is that the path and filename of the php file you are working on in your project is rarely in any way related to the URL you will be accessing to execute that code and view your template page.

So, what do we do if we want our server to serve up a different page than what the browser requested? URL rewriting!

I set my Base URL in brackets to http://server.dev/theme/ and then created an .htaccess file for Apache on my development server. Here's an example:

<IfModule mod_rewrite.c> RewriteEngine On RewriteRule theme/archive.php "/?m=201510" RewriteRule theme/ "/" RewriteRule theme/header.php "/" RewriteRule theme/footer.php "/" RewriteRule theme/page.php "/?page_id=16080" RewriteRule theme/search.php "/?s=asdf" RewriteRule theme/sidebar.php "/" RewriteRule theme/single.php "/?p=16247" </IfModule>

As you can see, you need to choose some arbitrary page requests for some of the files you'll be editing.

To be sure, there are many other issues with workflow and refreshing, at least in testing on Brackets 1.5, but this solves one big problem of using Brackets' Live Preview for WordPress.

Kludgy-Lösung, aber eine kreative Idee, die die Arbeit erledigt. JakeGould vor 8 Jahren 1
2
peterflynn

Sie können die Live-Vorschau mit Ihrem eigenen Backend (z. B. einem WordPress-Server) verwenden, es gibt jedoch einige Einschränkungen:

  • Sie benötigen einen Server, der lokal ausgeführt wird und auf den Ordner zeigt, den Sie zum Bearbeiten in Klammern geöffnet haben
  • Live HTML-Aktualisierungen sind deaktiviert - obwohl Sie immer noch Live-CSS-Aktualisierungen erhalten (und das Markieren von Selektoren). Klammern fallen auf einfaches "Live-Reload" zurück, wenn Sie HTML-, PHP- oder andere Dateien bearbeiten.

Die Dokumentation enthält detailliertere Informationen: https://github.com/adobe/brackets/wiki/How-to-Use-Brackets#lp-custom-server .

Das einzige, was ich gefunden habe, ist, dass ich, wenn ich die Live-Vorschau mit einem lokalen Server und einer WordPress-Site verwende, PHP-Dateien als Teil des Website-Pfads lädt. Für ein CMS ist dies nicht korrekt. Wenn zum Beispiel der Dateiname meiner Seitenvorlage pg-home.php lautet, gehe ich zur Live-Vorschau und lade: http: //site.local/pg-home.php. Dies ist nicht korrekt. Fehlt mir hier etwas offensichtliches? Trevor vor 9 Jahren 1
@Trevor Ich habe nur an etwas gedacht, das für dieses Problem möglicherweise geeignet ist. Wenn Sie eine RewriteRule auf Ihrem benutzerdefinierten Server verwenden, um Klammern zu machen, denkt es, lädt es die Datei, die es in der Vorschau anzeigen möchte. Ich füge eine Antwort hinzu, wenn es funktioniert. NReilingh vor 8 Jahren 0
0
Joey the Squid

Ich wünschte, Sie könnten es, jedoch scheint die Live-Vorschau von Brackets um einen statischen Workflow herum aufgebaut zu sein. Es gibt keinerlei Unterstützung für die Vorschau auf dynamische Sprachen. Soweit ich weiß, gibt es auch keine Pläne, sie hinzuzufügen.

Es ist auch eine Schande, weil die App für mich völlig unbrauchbar wird. : - /

Hinweis: Sie können _can_ weiterhin Live-CSS-Aktualisierungen (oder WENIGER oder SCSS) erhalten, auch wenn Sie dynamische Inhalte aus Ihrem eigenen Backend haben. Siehe meine Antwort unten. peterflynn vor 9 Jahren 0

Verwandte Probleme