共用方式為


使用樣式預設

附註

Dynamics 365 Commerce 的零售興趣群組已從 Yammer 移至 Viva Engage。 如果您無法存取新的Viva Engage社群,請填寫此表單 (https://aka.ms/JoinD365commerceVivaEngageCommunity) 以新增,並繼續參與最新的討論。

本文說明如何在 Microsoft Dynamics 365 Commerce 網站建立器中使用網站樣式預設。

樣式預設是一組儲存的、涵蓋整個網站主題所有可編輯樣式值的集合。 它可用於立即從網站建立器變更網站外觀。 樣式預設讓 Commerce 網站建立器作者能快速變更、預覽並啟用整個網站的一組樣式值,無需使用階層樣式表 (CSS) 或部署主題。 字型樣式、按鈕樣式和網站顏色是常見的可透過樣式預設管理的樣式變數範例。

網站中可用的樣式變數集合由部署到網站租用戶的主題和模組庫決定。 Dynamics 365 Commerce 線上軟體開發套件 (SDK) 允許開發人員根據特定主題實現所需數量的可編輯樣式變數。 透過啟用更多樣式變數,主題開發人員能將網站樣式的最終選擇權交到網站建立器作者手中。 因此,非開發人員也能使用工具組更新和預覽網站樣式。 此功能對於任何直接變更主題或 CSS 會造成不必要負擔的情況也很有用。

啟用了可編輯樣式變數的主題需具備預設樣式預設。 它們也可選擇包含作為已部署主題套件一部分的其他預設選項。 例如,一個主題可部署僅有單一預設「現代明亮」樣式預設。 或者,它可能包含除預設外的其他樣式預設選項,如「現代暗色」、「復古明亮」或「復古暗色」。這些內建主題預設由開發人員建立,可作為新網站設計的起點。

在網站建立器中,作者可以從主題內建預設中選擇,或利用已啟用的樣式變數自行建立樣式預設和自訂。 樣式預設可在啟用於實際網站前,先在網站建立器中預覽。 作者的樣式變更審核後,樣式預設可設定為實際網站的「啟用」狀態。

預覽樣式預設

要在網站建置器中預覽網站的樣式預設,請依照以下步驟操作:

  1. 在網站左側瀏覽窗格中,前往網站設定 > 設計

  2. 在設計編輯器頂端的樣式預設索引標籤中,於可用預設清單選擇一個預設,然後點選檢視進入預設編輯器。

    可用預設清單目前無任何預設,請參考建立自訂樣式預設以了解如何建立自訂樣式預設。

    附註

    隨主題附帶的預設會以內建徽章標示。 這些內建預設為唯讀。 若要將內建預設複製為新的可自訂預設,請點選該預設的省略符號按鈕 (...),然後選擇另存新檔

  3. 在命令列上,選擇預覽

  4. 從您的網站中選擇一個 URL 以用來預覽該樣式預設,然後點選確定

  5. 透過選擇變體名稱,選擇要預覽的頻道專屬及地區專屬 URL 變體。 將開啟一個新的預覽瀏覽器視窗,在指定頁面套用所選樣式預設。

附註

預覽 URL 具有持久性且經過驗證。 因此,您可以複製、貼上並將其傳送給其他經過驗證的同事審核,然後再將其設定為實際網站的「啟用」。 預覽 URL 也適用於檢查不同裝置、不同瀏覽器和不同螢幕上的樣式。

提示

編輯樣式預設時,建議將預覽瀏覽器視窗保持開啟於另一個瀏覽器視窗,方便快速驗證變更。 儲存預設的變更後,請重新整理已開啟的預覽瀏覽器視窗以驗證使用者體驗。

建立自訂樣式預設

要在網站建置器中建立自訂樣式預設,請依照以下步驟操作:

  1. 在網站左側瀏覽窗格中,前往網站設定 > 設計
  2. 在設計編輯器頂端的樣式預設索引標籤的命令列中,選擇新增預設
  3. 輸入新預設的名稱和描述,然後選擇儲存。 將建立一個新的可自訂預設,並以主題的預設值作為起點。

附註

您也可以從任何現有預設建立新的自訂樣式預設,方法是點選該預設的省略符號按鈕 (...),再選擇另存新檔。 或者,在預設編輯器的命令列上選擇另存新檔

修改全域與模組類型樣式值

某些主題的樣式變數在多個模組類型間共用。 這些樣式變數稱為全域樣式變數。 範例包括主要網站色彩、預設字型樣式及按鈕樣式。 設定全域變數可能會改變多種模組類型的外觀。

有些樣式值可能是模組類型專有,或者可選擇覆蓋預設全域值。 若網站主題已實作模組類型樣式變數,網站建立器作者可獨立於全域設定自訂模組類型樣式。 模組類型變數可用來擴充或覆寫主題中的全域樣式變數。

附註

網站中樣式值的階層關係如下: 樣式值由左至右,後者會覆寫前者。

主題預設值 < 全域樣式值 < 模組類型樣式值 < CSS 覆寫

要在網站建置器中更改風格預設的全域或模組類型值,請依照以下步驟操作:

  1. 在網站左側瀏覽窗格中,前往網站設定 > 設計
  2. 在設計編輯器頂端的樣式預設索引標籤中,對任何樣式預設選擇檢視以進入預設編輯器。
  3. 選擇預覽,並依照 URL 選擇步驟開啟完整瀏覽器視窗的預覽。 保持此預覽瀏覽器視窗開啟。
  4. 在預設編輯器中,選擇右上方的編輯
  5. 利用編輯器中的樣式變數控制項變更部分全域樣式值。
  6. 在編輯器頂端,於全域標籤右側的模組索引標籤中,選擇一個必須設計的模組類型。
  7. 利用樣式控制項變更該模組類型的部分值。
  8. 準備預覽變更時,於命令列選擇儲存
  9. 返回已開啟的預覽瀏覽器視窗,並重新整理。 完整瀏覽器視窗預覽有助於在不同視窗斷點、不同瀏覽器及不同裝置平台檢查樣式變更。
  10. 完成並驗證所有變更後,選擇編輯器右上角的完成編輯

附註

若您正在編輯目前於網站啟用的樣式預設,編輯器中會顯示藍色啟用徽章。 該徽章表示該預設目前已於您的網站上線。 若您更換啟用的預設,請選擇發佈將變更推送至實際網站。

使新的樣式預設在您的實際網站啟用

要將風格預設設為網站上的新啟用預設,請依照以下步驟操作:

  • 在以下任一位置選擇設定為啟用按鈕

    • 設計編輯器中樣式預設的命令列
    • 網站設定 設計的>索引標籤主要檢視中,任何可用預設的省略符號功能表 (...)

該預設的樣式值將在您的公開網站上啟用。

其他資源

新增標誌

選取網站佈景主題

使用 CSS 覆寫檔案

新增最愛圖示

新增著作權聲明

將語言新增至您的網站

在網站頁面新增指令碼以支援遙測