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

您目前查看的是 Apigee Edge 說明文件。
前往 Apigee X 說明文件。 info

我們將於 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> 詳閱本次發布的詳細變更清單，瞭解哪些內容會受到影響。
• 在入口網站主題編輯器中選取白色或極淺的顏色做為「次要顏色」：次要顏色用於導覽元素，在白色背景上會難以辨識。建議您挑選無障礙次要顏色，然後視需要使用自訂 scss 覆寫特定情況。
• 內文連結已設定樣式：連結樣式現在更易於存取。請參閱下方的變更內容，瞭解這些變更可能如何與現有樣式互動。
• 居家裝置總覽資訊卡內容區域的 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

主要導覽列異動

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

• 現在，電腦和行動裝置的螢幕尺寸都會以 <a> 包裝標誌 <img>
• 使用者下拉式按鈕現在是 <button>，而不是 <a>

連結樣式變更

文字中的標準連結 <a> 現在預設會加上底線，並在滑鼠懸停時顯示背景顏色 (根據主題設定的「次要顏色」)

404 網頁變更

404 頁面的變更摘要如下：

• 「立即登入」的價格已從 <H1> 改為 <H2>
• 說明文字現在是 <H2>，而非 <H1>

「API」頁面

以下依類別摘要說明「API」頁面的變更。

• API 搜尋/篩選輸入資訊卡：
  • <mat-card-content class="mat-card-content"> 現在會包裝搜尋 API 資訊卡標題和輸入內容
  • 「<H2>」的價格已從 class="api-doc-filter-title" 改為 class="mat-subheading-1"
  • 「<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>

應用程式清單：

• 空白狀態：
  • 「開始使用」的價格已從 <H1> 改為 <H2>
  • 空白狀態指引現在是 <H3>，而非 <H2>
• 清單：
  • 「我的應用程式」已從 <H1> 改為 <H2>
  • <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 表格
• 回呼網址輸入欄位已移至新專區
• 儲存按鈕現在使用 mat-raised-button 樣式和主色背景
• 表格現在會包裝在 <div> 中，並使用 .app-table-wrapper 類別
• 表格標題現在使用 <thead> 包裝函式
• 資料表主體現在使用 <tbody> 包裝函式
• [style.width] 不再用於設定表格欄寬
• 表格中的所有 <a> 代碼現在都會改用 <button

團隊清單

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

• 空白狀態：
  • 「開始使用」的價格已從 <H1> 改為 <H2>
  • 「建立團隊來管理共用應用程式擁有權」現在是 <H3>，而非 <H2>
• 清單：

  「Teams」標題現在為 <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
• 已新增 <div class="team-apps-container">，圍繞 <table class="team-apps">

SmartDocs

以下是 SmartDocs 介面的變更摘要。

• 側邊導覽選單：
  • 側邊導覽已使用 angular-material 元件完全重新編寫
  • 側邊導覽標題現在是 <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」。

修正錯誤

這個版本修正了下列錯誤。這份清單主要供使用者查看支援單是否已解決。這項功能並非為所有使用者提供詳細資訊而設計。

已知問題

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