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

主要導覽列異動

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

• 現在，電腦版和行動版螢幕尺寸的標誌 <img> 都會包在 <a> 中
• 使用者下拉式按鈕現在是 <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 資訊卡清單：

  「No APIs match your search」現在會顯示 <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>
• 清單：
  • 「我的應用程式」現在是 <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 表格
• 回呼網址輸入欄位已移至新區塊
• 儲存按鈕現在使用 mat-raised-button 樣式和主色背景
• 表格現在會包裝在 <div> 中，並使用 .app-table-wrapper 類別
• 表格標題現在使用 <thead> 包裝函式
• 資料表主體現在使用 <tbody> 包裝函式
• [style.width] 不再用於設定表格欄寬
• 資料表中的所有 <a> 代碼現在都會改用 <button

團隊清單

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

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

  「Teams」標題現在為 <H2>，而非 <H1>

建立及編輯團隊頁面

以下摘要說明「建立及編輯團隊」頁面的變更。

• <form> 類別已替換為 .details-form.teams-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> 中，並將 href-name 設為資訊卡導覽的適當值。 <a class="navigable-content" href="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」。

修正錯誤

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

已知問題

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