自訂CSS未反映在預覽模式下
本文說明如何疑難排解及解決AEM Guides中的自訂CSS變更在預覽模式中無法如預期顯示的問題。
說明 description
環境
Adobe Experience Manager (AEM)指南
問題/症狀
- 套用至AEM Guides的自訂CSS在預覽模式下無法正確顯示。
- 需要背景顏色或邊框樣式等視覺變更，但切換為預覽時無法顯示。
- 未顯示任何錯誤訊息，但缺少預期的格式。
原因
如果CSS檔案路徑、選取器或語法不正確，或瀏覽器快取防止載入最新樣式，自訂CSS可能不會出現在預覽模式中。
解決方法 resolution
若要修正問題，請遵循下列步驟：
- 確定自訂CSS檔案已放置在正確的路徑中，例如
/var/dxml/folderprofiles/global-profile/XmlEditorConfigs/css_layout.css。 - 確認CSS選取器符合DITA內容的結構和預覽模式DOM。 例如，將
.previewbody .testnote用於預覽特定樣式。 - 新增或更新CSS規則，然後切換至AEM Guides中的預覽模式，驗證該樣式是否已套用。
- 請確定DITA內容使用與CSS選取器相符的正確
outputclass屬性（例如outputclass="testnote"）。 - 清除瀏覽器快取或在更新CSS後使用強制重新整理以確保載入最新樣式。
- 在不同瀏覽器中測試預覽模式，以排除瀏覽器特有的快取或轉譯問題。
完成這些步驟後，請確認自訂樣式可在「預覽」模式中看到。
recommendation-more-help
experience-cloud-kcs-help-kbarticles