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

您正在查看 Apigee Edge 說明文件。
查看 Apigee X 說明文件。 資訊

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

新功能和強化項目

本節將說明此版本的新功能和改善項目。

改善無障礙功能和回應速度

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

  • 鍵盤導覽：您現在可以使用鍵盤瀏覽標頭和頁尾導覽列、SmartDocs 側邊導覽、應用程式清單、應用程式檢視畫面和 API 資訊卡。
  • 焦點管理： 使用標題導覽列和 SmartDocs 側邊導覽導覽時，可在導覽動作之後，將焦點移至頁面上的第一個 <H1>。
  • 即時區域：現在使用螢幕閱讀器的使用者會回報因文字篩選而產生的 API 清單異動。
  • 以語意方式使用 HTML 標題：所有文字現在都已包含在語意適當的 HTML 標記中。現在整個入口網站都採用適當的階層式方向結構。
  • <H1> 的單頁用法：現在每個頁面都有一個 <H1>，因此螢幕閱讀器能輕鬆找出最具參考價值的網頁內容說明。
  • 寫法大小寫：視覺重音現在只能透過 CSS 套用，而非實際文字。
  • DOM 邏輯順序：「建立」和「編輯應用程式」頁面上的動作按鈕已移至 DOM 中的表單元素下方。這樣一來，使用者在表單互動完成時，就能按照邏輯順序啟用這些按鈕。
  • 視覺元素的文字說明：改善標籤、替代文字和按鈕文字的使用方式，改善了螢幕閱讀器瀏覽導覽的效果。
  • 色彩對比：已提高顏色對比度，以符合產品中許多地方的 WCAG AA 對比要求。API 清單中的 API 標題已移至圖片下方，以免色彩對比度不足。
  • 表單驗證：在「建立」和「編輯應用程式」頁面上，表單提交按鈕現已停用，但您可以啟用以驗證表單。在「建立」和「編輯應用程式」頁面上，已驗證的表單欄位現在會包含驗證錯誤的文字說明。
  • 回應速度：現在是適用於所有頁面的寬度上限 (SmartDocs 除外)。SmartDocs 導覽現在可在手機尺寸較小的螢幕上運作。「建立和編輯應用程式」頁面現在針對較窄的螢幕反應更靈敏。

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

請特別留意下列狀況：

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

詳細變更摘要

以下各節將按類別概述這個版本中實作的詳細變更。

入口網站層級變更

以下是入口網站的所有異動摘要。

  • 下列變數已停用：
    • $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 網頁的變更項目。

  • 「立即登入」設定已從 <H1> 改為 <H2>
  • 說明文字現在是 <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

下方摘要列出 SmartDocs 介面的變動。

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

為現有首頁新增無障礙功能

如果您使用離開入口網站，就必須編輯首頁，才能享有新版無障礙功能改善項目，說明如下：

  1. 從 <mat-card> 容器中移除 href=""。
  2. 使用 <H2> 而不是 <H1> 做為 <mat-card-header> 中的資訊卡標題。
  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: #ffffff //  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: #000000; // 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 整合式入口網站

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

個人帳戶的搜尋和排序功能現在可正常運作。

已知問題

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