Как сделать предварительный просмотр сайта WordPress с помощью Adobe Brackets?

8905
henrywright

Adobe Brackets имеет функцию предварительного просмотра, которая позволяет мне просматривать веб-страницу HTML, пока я работаю с файлами .css и .html.

Я сейчас начать работу на сайте WordPress, который включает в себя .html, .css, .jsи .phpфайлы. Как я могу вживую просмотреть веб-сайт WordPress, используя Brackets?

4
Это то, о чем знает сообщество Brackets, но на данный момент функция Live Preview не будет работать с веб-сайтами на основе сервера (например, веб-сайтом на основе CMS, например, WP). Вы можете следить за последними здесь: https://github.com/adobe/brackets/issues/3007 Trevor 9 лет назад 0

3 ответа на вопрос

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.

Клудгое решение, но креативная идея, которая выполняет свою работу. JakeGould 8 лет назад 1
2
peterflynn

You can use Live Preview with your own backend (such as a WordPress server), but it comes with certain caveats:

  • You need a server running locally, pointing at the same folder you have open for editing in Brackets
  • Live HTML updating is disabled -- though you still get live CSS updating (and selector highlighting). Brackets falls back to simple "live reload" when you edit HTML, PHP, or other files.

The documentation has more detailed info: https://github.com/adobe/brackets/wiki/How-to-Use-Brackets#lp-custom-server.

Единственное, что я обнаружил, если я использую Live Preview с локальным сервером и сайтом WordPress, он пытается загрузить файлы PHP как часть пути к сайту. Для CMS это не правильно. Например, если мое имя файла шаблона страницы pg-home.php, я перехожу к предварительному просмотру в режиме реального времени, и он загружается: http: //site.local/pg-home.php, что неверно. Я что-то упускаю здесь очевидное? Trevor 9 лет назад 1
@Trevor Просто подумал о чем-то, что могло бы сработать для этого - используя RewriteRule на вашем пользовательском сервере, чтобы заключить в скобки ДУМАЮ, что он успешно загружает файл, который хочет просмотреть ... Я добавлю ответ, если он будет работать. NReilingh 8 лет назад 0
0
Joey the Squid

I wish you could, however Brackets' Live preview feature seems to be built around a static workflow. There's no support whatsoever for previewing any dynamic languages and, as far as I know, there's no plans to add it either.

It's a shame too because it renders the app completely useless to me. :-/

Примечание: вы _ можете_ по-прежнему получать живое обновление CSS (или LESS или SCSS), даже если у вас есть динамический контент, исходящий из вашего собственного бэкэнда. Смотрите мой ответ ниже. peterflynn 9 лет назад 0

Похожие вопросы