佈景主題資產

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

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

[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
只有在開發人員模式中工作時,才能從​_Admin_​面板合併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