查看 Apigee Edge 說明文件。
前往
Apigee X說明文件。 資訊
主題是一組檔案,可用來定義網站的外觀和風格。 開發人員服務入口網站一開始是以可自訂的預設主題定義。 方便你選擇偏好的入口網站外觀和風格。更多內容 具體而言,您可以變更連結、背景、文字和其他主題元素的顏色。個人中心 也可以變更開發人員入口網站首頁顯示的歡迎訊息。
您可以透過開發人員入口網站的 UI 自訂主題,或是在自訂主題中編寫程式碼 主題檔案,即可覆寫預設主題檔案。
視您的開發人員入口網站版本而定,您可以從多種主題中選擇 從:
主題 | 說明 |
---|---|
Apigee 回應式主題 |
以 Bootstrap 3 為基礎, 之後推出的版本這個主題支援寬度介於 768 像素至 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 管理選單中選取「Appearance」。已啟用的 畫面上會顯示一個主題。
- 為你要設為預設的主題選取「設定預設值」。
如要使用 Apigee 回應式主題,請確認「Bootstrap 7.x-3.0」主題為 在此網頁上啟用 - 儲存設定。
自訂 Apigee 回應式主題
本節說明如何設定 Apigee 回應式主題,包括:
- 自訂強制回應表單
- 自訂一般設定
如要自訂強制回應表單支援,請按照下列步驟操作:
入口網站使用 Drupal Bootstrap 強制回應表單沙箱模組,將 Drupal 表單顯示為強制回應。登入和註冊表單, 做為強制回應的預設函式您可以停用此功能,讓這些表單顯示為 改為建立個別網頁
- 以具備管理員權限的使用者身分,登入開發人員入口網站。
- 依序選取「設定」>「設定」使用者介面 >啟動 Bootstrap 強制回應 Drupal 管理選單。
- 啟用或停用表單強制支援視窗功能。
- 選取「儲存設定」。
如何自訂 Apigee 回應式主題的一般設定:
- 以具備管理員或內容建立權限的使用者身分登入入口網站。
- 在 Drupal 管理選單中選取「外觀」。已啟用的主題清單 出現。
- 在頁面的「Apigee Lifecycle (預設主題)」區域中,選取 設定 (請勿選取頁面頂端的「設定」按鈕)。
- 系統隨即顯示 Apigee 回應式主題的設定頁面。
- 下表說明網頁中,您可以運用哪些區域來設定
主題。如果您變更以上任何設定,請選取 [儲存設定]。
面積 章節 說明 啟動設定
元件
控制導覽標記的顯示方式,也就是主選單的位置 (稱為 設定中的導覽列),以及區域的顯示方式:
- 導覽標記:隱藏/顯示導覽標記、開啟/關閉首頁連結 這是導覽標記的內容
- Navbar:將導覽列 (主選單) 的位置變更為 固定/靜態/一般位置,讓版面配置更加動態。
- 適用區域:為網站上的任何區域新增良好的類別, 請在區域中加入較深的背景
JavaScript
控制錨定廣告、彈出式視窗和工具提示的顯示方式:
- 錨點:修正錨定位置,並啟用平滑的流暢度 以及使用文字。
- 彈出式視窗:彈出式視窗會在任一處加入小型內容重疊元素 元素。啟用/停用彈出式視窗,並設定彈出式視窗的使用方式。
- 工具提示:設定工具提示的使用方式。您可以強制規定 顯示於每個表單元素的右側、左側、頂端或底部。 其他顯示選項。
進階
控管入口網站如何使用 BootstrapCDN 更新 Bootstrap 主題檔案。如要停用入口網站的依賴 BootstrapCDN,不過接下來必須提供您專屬的 Bootstrap 這個架構的重點在於
DevConnect 設定
設定歡迎訊息、預設顏色以及顯示的標誌大小 。
覆寫通用設定
切換顯示畫面
啟用及停用入口網站的不同區域顯示。
標誌圖片設定
指定主選單中顯示的圖片。
捷徑圖示設定
指定瀏覽器網址列或書籤中顯示的圖片 入口網站。
自訂 Apigee DevConnect 主題
Apigee DevConnect 主題是舊版入口網站的預設入口網站主題,且 升級至新的 Apigee 回應式主題。不過,您首先必須確認 執行 Bootstrap 3 之前,先安裝 Bootstrap 3 升級。
如何自訂 Apigee DevConnect 的一般設定 主題:
- 以具備管理員或內容建立權限的使用者身分登入入口網站。
- 依序選取「外觀」>「外觀」Apigee DevConnect 主題 >Drupal 中的「設定」 管理選單系統隨即顯示主題的初始設定。顏色設定 以十六進位值的形式指定。
- 按照個人偏好變更設定。
舉例來說,您可以新增或變更歡迎訊息,或是變更標題背景顏色。 標題背景顏色一開始設定為接近橘色 (#FF4300)。您可以 轉換成其他顏色,例如藍色 (#0000FF)。 - 設定變更完畢後,按一下「儲存」。
建立次主題來自訂主題
凡是定義與入口網站隨附預設主題的檔案和資產,都位於以下位置: profiles/apigee/themes 目錄 安裝目錄如果您符合以下描述,則該目錄位於 /var/www/html/profiles/apigee/themes 入口網站安裝在預設位置
如要編輯主題以修改網站的外觀和風格,請勿修改 profiles/apigee/themes。 這樣一來,下次升級入口網站時,系統就會覆寫您的變更。
而是複製預設主題,為想修改的主題建立子主題。 複製到 /sites/all/themes 檔案 目錄。有關次主題的說明,請參閱 Drupal 說明文件:https://www.drupal.org/node/225125。
- 複製 profiles/apigee/themes/apigee_responsive/apigee_responsive_starterkit 資料夾 至 /sites/all/themes 資料夾。
- 重新命名 apigee_responsive_starterkit 資料夾 傳送到 YOUR_THEME_NAME。
- 將 apigee_responsive_starterkit.info 檔案重新命名為 YOUR_THEME_NAME.info。
- 將 css/apigee_responsive_starterkit.css 重新命名為 css/YOUR_THEME_NAME.css。
- 將 js/apigee_responsive_starterkit.js 重新命名為 YOUR_THEME_NAME.js。
- 請編輯 YOUR_THEME_NAME.info 檔案,並替換下列幾行內容:
樣式試算表 [全部][] = css/apigee_responsive_starterkit.css
Script[] = js/apigee_response_starterkit.js
使用:
樣式試算表 [全部][] = css/YOUR_THEME_NAME.css
Script[] = js/YOUR_THEME_NAME.js - 將 YOUR_THEME_NAME.info 檔案中的主題名稱從 Apigee 回應式入門套件變更為您的主題 NAME。
- 如要為主題新增螢幕截圖,請替換現有的 screenshot.png 檔案。
- 如果您想為主題新增標誌,請替換原本的 logo.png 檔案。
- 如要在主題中新增網站小圖示,請取代現有的 favicon.ico 檔案。