文件Commerce內容和設計

佈景主題資產

Last update: Mon Nov 27 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

建立對象：

  • Beginner
  • Intermediate
  • Admin
  • User

此 靜態檔案 是佈景主題所使用的資產（例如CSS、字型、影像和JavaScript）集合。 靜態檔案的位置指定於 基礎URL 設定。 您可以將數位簽章新增至每個靜態檔案的URL，讓瀏覽器能在較新版本可用時偵測到。 如果簽章與瀏覽器快取中儲存的簽章不同，則會使用較新版本的檔案。

對於標準安裝，與主題關聯的資產會整理在 web 資料夾（位於以下位置） Commerce 根。

[commerce_root]/app/design/frontend/Magento/[theme_name]/web

將數位簽章新增至靜態檔案URL

  1. 在 管理員 側欄，前往 Stores > Settings>Configuration.

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

  3. 展開 展開選擇器 此 Static Files Settings 區段。

    靜態檔案設定 {width="500" modal="regular"}

  4. 設定 Sign Static Files 至 Yes.

  5. 完成後，按一下 Save Config.

檔案型別
說明
CSS
控制與外觀關聯的視覺樣式。 伺服器上的位置範例： [commerce]/app/design/frontend/Magento/[theme]/web/css
字型
提供主題可用的字型。 伺服器上的位置： [commerce]/app/design/frontend/Magento/[theme]/web/fonts
影像
提供主題使用的圖形資產，包括按鈕、背景紋理等。 伺服器上的位置範例： [commerce]/app/design/frontend/Magento/[theme]/web/images
JS
主題特定的JavaScript常式和可呼叫函式。 伺服器上的位置範例： [commerce]/app/design/frontend/Magento/[theme]/web/js

合併CSS檔案

為了將網站最佳化並減少頁面載入時間，您可以將CSS檔案合併成單一壓縮檔案，以減少個別CSS檔案的數量。 如果您開啟合併的CSS檔案，您會看到一個連續的文字串流，其中已移除分行符號。 您無法編輯合併的檔案，因此最好等到您退出開發模式且不再頻繁變更CSS為止。

NOTE
CSS檔案可透過以下方式合併： 管理員 面板（僅在使用時） 開發人員模式.

  1. 在 管理員 側欄，前往 Stores > Settings>Configuration.

  2. 在左側面板中， Advanced 並選擇 Developer.

  3. 展開 展開選擇器 此 CSS Settings 區段。

    CSS設定 {width="500" modal="regular"}

    如需這些組態選項的詳細說明，請參閱 CSS設定 在 設定參考.

  4. 設定 Merge CSS Files 至 Yes.

  5. 完成後，按一下 Save Config.

合併JavaScript檔案

多個JavaScript檔案可以合併為單一壓縮檔案，以減少頁面載入時間。 如果您開啟合併的JavaScript檔案，您會看到一個連續的文字串流，其中已移除分行符號。 如果您已完成開發程式，且程式碼不含任何錯誤，則可考慮合併檔案。

NOTE
JavaScript檔案可合併自 管理員 面板（僅在使用時） 開發人員模式.

  1. 在 管理員 側欄，前往 Stores > Settings>Configuration.

  2. 在左側面板中， Advanced 並選擇 Developer.

  3. 展開 展開選擇器 此 JavaScript Settings 區段。

    JavaScript設定 {width="600" modal="regular"}

    如需這些組態選項的詳細說明，請參閱 JavaScript設定 在 設定參考.

  4. 設定 Merge JavaScript Files 至 Yes.

  5. 完成後，按一下 Save Config.

recommendation-more-help
2b0136b4-ef75-405f-9734-60d741f198de