☰

如何使用 Adob​​e Brackets 实时预览 WordPress 网站？

tag-icon • tag-icon wordpress brackets
如何使用 Adob​​e Brackets 实时预览 WordPress 网站？

Adobe 支架具有实时预览功能，让我可以在处理 .css 和 .html 文件时查看 HTML 网页。

我现在开始着手开发一个涉及.html、.css和文件.js的WordPress 网站.php。如何使用 Brackets 实时预览 WordPress 网站？

答案1

我想我已经找到解决这个问题的方法了！

您可以在项目设置中设置实时预览基本 URL。当 Brackets 尝试预览页面时，它会加载当前文件在项目中的文件名和路径，并将其附加到该基本 URL 的末尾。

WordPress 的问题在于，您在项目中处理的 php 文件的路径和文件名很少与您将访问以执行该代码和查看模板页面的 URL 有任何关联。

那么，如果我们希望服务器提供与浏览器请求不同的页面，我们该怎么做？URL 重写！

我在括号中设置了我的 Base URL，http://server.dev/theme/然后.htaccess在开发服务器上为 Apache 创建了一个文件。以下是示例：

<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>

如您所见，您需要为要编辑的某些文件选择一些任意页面请求。

可以肯定的是，至少在 Brackets 1.5 上测试时，工作流程和刷新还存在许多其他问题，但这解决了使用 Brackets 的 WordPress 实时预览的一个大问题。

答案2

你能可以在您自己的后端（例如 WordPress 服务器）上使用实时预览，但是它有一些注意事项：

  • 您需要一个在本地运行的服务器，指向您在 Brackets 中打开进行编辑的同一文件夹
  • 实时 HTML 更新已禁用 - 但您仍可进行实时 CSS 更新（和选择器突出显示）。当您编辑 HTML、PHP 或其他文件时，Brackets 将恢复为简单的“实时重新加载”。

该文档有更详细的信息：https://github.com/adobe/brackets/wiki/How-to-Use-Brackets#lp-custom-server。

答案3

我希望你能，但是 Brackets 的实时预览功能似乎是围绕静态工作流程构建的。它根本不支持预览任何动态语言，而且据我所知，也没有计划添加它。

这也很遗憾，因为它使得该应用程序对我来说完全没用。:-/

相关内容