本頁面由 Cloud Translation API 翻譯而成。

自訂主題

本頁內容適用於 Apigee 和 Apigee Hybrid。

查看 Apigee Edge 說明文件。

主題包含通用樣式表，可為入口網站中的所有頁面提供一致的外觀和風格。主題的目標是讓您一次變更所有入口網站頁面的外觀和風格。

如要自訂、預覽及發布主題，請參閱下列章節。

探索主題編輯器

在主題編輯器中自訂、預覽及發布入口網站的主題。

如要存取主題編輯器，請按照下列步驟操作：

開啟「入口網站」頁面。

在 Apigee in Cloud 控制台中，前往「Distribution」>「Portals」頁面。

前往入口網站
按一下要編輯主題的入口網站所屬資料列。
開啟編輯器。
1. 按一下「主題」。
2. 按一下「Edit」(編輯)。

主題編輯器可讓您：

使用基本樣式主題編輯器快速自訂基本樣式，包括下列元素：
在進階主題編輯器中，覆寫主題變數或自訂主題樣式元素，包括但不限於下列元素：
預覽主題變更
在瀏覽器中預覽入口網站
將主題發布至線上入口網站

關於基礎主題

定義網站外觀的大部分基本主題樣式規則，都是以 Angular Material Design 為基礎。Angular 質感設計採用格線式版面配置，並提供一致的元件和樣式，打造統一的互動式體驗。

樣式規則是使用 Sassy 階層式樣式表 (SCSS) 定義。SCSS 是階層式樣式表 (CSS) 的超集，具備下列優點：

可在整個樣式表重複使用的全域變數。
巢狀規則可節省樣式表開發時間。
可建立 Mixin 和函式

例如：

// Variable declaration
$my-variable: 12px;

// Nested selectors
.container-selector {
  .element-selector {
    padding: $my-variable;
  }
}

// The SCSS compiler will compile the above code to:
.container-selector .element-selector {
  padding: 12px;
}

// Function declaration
@function double($x) { return $x * 2; }

// Call function
.my-selector { height: double(12px); }

// The SCSS compiler will compile the above code to:
.my-selector { height: 24px; }

SCSS 會先經過編譯並轉換為舊版 CSS，然後才在網頁上轉譯內容。

基礎主題會使用 Angular Material 樣式表，即 Material Design 主題設定 SCSS 檔案 (material-theming.scss)。這個樣式表會宣告變數、函式和混合，這些項目可使用自訂變數和 SCSS 區段覆寫，如「使用進階主題編輯器自訂主題」一文所述。

系統會根據您選取的使用者介面主題，宣告多個 SCSS 變數，定義排版、顏色和版面配置樣式，並由基本樣式表使用。您可以覆寫主題變數參考資料中列出的變數。

自訂調色盤

使用基本樣式編輯器自訂調色盤，或覆寫主題變數。

關於調色盤類別

整合式入口網站的調色盤定義會歸入下列類別，並使用基本主題中的 Material Design 顏色樣式定義。

類別	樣式
主要	導覽工具列、標題、資訊卡標題和按鈕
次要	`<pre>`和`<code>`文字
輔色	導覽、連結和強調按鈕
警告	警告和錯誤

使用基本樣式編輯器自訂調色盤

使用基本樣式編輯器，快速自訂主要和強調色調色盤。

如要使用基本樣式編輯器自訂調色盤，請按照下列步驟操作：

存取主題編輯器。
指定主要顏色和強調色。
1. 如要自訂主要顏色，請在「主要顏色」下拉式選單中選取顏色，或在文字欄位中輸入自訂的十六進位顏色值。
2. 如要自訂強調色，請在「強調色」下拉式選單中選取顏色，或在文字欄位中輸入自訂十六進位顏色值。
3. 按一下 [儲存] 以儲存變更。
4. 按一下「預覽」，在瀏覽器中預覽入口網站變更。
按一下「發布」即可發布主題。系統會提示您確認更新。

透過覆寫主題變數自訂調色盤

如要覆寫主題變數來自訂調色盤，請存取進階主題編輯器，並在「變數」部分中加入一或多個下列變數，並調整值，即可分別變更主要、次要、強調色或警告訊息顏色。請參閱「關於色調類別」。

$primary: mat-palette($mat-grey, 800, 100, 900);
$secondary: mat-palette($mat-green, 700, 100, 900);
$accent: mat-palette($mat-blue, 600, 700, 900);
$warn: mat-palette($mat-red);

查看匯入的材質主題 SCSS 檔案 (material-theming.scss) 內容，找出預先定義的顏色變數 (例如 $mat-grey)。數值分別代表預設、較淺和較深元素的陰影值。

或者，您也可以自行建立顏色變數。例如：

$my-color-variable: (
    50 : #f9f0e7,
    100 : #f0d8c2,
    200 : #e6bf9a,
    300 : #dba572,
    400 : #d49153,
    500 : #cc7e35,
    600 : #c77630,
    700 : #c06b28,
    800 : #b96122,
    900 : #ad4e16,
    A100 : #ffebe0,
    A200 : #ffc9ad,
    A400 : #ffa77a,
    A700 : #ff9661,
    // Color to render text presented on a background of the same level
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #000000,
        600 : #000000,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

然後使用該主題變更調色盤，如下例所示：

$primary: mat-palette($my-color-variable, 900, 200, 400);

自訂字型系列和樣式

使用基本樣式編輯器自訂字型系列和樣式，或覆寫主題變數。你也可以匯入自訂字型。

使用基本樣式編輯器自訂字型系列和樣式

如要使用基本樣式編輯器自訂字型系列和樣式，請按照下列步驟操作：

存取主題編輯器。
如要變更字型系列，請在「字型」下拉式選單中選取值。
如要變更字型樣式，請展開「字型樣式」部分，然後視需要編輯樣式，包括所需 HTML 元素的字型大小、行高和字型粗細。
按一下 [儲存] 以儲存變更。
按一下「預覽」，在瀏覽器中預覽入口網站變更。
按一下「發布」即可發布主題。系統會提示您確認更新。

覆寫主題變數，自訂字型系列和樣式

如要透過覆寫主題變數來自訂字型系列和樣式，請存取進階主題編輯器，並在「變數」部分中，納入一或多個經過調整值的字型系列和樣式變數。

舉例來說，如要將預設字型變更為 Arial，請定義下列變數：

$typography-main-font-family: 'Arial';

匯入自訂字型

匯入 Google 字型 (不包含在預設字型集中) 或自訂字型，然後在樣式表參照自訂字型，如下所述。

匯入 Google 字型

如要匯入 Google 字型，請存取進階主題編輯器，然後在「自訂樣式」部分匯入字型，如下所示：

@import url(https://fonts.googleapis.com/css?family=Indie+Flower);

匯入自訂字型

使用 @font-face CSS 規則匯入自訂字型。@font-face 規則支援多種不同的檔案格式類型，包括 TrueType (TTF)、Web Open Font Format (WOFF) 等。

如要匯入自訂字型，請按照下列步驟操作：

(選用) 按照「上傳檔案」一文的說明，將字型檔案上傳至素材資源管理工具。
存取進階主題編輯器，然後將 @font-face 規則新增至「自訂樣式」部分，其中 font-family 指定字型名稱，url 指定字型檔案位置 (在本例中為資產管理工具)，MyCustomFont.tff 是自訂字型檔案的名稱，而 format 則指定字型格式。
```
@font-face {
   font-family: 'MyCustomFont';
   src: url('files/MyCustomFont.tff') format('truetype')
}
```

在樣式表參照自訂字型

在「Variables」部分，參照其中一個字型系列和樣式變數中的自訂字型。例如：

$typography-main: mat-typography-config(
    $font-family: '"Indie Flower", "Oxygen", sans-serif',
    $display-4: mat-typography-level(112px, 112px, 300), // One-off huge headers
    $display-3: mat-typography-level(56px, 56px, 400), // One-off large headers
    $display-2: mat-typography-level(45px, 48px, 400), // One-off medium headers
    $display-1: mat-typography-level(34px, 40px, 400), // One-off small headers
    $headline: mat-typography-level(24px, 32px, 400), // <h1> tags
    $title: mat-typography-level(20px, 32px, 500), // <h2> tags
    $subheading-2: mat-typography-level(16px, 28px, 400), // <h3> tags
    $subheading-1: mat-typography-level(15px, 24px, 400), // <h4> tags
    $body-2: mat-typography-level(14px, 24px, 500), // Bolder body text
    $body-1: mat-typography-level(16px, 22px, 400), // Base body text
    $caption: mat-typography-level(12px, 20px, 400), // Smaller body and hint text
    $button: mat-typography-level(14px, 14px, 500), // Buttons
    $input: mat-typography-level(16px, 1.125, 400) // Input form fields
);

自訂標誌

您可以在下列位置自訂入口網站中使用的標誌：

標誌位置	預設檔案大小
電腦導覽工具列	196 x 32 像素
行動導覽工具列	156 x 32 像素
瀏覽器網址列中的網站小圖示 (和其他位置)	32 x 32 像素
登入頁面	392 x 64 像素

自訂電腦和行動裝置顯示的導覽工具列標誌。視瀏覽器寬度而定，你可能會看到電腦版或行動版標誌。

你無法刪除主要標誌，只能替換。如未指定行動裝置顯示的標誌，系統會預設使用主要標誌。

如要自訂電腦和行動裝置顯示器導覽工具列中使用的標誌，請按照下列步驟操作：

取得一或多個適合使用的公司標誌副本。建議大小請參閱上表。
存取主題編輯器。
上傳主要標誌。
1. 在「主題編輯器」的「基本樣式，主要標誌」下方，按一下「瀏覽」。
2. 找出並選取標誌檔案。
3. 按一下「開啟」。
上傳行動版標誌。
1. 在主題編輯器的「基本樣式」下方，展開「標誌選項」。
2. 按一下「行動裝置標誌」下方的「瀏覽」。
3. 找到並選取行動版標誌檔案。
4. 按一下「開啟」。
按一下 [儲存]。
按一下「預覽」，在瀏覽器中預覽入口網站變更。視瀏覽器寬度而定，你可能會看到電腦版或行動版標誌。
按一下「發布」，將變更發布到入口網站。系統提示時，請確認作業。

自訂網站小圖示

如要自訂網頁瀏覽器網址列 (和其他位置) 中使用的網站小圖示，請按照下列步驟操作：

取得適合做為 Favicon 的公司標誌副本。建議大小請參閱上表。
存取主題編輯器。
找出 Favicon 檔案。
1. 在主題編輯器的「基本樣式」下方，展開「標誌選項」。
2. 按一下「瀏覽」。
3. 找出並選取標誌檔案。
按一下「開啟」即可上傳檔案。
按一下「儲存」，即可在左側窗格中預覽變更。
按一下「發布」，將變更發布到入口網站。系統提示時，請確認作業。

如要為開發人員計畫設定註冊和登入體驗，請按照「管理公司資訊」一文的說明，自訂登入頁面的標誌。

以下提供自訂導覽工具列的快速提示：

如要自訂頁首和頁尾中導覽工具列的顏色，請按照「自訂調色盤」一文所述，變更主要顏色。
如要自訂頁首和頁尾中導覽工具列的選單項目字型大小和樣式，請變更「字型」和「按鈕」樣式，詳情請參閱「自訂字型系列和樣式」。
如要自訂標題導覽工具列的高度，請存取進階主題編輯器，並在「變數」部分中加入下列變數和調整後的值： $layout-header-height: 64px;
如要自訂頁尾導覽工具列的高度，請存取進階主題編輯器，並在「變數」部分中加入下列變數和調整後的值： $layout-footer-height: 44px;
自訂電腦和行動裝置顯示的導覽工具列標誌。

自訂背景圖片

執行下列任一工作，自訂首頁的背景圖片：

使用相同名稱和相對檔案大小 (3000 像素 x 1996 像素)，將自訂版本的 home-background.jpg 圖片上傳至資產管理工具。詳情請參閱「管理資產」。

存取進階主題編輯器，並在「自訂樣式」部分加入下列 SCSS，即可修改背景圖片檔名和邊框間距：

#index {
  &.main {
    .main-content {
      padding: 0;
      background-image: url('/files/home-background.jpg');
      background-size: cover;
    }
  }
}

如要為入口網站的所有頁面新增背景圖片，請存取進階主題編輯器，並在「自訂樣式」部分中加入下列 SCSS，並調整值：
```
 body {
    background-image: url('/files/background-image.jpg');
 }
```

自訂字體排版

如要自訂字體，請存取進階主題編輯器，並在「變數」部分調整一或多個下列字體變數的值：

$typography-main
$typography-header
$typography-footer
$typography-context-bar

例如：

// Main content typography (includes dialog and notification popups)
$typography-main: mat-typography-config(
    $font-family: 'Roboto, "Oxygen", sans-serif',
    $display-4: mat-typography-level(112px, 112px, 300), // One-off huge headers
    $display-3: mat-typography-level(56px, 56px, 400), // One-off large headers
    $display-2: mat-typography-level(45px, 48px, 400), // One-off medium headers
    $display-1: mat-typography-level(34px, 40px, 400), // One-off small headers
    $headline: mat-typography-level(24px, 32px, 400), // <h1> tags
    $title: mat-typography-level(20px, 32px, 500), // <h2> tags
    $subheading-2: mat-typography-level(16px, 28px, 400), // <h3> tags
    $subheading-1: mat-typography-level(15px, 24px, 400), // <h4> tags
    $body-2: mat-typography-level(14px, 24px, 500), // Bolder body text
    $body-1: mat-typography-level(16px, 22px, 400), // Base body text
    $caption: mat-typography-level(12px, 20px, 400), // Smaller body and hint text
    $button: mat-typography-level(14px, 14px, 500), // Buttons
    $input: mat-typography-level(16px, 1.125, 400) // Input form fields
);

接著，您可以將排版套用至特定 CSS 選擇器，如下例所示：

@include mat-base-typography($custom-typography-config, '.css-selector');

或者，您也可以將自訂字體中定義的特定字體層級套用至 CSS 選擇器，如下列範例所示：

.css-selector {
  @include mat-typography-level-to-styles($custom-typography-config, display-3);
}

使用進階主題編輯器自訂主題

如要自訂主題，請覆寫主題變數，或直接在進階主題編輯器中自訂主題樣式元素。

覆寫主題變數

在進階主題編輯器的「變數」部分中，覆寫主題變數。如需主題變數清單，請參閱「主題變數參考資料」。

舉例來說，如要自訂標頭和頁尾導覽工具列的高度，請在進階主題編輯器的「變數」部分中，分別加入下列變數並調整值：

如需其他範例，請參閱：

覆寫主題變數，自訂調色盤
覆寫主題變數，自訂字型系列和樣式

如要覆寫主題變數，請按照下列步驟操作：

存取主題編輯器。
按一下 [進階]。
按一下「變數」。
新增變數覆寫。如需可覆寫的變數清單，請參閱「主題變數參考資料」。
按一下 [儲存] 以儲存變更。
按一下「x」x即可關閉進階主題編輯器。
按一下「預覽」，在瀏覽器中預覽入口網站變更。
按一下「發布」即可發布主題。系統會提示您確認更新。

自訂主題樣式元素

直接在進階主題編輯器的「自訂樣式」部分自訂主題樣式元素。

舉例來說，如要變更在入口網站中註冊應用程式時，「新增應用程式」頁面上的「建立」按鈕顏色，請加入下列主題樣式元素並調整值：

.main .main-content button.app-save {
  color: blue;
}

另請參閱「自訂背景圖片」。

如要自訂主題樣式元素，請按照下列步驟操作：

存取主題編輯器。
按一下 [進階]。
按一下「自訂樣式」。
新增主題樣式元素。
按一下 [儲存] 以儲存變更。
按一下「x」x即可關閉進階主題編輯器。
按一下「預覽」，在瀏覽器中預覽入口網站變更。
按一下「發布」即可發布主題。系統會提示您確認更新。

在入口網站頁面中建立全寬面板

如要在入口網站頁面中建立全寬面板，請按照下列步驟操作：

在進階主題編輯器中新增下列主題樣式元素，詳情請參閱「自訂主題樣式元素」一文：

.full-width__container {
      position: relative;
      left: 50%;
      right: 50%;
      max-width: 100vw;
      margin-left: -50vw;
      margin-right: -50vw;
      background-image: url("/files/your-image.jpg");
      background-size: cover;
      background-position: 50% 50%;
      padding: 0;
     } 

    .full-width__centered {
      @include centered-content();
    }

    .full-width__content {
      // Add any additional padding here and NOT in .full-width__centered. Adding padding to
      // .full-width__centered will result in a horizontal scroll bar. You can exclude this class
      // and corresponding <div> container if no additional padding control other than the
      // min page padding is needed.
    }

編輯入口網站頁面內容，加入下列 <div> 元素，如「使用頁面編輯器開發入口網站內容」一文所述：

<div class="full-width__container">
  <div class="full-width__centered">
    <div class="full-width__content">  <!-- Include this div if you need additional padding -->
      <h2>Full Width Container</h2>
      <p>
        This content will align with the page header and other content outside
        of this full width container
      </p>
    </div>
  </div>
</div>

發布主題

如要將新增的主題和樣式自訂項目發布至已上線的入口網站，請按照下列步驟操作：

存取主題編輯器。
按一下「發布」。

如要在線上入口網站中查看已發布的內容，請按一下頂端導覽工具列的「查看入口網站」。

瞭解 CSS 優先順序規則

注意：在樣式元素宣告中使用 !important 規則來覆寫其他宣告是不當做法，不建議使用。!important 規則會影響 CSS 的層疊和特異性規則，並可能導致樣式元素宣告的偵錯作業更加困難。

CSS 特殊性說明瀏覽器在發生衝突時，用來判斷 CSS 樣式元素宣告優先順序的方法。系統會根據 CSS 樣式元素宣告的選取器類型，為其套用權重，藉此計算 CSS 特殊性。CSS 選取器越具體，權重就越高。舉例來說，在計算時，ID 屬性的權重會高於類型選取器。

舉例來說，如果您在 CSS 程式碼中定義下列樣式元素，段落元素就會顯示為紅色，因為 div 元素中的 p 樣式元素宣告比 p 樣式元素宣告更具體。

div p { color: red }  ← More specific
p { color: blue }

同樣地，如果您在 CSS 程式碼中定義下列樣式元素宣告，則以 <div class="test"></div> 標記括住的任何文字都會變成藍色，因為 div 元素中的 id 屬性樣式宣告比 div 樣式元素宣告更具體。

div#test { background-color: blue; }  ← More specific
div { background-color: red; }

如果樣式元素宣告的明確性相同，系統會優先採用最後定義的樣式元素宣告。舉例來說，如果樣式元素宣告順序如下，段落元素就會顯示藍色。

p { color: red }
p { color: blue }  ← Last specified

主題變數參考資料

下列各節會摘要說明進階主題編輯器「變數」部分中可覆寫的變數，如「覆寫主題變數」一文所述。

基本主題變數
調色盤變數
字型系列和樣式變數
字體排版變數

基本主題變數

自訂網站各處使用的基本主題前景顏色。有效值為 light 和 dark。

$base-theme: light;

調色盤變數

如要自訂調色盤，請修改下列變數，分別變更主要、次要、強調色和警告訊息顏色。請參閱「關於色調類別」。

$primary: mat-palette($mat-grey, 800, 100, 900);
$secondary: mat-palette($mat-green);
$accent: mat-palette($mat-blue);
$warn: mat-palette($mat-red);

數值分別代表預設、較淺和較深元素的陰影值。查看材質主題 SCSS 檔案 (material-theming.scss) 的內容，找出預先定義的顏色變數。

舉例來說，您可以將主要調色盤變更為綠色，如下所示：

$primary: mat-palette($mat-green, 800, 100, 900);

如要只自訂基本主題中定義的預設顏色組合的明暗度值，請加入下列程式碼並調整明暗度值：

$primary: mat-palette($custom-hex-primary, 800, 100, 900);
$secondary: mat-palette($custom-hex-secondary, 800, 100, 900);
$accent: mat-palette($custom-hex-accent, 800, 100, 900);
$warn: mat-palette($custom-hex-warn, 800, 100, 900);

字型系列和樣式變數

自訂字型系列和樣式。

// If using a custom font, import it by URL.
$typography-main-font-family: 'Roboto, sans-serif';

// Must resolve to a pixel value
$layout-responsive-breakpoint: 900px;
$layout-header-height: 64px;
$layout-header-menu-item-height: 36px;
$layout-header-menu-item-horiz-padding: 16px;
$layout-header-nested-menu-item-vert-padding: 5px;
$layout-header-menu-resp-item-height: 64px;
$layout-footer-height: 44px;
$layout-footer-menu-item-height: 36px;
$layout-footer-menu-item-horiz-padding: 16px;
$layout-footer-nested-menu-item-vert-padding: 5px;
$layout-context-bar-height: 60px;
$layout-context-bar-button-height: 36px;
$layout-context-bar-button-horiz-padding: 16px;
$layout-main-content-max-width: 1400px;
$layout-main-content-vert-padding: 38px;
$layout-horizontal-min-padding: 24px;

// Uses variables declared above
$typography-header: $typography-main;
$typography-footer: $typography-main;
$typography-context-bar: $typography-main;

如要更精細地控制排版，請指定自己的自訂排版，如下例所示：

$typography-context-bar: mat-typography-config(
    $font-family: 'Ubuntu, sans-serif',
    $headline: mat-typography-level(30px, 30px, 500), // Title
    $button: mat-typography-level(19px, 19px, 200) // Action buttons
);

字體排版變數

自訂 Angular Material 字體排版。每個排版層級都會定義字型大小、文行高度和字型粗細。

$typography-main-display-4: mat-typography-level(112px, 112px, 300);
$typography-main-display-3: mat-typography-level(56px, 56px, 400);
$typography-main-display-2: mat-typography-level(45px, 48px, 400);
$typography-main-display-1: mat-typography-level(34px, 40px, 400);
$typography-main-headline: mat-typography-level(24px, 32px, 400);
$typography-main-title: mat-typography-level(20px, 32px, 400);
$typography-main-subheading-2: mat-typography-level(16px, 28px, 400);
$typography-main-subheading-1: mat-typography-level(15px, 24px, 400);
$typography-main-body-2: mat-typography-level(14px, 24px, 400);
$typography-main-body-1: mat-typography-level(16px, 22px, 400);
$typography-main-caption: mat-typography-level(12px, 20px, 400);
$typography-main-button: mat-typography-level(14px, 14px, 700);
$typography-main-input: mat-typography-level(16px, 1.125, 400);

// Copies properties declared above into a cohesive object
$typography-main: mat-typography-config(
  $font-family: $typography-main-font-family,
  $display-4: $typography-main-display-4,
  $display-3: $typography-main-display-3,
  $display-2: $typography-main-display-2,
  $display-1: $typography-main-display-1,
  $headline: $typography-main-headline,
  $title: $typography-main-title,
  $subheading-2: $typography-main-subheading-2,
  $subheading-1: $typography-main-subheading-1,
  $body-2: $typography-main-body-2,
  $body-1: $typography-main-body-1,
  $caption: $typography-main-caption,
  $button: $typography-main-button,
  $input: $typography-main-input);

自訂主題 透過集合功能整理內容 你可以依據偏好儲存及分類內容。

探索主題編輯器

關於基礎主題

自訂調色盤

關於調色盤類別

使用基本樣式編輯器自訂調色盤

透過覆寫主題變數自訂調色盤

自訂字型系列和樣式

使用基本樣式編輯器自訂字型系列和樣式

覆寫主題變數，自訂字型系列和樣式

匯入自訂字型

匯入 Google 字型

匯入自訂字型

在樣式表參照自訂字型

自訂標誌

自訂電腦版和行動版顯示器的導覽工具列標誌

自訂網站小圖示

自訂登入頁面的標誌

自訂導覽工具列

自訂背景圖片

自訂字體排版

使用進階主題編輯器自訂主題

覆寫主題變數

自訂主題樣式元素

在入口網站頁面中建立全寬面板

發布主題

瞭解 CSS 優先順序規則

主題變數參考資料

基本主題變數

調色盤變數

字型系列和樣式變數

字體排版變數

自訂主題