20.07.27 - Apigee Edge 整合式入口網站版本資訊

查看 Apigee Edge 說明文件。
前往 Apigee X說明文件。 資訊

7 月 27 日星期一，我們將開始推出新版 Apigee Edge 整合入口網站。

新功能和強化項目

本節說明此版本的新功能和強化項目。

提升無障礙功能和回應速度

以下列出為這個版本實作的無障礙功能和回應速度改善項目。

• 鍵盤導覽：您現在可以使用鍵盤瀏覽標頭和頁尾導覽列、SmartDoc 側邊導覽、應用程式清單、應用程式檢視畫面和 API 資訊卡。
  
• 焦點管理： 使用標頭導覽列和 SmartDoc 側邊導覽時，焦點會移至頁面中的第一個 <H1>。
• 即時區域：系統現在會將文字篩選作業產生的 API 清單變更回報給使用螢幕閱讀器的使用者。
• HTML 標題的語義用法：所有文字現在均包含在語意正確的 HTML 標記中。我們現已在整個入口網站中使用適當的階層標題結構。
• <H1> 僅使用部分 <H1>：目前每個網頁都只有一個 <H1>，因此螢幕閱讀器可以輕鬆識別網頁內容最為豐富的說明。
• 樣式大寫：使用全大寫做為視覺強調色，現在只能用於 CSS，而非實際文字。
• DOM 的邏輯順序：「建立」及「編輯應用程式」頁面上的動作按鈕，已移至 DOM 中的表單元素下方，可在表單互動完成時，依照邏輯順序啟用這些按鈕。
• 視覺元素的文字說明：標籤、替代文字和按鈕文字的使用方式都經過改善，能改善螢幕閱讀器的瀏覽體驗。
• 色彩對比：產品中許多地方的色彩對比度已提高，以符合 WCAG AA 的對比度規定。將 API 清單中的 API 標題移至圖片下方，避免可能的色彩對比不足。
• 表單驗證：表單提交按鈕在「建立」和「編輯應用程式」頁面已不再停用，您可以啟用該按鈕來驗證表單。「建立和編輯應用程式」頁面中已驗證的表單欄位現在會顯示驗證錯誤的文字說明。
• 回應速度：現在，除了 SmartDoc 以外，所有網頁都適用寬度上限。現在可以在狹小的手機螢幕上使用 SmartDoc 導覽功能。「建立」和「編輯應用程式」頁面現在可根據較小的螢幕提供回應。

可能會影響入口網站的 DOM 變更

請特別留意以下情況：

• 導覽列 (頁首和頁尾) 和網頁標題採用 CSS 覆寫設定樣式 (或隱藏)：頁面內容的寬度現在最大。為了將導覽列和網頁標頭延伸至瀏覽器視窗的邊緣，Apigee 會設定 :before 虛擬元素的樣式。詳情請參閱覆寫導覽列和網頁標題的主要顏色。
• 有些頁面元素的背景延伸至瀏覽器視窗的邊緣 (全螢幕背景圖片除外)：為了提升回應速度，頁面內容的寬度上限會受到限制，這可能會限制自訂頁面中原先以全寬的面板顯示內容。如要進一步瞭解如何使用新的最大寬度設定，請參閱「在入口網站頁面中建立全形面板」。
• 已透過 CSS 選取器指定特定 HTML 標題層級，以便修改文字樣式：套用至特定內容的標題層級已變更。例如：<H1> → <H2> 請詳閱這個版本的詳細變更清單，瞭解確切受影響的內容。
• 已選取白色或極亮顏色做為「次要顏色」入口網站主題編輯器中的次要顏色：次要顏色用於在白色背景下難以辨識的導覽元素。建議您選擇無障礙的次要顏色，在特定情況下，視需要覆寫自訂 CSS 的顏色。
• 文字內連結的樣式經過調整：連結樣式現已變得更容易存取。請查看下方的變更，瞭解這些變更會如何與現有樣式互動。
• 居家裝置總覽資訊卡內容區域的 2 像素邊框已透過 CSS 覆寫設定樣式，或是已隱藏： 這個邊框已從 <mat-card-content> 移至 <mat-card-actions> 的框線頂端。

詳細異動內容摘要

以下各節將摘要說明這個版本的其他異動內容。

整個入口網站的變更

以下摘要說明整個入口網站的變更。

• 下列變數已不再使用：
  • $layout-horizontal-padding
  • $layout-main-content-horiz-padding
  • $layout-header-horiz-padding
  • $layout-context-bar-horiz-padding
• 以下新變數可讓您控制主要內容區域的寬度上限，以及主要內容區域的最小水平邊框間距：
  • $layout-main-content-max-width
  • $layout-horizontal-min-padding

主要導覽列異動

主要導覽列的變更摘要如下。

• <img> 標誌現已納入 <a> 中，適用於電腦和行動裝置螢幕大小
• 使用者下拉式選單按鈕現在是 <button>，而非 <a>

連結樣式變更

現在文字中的標準連結 <a> 預設會顯示底線底線 (根據主題設定「次要顏色」)，

404 網頁變更

以下摘要說明 404 網頁的變更。

• 「立即登入」現在是 <H2>，而不是 <H1>
• 說明文字現在是<H2>，而不是 <H1>

API 頁面

API 頁面變更摘要如下 (依類別區分)。

• API 搜尋/篩選器輸入資訊卡：
  • <mat-card-content class="mat-card-content"> 現在會納入搜尋 API 資訊卡的標題和輸入內容
  • <H2> 現在使用 class="mat-subheading-1"，而不是 class="api-doc-filter-title"
  • <mat-form-field> 現在使用 appearance="outline"
  • <mat-form-field> 已經在輸入之前加上搜尋圖示："<mat-icon matPrefix>search</mat-icon>"
  • 輸入內容中新增了 Aria 標籤和控制參照
• 空白 API 清單訊息：
  • 「找不到 API」現在是 <H2>，而不是 <H1>
  • 說明內容現在是 <H3>，而非 <H2>
• API 資訊卡清單：

  「找不到與搜尋字詞相符的 API」現在是 <H2>，而不是 <H1>

• API 資訊卡：
  • 已移除「>div class="api-doc-card-content-image-gradient"></div>」
  • API 標題已從含有 <div> 的圖片中移出，並立即移至 <div class="api-doc-card-content-title"></div> 圖片後方的 <div> 中
  • API 標題現在是 <H2>，而不是 <H1>

應用程式清單：

• 空白狀態：
  • 「開始使用」現在是 <H2>，而不是 <H1>
  • 空白狀態指引現在是 <H3>，而非 <H2>
• 名單：
  • 「我的應用程式」現在是 <H2>，而不是 <H1>
  • <mat-row>現在在 <a> 中強力處理

建立及編輯應用程式頁面

「建立與編輯應用程式」頁面的變更摘要如下。

• 「<div class="app-buttons">」已移至 <form> 的結尾並由「<div class="form-buttons-sticky-container">」取代
• .app-layout-section 類別的所有使用情況已變更為 .details-layout-section
• .app-layout-section-title 類別的所有使用情況已變更為 .details-layout-section-title
• 所有區段標題現在都是<H2>，而非<div>
• .app-layout-section-content 類別的所有使用情況已變更為 .details-layout-section-content
• API 清單不再是附有切換開關的 API 卡清單 (類似 API 清單)。它是 API 表格
• 回呼網址輸入內容已移至新的部分
• 「儲存」按鈕現在使用霧化按鈕樣式和主要顏色背景
• 資料表現已納入具有 .app-table-wrapper 類別的 <div>
• 表格標頭現在使用 <thead> 包裝函式
• 表格主體現在使用 <tbody> 包裝函式
• 「[style.width]」不再用於設定表格欄寬度
• 資料表中的所有 <a> 標記現在都改用 <button

團隊清單

團隊清單的變更摘要如下。

• 空白狀態：
  • 「開始使用」現在是 <H2>，而不是 <H1>
  • 「建立團隊來管理共用應用程式擁有權」現在是 <H3>，而不是 <H2>
• 名單：

  「團隊」標題現在是 <H2>，而不是 <H1>

建立及編輯團隊頁面

「建立和編輯團隊」頁面變更摘要如下。

• 在 <form> 上，類別 .teams-form 已由 .details-form 取代
• <div class="teams-buttons"> 已移至 <form> 結尾，並由 <div class="form-buttons-sticky-container"> 取代
• .teams-layout-section 類別的所有使用情況已變更為 .details-layout-section
• .teams-layout-section-title 類別的所有使用情況已變更為 .details-layout-section-title
• .teams-layout-section-content 類別的所有使用情況已變更為 .details-layout-section-content
• 已在<table class="team-apps">的附近新增「<div class="team-apps-container">」

SmartDocs

以下摘要列出 SmartDoc 介面的變更。

• 側邊導覽：
  • 側邊導覽已完全改寫為角材質的元件
  • 側邊導覽列標題現在是 <H2>，而不是 <div>
  • 導覽項目現在使用入口網站的預設文字顏色，而非入口網站主題編輯器「次要顏色」
  • 在側邊導覽列中選取、聚焦和懸停的項目時，現可使用入口網站主題編輯器的深色和淺色變化版本 「次要顏色」分別為文字和背景
• 內容：
  • 許多子標題，例如「路徑參數」和「標頭參數」現在是 <H2>，而不是 <H3>
  • 總覽頁面上的結構定義實體現在是 <H3>=>，而非 <H2>

改善現有首頁的無障礙功能

如果您離開入口網站，您必須編輯首頁，才能為可瀏覽的資訊卡帶來全新的無障礙功能改善項目，詳情如下：

1. 從 <mat-card> 容器中移除 href=""。
2. 針對 <mat-card-header> 內的卡片標題，使用 <H2> 取代 <H1>。
3. 在卡片標題 <h2> 中，將文字納入 <a class="navigable-content" href="href-name"> 中，並將 href-name 設為適合卡片導覽的值。

或者，你也可以使用下列資訊卡範本：

<mat-card class="home-page-card quick-start">
  <mat-card-header class="home-page-card-header" color="primary">
    <mat-icon class="home-page-card-header-icon">
      check_circle
    </mat-icon>
    <h2 class="home-page-card-header-text">
      <a class="navigable-content" href="page-route">
        Card heading
      </a>
    </h2>
  </mat-card-header>
  <mat-card-content class="home-page-card-content">
    <p class="home-page-card-content-text">
      Extra content
    </p>
  </mat-card-content>
</mat-card>
</p>

覆寫導覽列和網頁標題的主要顏色

如何延伸導覽列和頁面標題 ，請使用進階主題編輯器，為導覽列和網頁標頭新增自訂樣式，類似在標頭導覽列中使用：

// Override use of the primary color for header navigation bar background-color
.nav-header .mat-toolbar {
  color: #fff //  color for navigation text

  // Use the :before pseudo element to style the background of full-width bars
  // (header and footer navigation bars and page headers)
  &:before {
    background-color: #000; // background color for header navigation bar
  }
}

更新管理應用程式 API 的程序

在整合式入口網站上，管理應用程式內 API 的使用者互動行為已經變更。 具體來說，在管理應用程式時，使用者必須在 API 區段中按一下 或 (而不是切換鈕)，才能分別透過應用程式啟用或停用 API 存取權。

更新入口網站上的所有程序，說明如何在應用程式頁面上管理 API (如適用)。若需更多資訊，請參閲 管理應用程式中的 API。

修正錯誤

這個版本修正了下列錯誤。這份清單主要適用對象 來解決他們的支援單問題它無法針對 所有使用者。

已知問題

如需整合入口網站的已知問題清單，請參閱整合入口網站的已知問題。