您正在查看 Apigee Edge 說明文件。
查看 Apigee X 說明文件。 資訊
主題是一組檔案,用來定義網站的外觀與風格。Developer Services 入口網站最初定義了預設主題,但您可以自訂這個主題。這可讓你選取偏好的入口網站外觀和風格。更具體來說,您可以變更連結、背景、文字和其他主題元素的顏色。也可以變更開發人員入口網站首頁顯示的歡迎訊息。
您可以透過開發人員入口網站 UI 自訂主題,或是在自訂主題檔案中編寫程式碼來覆寫預設主題檔案。
視您的開發人員入口網站版本而定,有許多主題可供選擇:
主題 | 說明 |
---|---|
Apigee 回應式主題 |
根據 Bootstrap 3,這是較新版本入口網站的預設主題。這個主題支援寬度介於 768 像素到 1400 像素之間的裝置。這個主題提供所有 Bootstrap 3 功能。 注意:如要使用 Apigee 回應式主題,請確認 Bootstrap 7.x-3.0 主題已啟用。 |
Apigee DevConnect 主題 |
Apigee 回應式主題的預設入口網站主題。 現有入口網站可以升級為新的 Apigee 回應式主題,但必須先確保所有區塊、範本和其他內容都與 Bootstrap 3 相容,並且已啟用 Bootstrap 7.x-3.0 主題。 |
Apigee 基礎主題 |
Apigee DevConnect 主題的父項主題,不適合單獨使用。 |
設定預設主題
如果入口網站仍在使用舊版 Apigee DevConnect 主題,可能會以下列格式看到警告:
"Apigee DevConnect theme" is out of date
您可以按照以下程序設定入口網站的預設主題。將主題部署至實際工作環境之前,請務必先在非實際工作環境中測試新主題。
如何設定預設主題:
- 以具備管理員或內容建立權限的使用者登入入口網站。
- 在 Drupal 管理選單中選取「外觀」。畫面上隨即會顯示已啟用的主題清單。
- 針對您要設為預設的主題,選取「設定預設值」。
如要使用 Apigee 回應式主題,請確認該頁面也已啟用 7.x-3.0 主題。 - 儲存設定。
自訂 Apigee 回應式主題
本節說明如何設定 Apigee 回應式主題,包括:
- 自訂強制回應表單
- 自訂一般設定
如何自訂強制回應表單支援:
入口網站使用 Drupal Bootstrap Modal 表單沙箱模組,將 Drupal 表單顯示為強制回應。登入和註冊表單的預設函式為強制回應。您可以停用這項功能,改為顯示個別頁面。
- 以具備管理員權限的使用者的身分登入開發人員入口網站。
- 在 Drupal 管理選單中,依序選取「Configuration」>「User」>「Bootstrap Modal」表單。
- 啟用或停用表單強制回應支援。
- 選取「儲存設定」。
如要自訂 Apigee 回應式主題的一般設定:
- 以具備管理員或內容建立權限的使用者登入入口網站。
- 在「Drupal 管理」選單中選取「外觀」。畫面上隨即會顯示已啟用的主題清單。
- 在頁面的「Apigee Responsive (預設主題)」區域中,選取「Settings」(設定) (請勿選取頁面頂端的「Settings」(設定) 按鈕)。
- 畫面上會隨即顯示 Apigee 回應式主題的設定頁面。
- 下表說明該頁面中可用來設定主題的區域。如果你變更以上任何設定,請選取「儲存設定」。
領域 章節 說明 啟動設定
元件
控制導覽標記的顯示方式、主選單的位置 (在設定中稱為導覽列),以及區域顯示方式:
- 導覽標記:隱藏/顯示導覽標記,開啟/關閉導覽標記中的首頁連結。
- 導覽列:將導覽列 (主選單) 的位置變更為固定/靜態/一般位置,讓版面配置更加動態。
- 妥善的區域:針對網站上的任何區域新增足夠類別,為該區域新增較深的背景。
JavaScript
控制錨點、彈出式視窗和工具提示的顯示方式:
- 錨點:修正錨點位置,以便順暢捲動。
- 彈出式視窗:彈出式視窗會為任何元素新增小型內容的疊加層。啟用/停用彈出式視窗,並設定彈出式視窗的使用方式。
- 工具提示:設定工具提示的使用方式。您可以強制每個工具提示顯示在每個表單元素的右側、左側、頂端或底部,並設定其他顯示選項。
進階
控管入口網站使用 BootstrapCDN 更新 Bootstrap 主題檔案的方式。您可以停用 BootstrapCDN 入口網站的依賴關係,但必須提供自己的 Bootstrap 架構實作項目。
DevConnect 設定
設定歡迎訊息、預設顏色,以及顯示在主選單中的標誌大小。
覆寫通用設定
切換顯示畫面
啟用及停止顯示入口網站的不同區域。
標誌圖片設定
指定主選單中顯示的圖片。
捷徑圖示設定
指定瀏覽器網址列中顯示的圖片,或入口網站的書籤。
自訂 Apigee DevConnect 主題
Apigee DevConnect 主題是舊版入口網站的預設入口網站主題,而且可以升級為新的 Apigee 回應式主題。不過,您必須先確保所有區塊、範本和其他內容都與 Bootstrap 3 相容,再執行升級作業。
如要自訂 Apigee DevConnect 主題的一般設定:
- 以具備管理員或內容建立權限的使用者登入入口網站。
- 在 Drupal 管理選單中,依序選取「Appearance」>「Apigee DevConnect theme > 設定」。系統隨即會顯示主題的初始設定。顏色設定是以十六進位值的形式指定。
- 請按照個人偏好變更設定。
例如新增或變更歡迎訊息,或變更標題背景顏色。標頭背景顏色最初會設為接近橘色 (#FF4300)。您可以將其改為其他顏色,例如藍色 (#0000FF)。 - 變更完設定後,按一下「儲存」。
透過建立次主題來自訂主題
凡是定義入口網站隨附預設主題的檔案和資產,全都位於入口網站安裝目錄下的 profiles/apigee/themes 目錄。如果您已在預設位置安裝入口網站,這個目錄位於 /var/www/html/profiles/apigee/themes。
如要編輯主題來修改網站的外觀與風格,請勿直接修改 profiles/apigee/themes 下的主題檔案。這麼做的話,系統會在您下次升級入口網站時覆寫您的變更。
而是將預設主題檔案複製到 /sites/all/themes 目錄,建立您想修改的主題子主題。如需子主題的操作說明,請參閱 https://www.drupal.org/node/225125 中的 Drupal 說明文件。
- 將 profiles/apigee/themes/apigee_responsive/apigee_responsive_starterkit 複製到 profiles/apigee/themes/apigee_responsive/apigee_responsive_starterkit 資料夾。
- 將 apigee_responsive_starterkit 資料夾重新命名為 YOUR_THME_NAME。
- 將 apigee_responsive_starterkit.info 檔案重新命名為 YOUR_THME_NAME.info。
- 將 css/apigee_responsive_starterkit.css 重新命名為 css/YOUR_THME_NAME.css。
- 將 js/apigee_responsive_starterkit.js 重新命名為 YOUR_THME_NAME.js。
- 編輯 YOUR_THME_NAME.info 檔案並替換以下幾行:
stylesheet[all][] = css/apigee_Responsive_starterkit.css
Script[] = js/apigee_Responsive_starterkit.js
替換為:
stylesheets[all][all] = css/YOUR_THs
[ME_NAME] - 將 YOUR_THME_NAME.info 檔案中的主題名稱從 Apigee 回應式入門套件變更為您的主題名稱。
- 如要為主題新增螢幕截圖,請替換現有的 screenshot.png 檔案。
- 如要在主題中加入新標誌,請替換離開的 logo.png 檔案。
- 如要在主題中新增網站小圖示,請取代現有的 favicon.ico 檔案。