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。

修正錯誤

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

問題 ID 元件名稱 說明
161269688 整合式入口網站

在 Apigee hybrid 中，素材資源縮圖無法正確顯示

縮圖現在可正確顯示在「資產」頁面上。

161295683 整合式入口網站

伺服器失敗，但未設定應用程式說明

現在，如果沒有定義應用程式的說明 (選填欄位)，就能成功建立應用程式。

西元 160898967 年 整合式入口網站

入口網站的到達網頁無法正確捲動

現在可以捲動入口網站的到達網頁。
160613314、
159197760、
158643196、
158069283、
158069066、
140154942 人 		整合式入口網站

其他安全性修正項目
158593496 整合式入口網站

無法在 V1 入口網站中建立開發人員應用程式

已修正這個問題，讓開發人員無法在 V1 入口網站建立開發人員應用程式。

158318079 人 整合式入口網站

無法在開發人員入口網站中新增或修改回呼網址

已修正會造成入口網站使用者無法在 API 頁面上新增或修改回呼網址的問題。
157902256 整合式入口網站

發布後，「頁面詳細資料」頁面上的網頁名稱更新可能會遭到覆寫

目前問題已經修正，這會導致發布入口網站時，更新網頁名稱 (因競爭狀況導致) 遭到覆寫。

138993728 整合式入口網站

開發人員計畫的電子郵件排序和搜尋功能無法運作

一般使用者帳戶的搜尋及排序功能現已正常運作。

已知問題

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