自訂主題

查看 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 

您可以使用下列程序設定入口網站的預設主題。請 請務必先在非正式環境中測試新主題,再將主題部署至 。

如何設定預設主題:

  1. 以具備管理員或內容建立權限的使用者身分登入入口網站。
  2. 在 Drupal 管理選單中選取「Appearance」。已啟用的 畫面上會顯示一個主題。
  3. 為你要設為預設的主題選取「設定預設值」
    如要使用 Apigee 回應式主題,請確認「Bootstrap 7.x-3.0」主題為 在此網頁上啟用
  4. 儲存設定。

自訂 Apigee 回應式主題

本節說明如何設定 Apigee 回應式主題,包括:

  • 自訂強制回應表單
  • 自訂一般設定

如要自訂強制回應表單支援,請按照下列步驟操作:

入口網站使用 Drupal Bootstrap 強制回應表單沙箱模組,將 Drupal 表單顯示為強制回應。登入和註冊表單, 做為強制回應的預設函式您可以停用此功能,讓這些表單顯示為 改為建立個別網頁

  1. 以具備管理員權限的使用者身分,登入開發人員入口網站。
  2. 依序選取「設定」>「設定」使用者介面 >啟動 Bootstrap 強制回應 Drupal 管理選單。
  3. 啟用或停用表單強制支援視窗功能。
  4. 選取「儲存設定」

如何自訂 Apigee 回應式主題的一般設定:

  1. 以具備管理員或內容建立權限的使用者身分登入入口網站。
  2. 在 Drupal 管理選單中選取「外觀」。已啟用的主題清單 出現。
  3. 在頁面的「Apigee Lifecycle (預設主題)」區域中,選取 設定 (請勿選取頁面頂端的「設定」按鈕)。
  4. 系統隨即顯示 Apigee 回應式主題的設定頁面。
  5. 下表說明網頁中,您可以運用哪些區域來設定 主題。如果您變更以上任何設定,請選取 [儲存設定]。

    面積 章節 說明

    啟動設定

    元件

    控制導覽標記的顯示方式,也就是主選單的位置 (稱為 設定中的導覽列),以及區域的顯示方式:

    • 導覽標記:隱藏/顯示導覽標記、開啟/關閉首頁連結 這是導覽標記的內容
    • Navbar:將導覽列 (主選單) 的位置變更為 固定/靜態/一般位置,讓版面配置更加動態。
    • 適用區域:為網站上的任何區域新增良好的類別, 請在區域中加入較深的背景

    JavaScript

    控制錨定廣告、彈出式視窗和工具提示的顯示方式:

    • 錨點:修正錨定位置,並啟用平滑的流暢度 以及使用文字。
    • 彈出式視窗:彈出式視窗會在任一處加入小型內容重疊元素 元素。啟用/停用彈出式視窗,並設定彈出式視窗的使用方式。
    • 工具提示:設定工具提示的使用方式。您可以強制規定 顯示於每個表單元素的右側、左側、頂端或底部。 其他顯示選項。

    進階

    控管入口網站如何使用 BootstrapCDN 更新 Bootstrap 主題檔案。如要停用入口網站的依賴 BootstrapCDN,不過接下來必須提供您專屬的 Bootstrap 這個架構的重點在於

    DevConnect 設定

    設定歡迎訊息、預設顏色以及顯示的標誌大小 。

    覆寫通用設定

    切換顯示畫面

    啟用及停用入口網站的不同區域顯示。

    標誌圖片設定

    指定主選單中顯示的圖片。

    捷徑圖示設定

    指定瀏覽器網址列或書籤中顯示的圖片 入口網站。

自訂 Apigee DevConnect 主題

Apigee DevConnect 主題是舊版入口網站的預設入口網站主題,且 升級至新的 Apigee 回應式主題。不過,您首先必須確認 執行 Bootstrap 3 之前,先安裝 Bootstrap 3 升級。

如何自訂 Apigee DevConnect 的一般設定 主題:

  1. 以具備管理員或內容建立權限的使用者身分登入入口網站。
  2. 依序選取「外觀」>「外觀」Apigee DevConnect 主題 >Drupal 中的「設定」 管理選單系統隨即顯示主題的初始設定。顏色設定 以十六進位值的形式指定。

  3. 按照個人偏好變更設定。
    舉例來說,您可以新增或變更歡迎訊息,或是變更標題背景顏色。 標題背景顏色一開始設定為接近橘色 (#FF4300)。您可以 轉換成其他顏色,例如藍色 (#0000FF)。
  4. 設定變更完畢後,按一下「儲存」

建立次主題來自訂主題

凡是定義與入口網站隨附預設主題的檔案和資產,都位於以下位置: profiles/apigee/themes 目錄 安裝目錄如果您符合以下描述,則該目錄位於 /var/www/html/profiles/apigee/themes 入口網站安裝在預設位置

如要編輯主題以修改網站的外觀和風格,請勿修改 profiles/apigee/themes。 這樣一來,下次升級入口網站時,系統就會覆寫您的變更。

而是複製預設主題,為想修改的主題建立子主題。 複製到 /sites/all/themes 檔案 目錄。有關次主題的說明,請參閱 Drupal 說明文件:https://www.drupal.org/node/225125

上方指定的 Drupal 說明文件提供次主題的建立詳細資訊。 但以下是建立 Apigee 回應式主題子主題的一般步驟:
  1. 複製 profiles/apigee/themes/apigee_responsive/apigee_responsive_starterkit 資料夾 至 /sites/all/themes 資料夾。
  2. 重新命名 apigee_responsive_starterkit 資料夾 傳送到 YOUR_THEME_NAME。
  3. apigee_responsive_starterkit.info 檔案重新命名為 YOUR_THEME_NAME.info。
  4. css/apigee_responsive_starterkit.css 重新命名為 css/YOUR_THEME_NAME.css。
  5. js/apigee_responsive_starterkit.js 重新命名為 YOUR_THEME_NAME.js。
  6. 請編輯 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
  7. 將 YOUR_THEME_NAME.info 檔案中的主題名稱從 Apigee 回應式入門套件變更為您的主題 NAME。
  8. 如要為主題新增螢幕截圖,請替換現有的 screenshot.png 檔案。
  9. 如果您想為主題新增標誌,請替換原本的 logo.png 檔案。
  10. 如要在主題中新增網站小圖示,請取代現有的 favicon.ico 檔案。