☰

如何使用 Adob​​e Brackets 即時預覽 WordPress 網站？

tag-icon • tag-icon wordpress brackets
如何使用 Adob​​e Brackets 即時預覽 WordPress 網站？

Adobe 括號具有即時預覽功能，可讓我在處理 .css 和 .html 檔案時查看 HTML 網頁。

我現在開始在 WordPress 網站上工作，其中涉及、.html和.css文件。如何使用 Brackets 即時預覽 WordPress 網站？.js.php

答案1

我想我找到了解決這個問題的方法！

您可以在專案設定中設定即時預覽基本 URL。當 Brackets 嘗試預覽頁面時，它將載入目前文件項目中的檔案名稱和路徑，並將其附加到該基本 URL 的末尾。

WordPress 的問題是，您在專案中處理的 php 檔案的路徑和檔案名稱很少與您將要存取以執行該程式碼和查看模板頁面的 URL 相關。

那麼，如果我們希望伺服器提供與瀏覽器請求的頁面不同的頁面，我們該怎麼辦？網址重寫！

我將我的基本 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 的即時預覽功能似乎是圍繞著靜態工作流程建構的。不支援預覽任何動態語言，據我所知，也沒有計劃添加它。

這也很遺憾，因為它使該應用程式對我來說完全毫無用處。 :-/

相關內容