文件CommerceAdmin System指南

開發人員工具

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 主題：

建立對象：

  • 初學者
  • 中繼
  • 管理員
  • 開發人員

使用進階開發人員工具在前端開發期間決定編譯模式、建立IP位址允許清單及顯示範本路徑提示。 此外也有工具可讓您輕鬆對店面和管理員介面中的文字進行特別變更。

操作模式

您的Adobe Commerce或Magento Open Source執行個體可以部署為在​ 生產 ​或​ 開發人員模式 ​中執行。 只有在​ 開發人員模式 ​中執行存放區時，才能存取專為開發人員設計的工具與組態設定。

只有具有適當許可權的使用者才能從伺服器的命令列變更操作模式。 如需詳細資訊，請參閱​ 組態指南 ​中的設定作業模式。

商家檔案中的大部分主題適用於以生產模式執行的Commerce執行個體。 不過，下列組態設定和工具僅可在安裝以開發人員模式執行時使用。

前端開發工作流程

前端開發工作流程型別決定在開發期間使用者端或伺服器端上發生的編譯較少。 較少是CSS的擴充功能，具有其他功能和慣例，並可產生精簡的程式碼。 建議在主題開發中使用使用者端較少的編譯。 伺服器端編譯是預設模式。 生產模式下的存放區無法使用開發工作流程選項。
請參閱Commerce開發人員檔案中的使用者端LESS編譯與伺服器端{：target="_blank"}。

NOTE
前端開發工作流程組態僅適用於開發人員模式。

進階設定 — 前端開發工作流程

  1. 在​ 管理員 ​側邊欄上，移至​ Stores > Settings>Configuration。

  2. 在左側面板中，展開​ Advanced ​並選擇​ Developer。

  3. 展開​ Front-end Development Workflow ​區段的 擴充選擇器 。

  4. 將​ Workflow Type ​設定為下列其中一項：

    • Client side less compilation — 使用原生less.js程式庫在瀏覽器中進行編譯。
    • Server side less compilation — 使用Less PHP程式庫在伺服器上進行編譯。 這是生產的預設模式。

  5. 完成時，按一下​ Save Config。

靜態檔案簽章

將數位簽章新增至靜態檔案的URL，讓瀏覽器可偵測何時有較新版本的檔案可用。 可使用數位簽名追蹤的靜態檔案包括JavaScript、CSS、影像和字型。 簽章會直接附加至基底URL之後的路徑。 如果檔案的簽章與瀏覽器快取中儲存的簽章不同，則會使用較新版本的檔案。

請參閱Commerce開發人員檔案中的靜態內容簽署{：target="_blank"}。

NOTE
靜態檔案設定組態只有在以開發人員模式運作時才能使用。

進階設定 — 靜態檔案設定

如需組態設定的詳細清單，請參閱​ 組態參考 ​中的​ 靜態檔案設定。

若要啟用已簽署的靜態檔案：

  1. 在​ 管理員 ​側邊欄上，移至​ Stores > Settings>Configuration。

  2. 在左側面板中，展開​ Advanced ​並選擇​ Developer。

  3. 展開​ Static Files Settings ​區段的 擴充選擇器 。

  4. 將​ Sign Static Files ​設為Yes。

  5. 完成時，按一下​ Save Config。

資源檔案最佳化

透過合併和捆綁檔案以及最小化程式碼，可以減少載入資源檔案所需的時間。

  • 合併會將相同型別的不同檔案合併為單一檔案。
  • 套件組合是將個別檔案分組的技術，以減少載入頁面所需的HTTP請求數。
  • 縮制會移除空格、分行符號和註解，但不會影響程式碼的功能。 由於無法編輯最小化的檔案，因此只有在您準備好進入生產階段時，才應套用程式。

依預設，Adobe Commerce和Magento Open Source不會合併、捆綁或最小化檔案，而專案開發人員應決定應使用哪些檔案最佳化方法。

如需詳細資訊，請參閱效能最佳實務。

NOTE
CSS和JavaScript檔案只能在開發人員模式中最佳化。
檔案型別
支援的作業
CSS檔案
MergeMinify
JavaScript檔案
MergeBundleMinify
範本檔案
Minify

若要最佳化資源檔：

  1. 在​ 管理員 ​側邊欄上，移至​ Stores > Settings>Configuration。

  2. 在左側面板中，展開​ Advanced ​並選擇​ Developer。

  3. 若要最佳化CSS檔案，請展開 展開選取器 CSS Settings ​區段，然後執行下列動作：

    • 將​ Merge CSS Files ​設為Yes。
    • 將​ Minify CSS Files ​設為Yes。

    進階設定 — CSS設定 {width="600" modal="regular"}

CSS設定(C)

  1. 若要最佳化JavaScript檔案，請展開 擴充選擇器 JavaScript Settings ​區段，然後執行下列動作：

    • 將​ Merge JavaScript Files ​設為Yes。
    • 將​ Minify JavaScript Files ​設為Yes。

    進階設定 — JavaScript設定 {width="600" modal="regular"}

  2. 若要縮制PHTML範本檔案，請展開 擴充選取器 Template Settings ​區段，並將​ Minify Html ​設為Yes。

    進階設定 — 範本設定 {width="600" modal="regular"}

  3. 完成時，按一下​ Save Config。

使用者端限制

在使用範本路徑提示之類的工具之前，請務必將IP位址新增至「開發人員使用者端限制」允許清單，以避免中斷商店中客戶的購物體驗。 如果您不知道您的IP位址，可以線上搜尋。

NOTE
開發人員使用者端限制只能在開發人員模式中設定。

如需技術資訊，請參閱​ 雲端基礎結構上的Commerce指南 ​中的允許要求的自訂VCL。

若要將您的IP位址新增至允許清單：

  1. 在​ 管理員 ​側邊欄上，移至​ Stores > Settings>Configuration。

  2. 在左側面板中，展開​ Advanced ​並選擇​ Developer。

  3. 展開​ Developer Client Restrictions ​區段的 擴充選擇器 。

    進階設定 — 開發人員使用者端限制 {width="600" modal="regular"}

  4. 針對​ Allow IPs，請輸入您的IP位址。

    如果需要從多個IP位址進行存取，請以逗號分隔每個IP位址。

  5. 完成時，按一下​ Save Config。

  6. 出現提示時，請重新整理任何無效的快取。

範本路徑提示

範本路徑提示是一種診斷工具，可在頁面上使用的每個範本中加入標籤與路徑。 可以為店面或管理員啟用範本路徑提示。

NOTE
範本路徑提示只能在開發人員模式中編輯。

請參閱Commerce開發人員檔案中的尋找範本、版面配置和樣式{：target="_blank"}。

店面範例 — 範本路徑提示

步驟1：將您的IP位址新增至允許清單

在使用範本路徑提示之前，請將您的IP位址新增至允許清單，以避免干擾在商店購物的客戶。 完成後，請務必清除Commerce快取，以從存放區中移除所有提示。

進階設定 — 開發人員使用者端限制

步驟2：啟用範本路徑提示

  1. 在​ 管理員 ​側邊欄上，移至​ Stores > Settings>Configuration。

  2. 在左側面板中，展開​ Advanced ​並選擇​ Developer。

  3. 展開 展開選取器 Debug ​區段，然後執行下列動作：

    進階設定 — 偵錯 {width="600" modal="regular"}

    • 若要啟用存放區的範本路徑提示，請將​ Enabled Template Path Hints for Storefront ​設為Yes。

    • 若要在URL包含templatehints引數時啟用存放區的範本路徑提示，請將​ 使用URL引數 ​啟用存放區的提示Yes。 然後視需要設定引數的值。 預設值為magento，但您可以使用自訂值。 例如，如果您將值變更為lorem，您將會使用mymagento.com?templatehints=lorem來顯示範本提示。

    • 若要啟用管理員的範本路徑提示，請將​ Enabled Template Path Hints for Admin ​設為Yes。

    • 若要包含區塊名稱，請將​ Add Block Class Type to Hints ​設為Yes。

  4. 完成時，按一下​ Save Config。

步驟3：清除快取

  1. 在​ 管理員 ​側邊欄上，移至​ System > Tools>Cache Management。

  2. 按一下右上角的​ Flush Magento Cache。

翻譯內嵌

您可以在開發人員模式中使用翻譯內嵌工具，修剪介面中的文字，以反映您的聲音和品牌。 啟動「翻譯內嵌」模式時，頁面上可編輯的任何文字都會以紅色外框。 編輯店面和管理程式中顯示的欄位標籤、訊息和其他文字相當容易。 例如，許多主題都使用術語，例如​ 我的帳戶、我的願望清單 ​和​ 我的儀表板，以協助客戶找到解決方法。 不過，您可能會偏好使用文字​ Account、Wishlist ​和​ 儀表板。

NOTE
翻譯內嵌工具只有在以開發人員模式運作時才能使用。

請參閱Commerce開發人員檔案中的翻譯概觀。

店面範例 — 可翻譯文字

如果您的商店提供多種語言版本，您可以針對地區設定對翻譯文字進行微調。 在伺服器上，介面文字會保留在每個輸出區塊的個別CSV檔案中，並依地區設定組織。 作為替代方法，您也可以直接在伺服器上編輯CSV檔案，而不使用​ 翻譯內嵌 ​工具。 翻譯檔案儲存在app/code/Magento/<module_name>/i18n/<language_locale>.csv中。

NOTE
若要使用「翻譯內嵌」工具，您的瀏覽器必須允許快顯視窗。

步驟1：停用輸出快取

  1. 在​ 管理員 ​側邊欄上，移至​ System > Tools>Cache Management。

  2. 選取下列核取方塊：

    • Blocks HTML output
    • Page Cache
    • Translations

  3. 將​ Actions ​控制項設為Disable並按一下​ Submit。

步驟2：啟用翻譯內嵌工具

  1. 在​ 管理員 ​側邊欄上，移至​ Stores > Settings>Configuration。

  2. 若要使用特定存放區檢視，請設定​ Store View ​進行更新。

  3. 在左側面板中，展開​ Advanced ​並選擇​ Developer。

  4. 展開​ Translate Inline ​區段的 擴充選擇器 。

    視需要清除​ Use Website ​核取方塊以修改這些設定。

    編輯特定存放區檢視時，Enabled for Admin ​選項無法使用。

    進階設定 — 翻譯內嵌 {width="600" modal="regular"}

  5. 將​ Enabled for Storefront ​設為Yes。

  6. 完成時，按一下​ Save Config。

  7. 出現提示時，請重新整理無效的快取，但暫時保留停用的快取。

步驟3：更新文字

  1. 在瀏覽器中開啟您的店面，然後移至您要編輯的頁面。

    如有必要，請使用語言選擇器來變更存放區檢視。 每個可翻譯的文字字串都會以紅色外框。 當您將滑鼠游標停留在任何文字方塊上時，會出現一個書圖示（ 書圖示 ）。

  2. 按一下書本圖示以開啟​ 翻譯 ​視窗，然後執行下列動作：

    • 如果變更是針對特定商店檢視，請選取「Store View Specific」核取方塊。

    • 輸入新的​ Custom ​文字。

  3. 完成時，按一下​ Submit。

    輸入自訂文字 {width="700" modal="regular"}

  4. 若要在存放區中檢視變更，請重新整理瀏覽器。

  5. 對存放區中要變更的任何元素重複此程式。

步驟4：還原原始設定

  1. 返回您商店的管理員。

  2. 在​ 管理員 ​側邊欄上，移至​ Stores > Settings>Configuration。

  3. 將​ Store View ​設定為已編輯的特定檢視。

  4. 在左側面板中，展開​ Advanced ​並選擇​ Developer。

  5. 展開​ Translate Inline ​區段的 擴充選擇器 。

  6. 將​ Enabled for Frontend ​設為No。

  7. 完成時，按一下​ Save Config。

  8. 在​ 管理員 ​側邊欄上，移至​ System > Tools>Cache Management。

  9. 選取下列先前已停用之輸出快取的核取方塊：

    • Blocks HTML output
    • Page Cache
    • Translations

  10. 將​ Actions ​控制項設為Enable並按一下​ Submit。

  11. 出現提示時，請重新整理任何無效的快取。

步驟5：驗證存放區中的變更

前往您的店面，檢查每個已更新的頁面，確定變更正確。 在此範例中，Customer Login已變更為Customer Sign In。 如果對特定檢視進行了變更，請使用「語言選擇器」切換到正確的檢視。

店面範例 — 已翻譯的客戶登入

recommendation-more-help
d3c62084-5181-43fb-bba6-1feb2fcc3ec1