為您的入口網站建立佈景主題

當您建置入口網站且入口網站功能搭配 Microsoft Dynamics 365 使用,您將使用啟動程序前端架構。 透過利用 啟動程序 生態系統,您可以快速輕鬆地為組織在入口網站上套用品牌。

使用啟動程序實作入口網站範本

啟動程序 是前端架構,包含一般 Web 應用程式介面元素的 CSS 和 JavaScript 元件。 它包含導覽元素表單按鈕的樣式,以及回應格線配置系統,可讓網站配置配合不同螢幕大小的裝置動態調整,像是手機和平板電腦。 透過使用 啟動程序 配置系統就能夠開發單一網站,對您的客戶可以使用的所有裝置呈現適當的介面。

Dynamics 365 入口網站隨附的範本是使用標準 啟動程序 元件實作,提供少量的額外自訂樣式。 因此,當您實作範本時,可以利用啟動程序自訂選項。 您可以快速自訂佈景主題 (字型、色彩等),並且在整個入口網站上一致套用。

自訂 啟動程序

啟動程序 支援透過一組變數自訂。 您可以設定任何或所有這些變數來自訂值,然後下載根據這些值編譯的自訂版啟動程序。

啟動程序變數的功能在於,它們不是臨摹單一元素的樣式。 架構中的所有樣式都會以這些值為基礎衍生。 以 @font-size-base 變數為例。 這會指定 啟動程序 指派給一般本文的大小。 不過,啟動程序 也可以使用此變數表示標題及其他元素的字型大小。 h1 元素的大小可定義為 @font-size-base 大小的 300%。 設定這個變數就可以運用一致的方式控制入口網站的整體印刷比例。 同樣地,@link-color 變數可控制超連結的色彩。 對於您指派給此值的色彩,啟動程序為連結定義的暫留色彩會比您自訂的色彩深 15%。

建立自訂版 啟動程序 的標準方式是透過官方啟動程序網站。 不過,由於啟動程序十分普遍,因此有許多基於此目的建立的協力廠商網站。 這些網站可能會提供易用的 啟動程序 自訂介面,或是提供預先設計的 啟動程序 版本供您下載。 官方啟動程序自訂員網站提供有關啟動程序自訂的詳細資訊。 網站一律保持最新狀態,但目前未包含部分 UI 功能,像是色彩選擇器和即時預覽。

當您下載自訂的 啟動程序 版本時,它會包含下列目錄結構。

css/ |-- bootstrap.min.css img/
|-- glyphicons-halflings-white.png |-- glyphicons-halflings.png js/ |-- bootstrap.min.js

或者,根據使用的自訂工具應用程式而定,可能只包含 bootstrap.min.css。 無論哪一種,bootstrap.min.css 都是包含自訂的檔案。 所有 啟動程序 自訂版本的其他檔案均相同,而且已包含在您的 Dynamics 365 入口網站中。

套用自訂 啟動程序 佈景主題至您的網站

在您擁有自訂的 bootstrap.min.css 之後,就可以將它套用至入口網站,透過下列兩種方式之一。 如果您是開發人員且習慣直接處理應用程式的原始程式碼,使用您的自訂版本覆寫應用程式原始檔中隨附的 bootstrap.min.css 版本就行了。 在大多數情況下,建議您套用自訂 啟動程序 佈景主題,而不要修改您的網站程式碼,將它做為 Dynamics 365 入口網站的內容管理系統中的 Web 檔案上傳。

  1. 以具有內容管理權限的使用者身分登入您的應用程式。 其他資訊: 設定 PRM 入口網站的 Web 角色
  2. 移至應用程式的 [首頁] 頁面。
  3. 針對 bootstrap.min.css 選取 [下層] > 編輯此檔案,從內容編輯工具列 (位於瀏覽器視窗的右上角)。
  4. 選取您的自訂 bootstrap.min.css 檔案,使用顯示的 [編輯此檔案] 對話方塊中的 [上傳檔案] 欄位。
  5. 確定 [部分 URL] 欄位設定為 bootstrap.min.css。 這個值會向 Dynamics 365 入口網站指出,它應使用您的自訂 啟動程序 版本,而不是隨附的預設版本。
  6. 您也可能想要選取 [從 Sitemap 隱藏] 核取方塊 (預設已選取),如此這個檔案就不會在網站上任何瀏覽元素中對使用者顯示。
  7. [儲存] 檔案。
  8. 重新整理頁面,您自訂的樣式就會立即出現。

以下螢幕擷取畫面是套用至 [社群] 入口網站的 啟動程序 自訂版本範例:

套用自訂啟動程序佈景主題至您的網站

其他入口網站佈景主題選項

除了自訂 啟動程序 版本之外,Dynamics 365 入口網站也支援上傳自己的自訂 CSS 檔案至內容管理系統。 如此即可套用額外的樣式至入口網站,而不必部署程式碼的新版本。 做法是,依照先前描述的程序上傳自訂 啟動程序 CSS,但是使用包含您自己的 CSS 的檔案,然後為此 Web 檔案選擇新的 [部分 URL]。 只要 [部分 URL] 的結尾是 .css,Dynamics 365 入口網站就會辨識它並將它套用至網站。

使用自訂 啟動程序 版本時,您可以搭配使用內容編輯系統,新增自訂標誌和品牌至入口網站標題。 有了這些簡單卻功能強大的選項,只要幾分鐘就可以讓您的 Dynamics 365 入口網站的應用程式顯示您的品牌。

請參閱

使用社群入口網站與社群互動
設定 Dynamics 365 入口網站