共用方式為


使用 CSS 覆寫檔案

附註

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

本文介紹為什麼、何時和如何使用 Microsoft Dynamics 365 Commerce 中的階層式樣式表 (CSS) 覆寫檔案。

永久網站樣式通常應透過網站的主題進行處理。 主題為網站任何頁面上的模組提供基礎 CSS 和樣式設定。 主題是使用 Dynamics 365 Commerce 線上軟體開發套件 (SDK) 建立,並透過 Microsoft Dynamics Lifecycle Services (LCS) 部署到您的網站。 SDK 中的主題偵錯功能和模組介面設定能協助網站開發人員建立可自訂和內聚網站設計套件。 將這些設計套件部署到網站時,網站作者可以專注於建立、編輯和發佈內容,而不是網站開發。

有鑑於主題通常的生命週期,依賴開發人員透過 SDK 和 LCS 部署管線進行樣式變更,在某些情境下可能是使人望之卻步的。 如果未設定 SDK,或您沒有時間等候 LCS 部署,則網站原型或修補程式可能看起來很麻煩。

在這些情境下,CSS 覆寫檔案能幫上忙。 在 Commerce 製作工具中,經過身份驗證的使用者可以上傳 CSS 檔案,預覽它,然後將其啟動以覆寫網站的主題。 不需要 SDK 或 LCS 部署的經常性開支費用。 在 CSS 覆寫檔案中指定的覆寫可以小至對單一文字樣式的變更,也可以大至對整個品牌的全面改革。

在使用 CSS 覆寫檔案之前,請注意以下限制:

  • 在網站上,一次只能有一個 CSS 覆寫檔案處於使用中。 因此,所有現行覆寫都必須存在於單一覆寫檔案中。
  • 儘管您可以在 Commerce 製作工具中預覽覆寫,但沒有專用偵錯功能可以協助識別覆寫引入的任何錯誤。 換句話說,當您使用 CSS 覆寫檔案時,您沒有 SDK 為模組和製作驗證提供的相同工具集。

儘管如此,CSS 覆寫檔案提供一種快速方法,可以在完整主題更新開發和部署之前,原型設計或實作 Hotfix。

建立 CSS 覆寫檔案

若要建立 CSS 覆寫檔案,您可以使用任何整合開發環境 (IDE)、文字編輯器或原始程式碼編輯器。 典型方法是在瀏覽器中使用標準 Web 偵錯工具,以識別現有網站上的樣式選取器、屬性和值。 大多數瀏覽器都允許您在偵錯工具中變更值和預覽它們。 找出要進行的變更後,您可以將它們儲存到您自己的 CSS 檔案。

上傳 CSS 覆寫檔案

要在 Commerce 系統上將 CSS 檔案上傳到您的網站,請遵循以下步驟:

  1. 在製作工具中,移至您的網站。

  2. 在左側功能窗格中,選取設計

    附註

    根據您正在使用的 Commerce 製作工具版本,您可能需要在選取設計之前,先展開瀏覽窗格中的設定

  3. 在主設計窗格的頂端,選取 CSS 覆寫索引標籤 (如果尚未選取)。

  4. 可用 CSS 覆寫底下,選取上傳 CSS 檔案。 會出現檔案總管視窗。

  5. 在檔案總管中,瀏覽到並選取 CSS 檔案,然後選取開啟。 上傳的 CSS 檔案現在顯示在可用 CSS 覆寫底下。

預覽 CSS 覆寫檔案

要在將 CSS 覆寫檔案啟用於你的線上網站前預覽,請依照以下步驟操作:

  1. 在左側瀏覽窗格中,選取設計,然後在 CSS 覆寫 索引標籤上的可用 CSS 覆寫底下,找出要預覽的 CSS 檔案。
  2. 在 CSS 檔案名稱旁邊,選取預覽網站
  3. 選取 URL 對話方塊中,選取要查看套用覆寫之網站的 URL,然後選取確定
  4. 如果所選 URL 有多個變體,請在顯示的預覽變體對話方塊中,選取所需的變體。

會隨即開啟一個新瀏覽器索引標籤或視窗,您可以在其中針對您的網站驗證樣式覆寫。 然後,您可以將 URL 分享給其他通過身份驗證的 Commerce 使用者以供審查和意見反應。

在您的即時網站上啟動 CSS 覆寫檔案

在您預覽和核准 CSS 覆寫檔案後,您可以在即時網站上啟動它。

附註

在您的網站上,一次只能有一個 CSS 覆寫檔案處於作使用中。 如果您啟動新的覆寫檔案,則先前的覆寫檔案將會停用。 因此,請確認所有必須的覆寫都存在於單一 CSS 覆寫檔案中。

要啟用 CSS 覆寫檔案,請依照以下步驟操作:

  1. 在左側瀏覽窗格中,選取設計,然後在 CSS 覆寫 索引標籤上的可用 CSS 覆寫底下,找出要啟動的 CSS 檔案。
  2. 在 CSS 檔案名稱底下,選取啟動。 覆寫檔案在您的即時網站上會立即變為使用中。

停用您的即時網站上的 CSS 覆寫檔案

要停用您網站上的 CSS 覆寫檔案,請依照以下步驟進行:

  1. 在左側瀏覽窗格中,選取設計,然後在 CSS 覆寫 索引標籤上的可用 CSS 覆寫底下,找出要停用的 CSS 檔案。
  2. 在 CSS 檔案名稱底下,選取停用。 覆寫檔案在您的即時網站上會立即變為停用中。

提示

若要存取 CSS 覆寫檔案的其他選項,請選取 CSS 檔案名稱旁邊的省略符號 (...)。 下載重新命名取代 選項對於快速變更現有 CSS 覆寫檔案很有用。

其他資源

新增標誌

選取網站佈景主題

使用樣式預設

新增最愛圖示

新增著作權聲明

將語言新增至您的網站

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