教學課程：存取及自訂開發人員入口網站

適用於：開發人員 |基本 |基本 v2 |標準 |標準 v2 |進階版

「開發人員入口網站」是自動產生、可完全自訂的網站，其中包含您的 API 文件。 API 取用者可以在此探索您的 API、了解如何使用，以及要求存取權。

在本教學課程中，您會了解如何：

• 存取開發人員入口網站的受控版本
• 瀏覽系統管理介面
• 自訂內容
• 發行變更
• 檢視已發佈的入口網站

如需開發人員入口網站功能和選項的詳細資訊，請參閱 Azure API 管理 開發人員入口網站概觀。

必要條件

• 完成下列快速入門：建立 Azure API 管理執行個體。
• 匯入和發佈 API。

以管理員身分存取入口網站

請遵循下列步驟來存取開發人員入口網站的受控版本。

1. 在 Azure 入口網站中，瀏覽至您的 API 管理執行個體。

2. 如果您已在支援開發人員入口網站的 v2 服務層級中建立執行個體，請先啟用開發人員入口網站。

   1. 在左側功能表中的 [開發人員入口網站] 底下，選取 [入口網站設定]。
   2. 在 [入口網站設定] 視窗中，選取 [已啟用]。 選取 [儲存]。

   啟用開發人員入口網站可能需要幾分鐘的時間。

3. 在左側功能表中開發人員入口網站下，選取 [入口網站概觀]。 接著，在上方導覽列中，選取 [開發人員入口網站] 按鈕。 具有入口網站管理版本的新瀏覽器索引標籤隨即開啟。

了解入口網站的系統管理介面

身為系統管理員，您可以使用可視化編輯器自定義入口網站的內容。

• 使用左側的功能表選項來建立或修改頁面、媒體、版面配置、功能表、樣式或網站設定。

• 在頂端，切換檢視區（針對不同大小的螢幕），或檢視不同 群組中用戶可看見的入口網站元素。 例如，您可能只想要將特定頁面顯示給與特定產品相關聯的群組，或顯示可存取特定 API 的使用者。

• 此外，儲存或復原您所做的變更，或發佈網站。

將影像新增至媒體櫃

您會想要在開發人員入口網站中使用自己的影像和其他媒體內容，以反映貴組織的商標。 如果您想要使用的映像尚未在入口網站的媒體庫中，請在開發人員入口網站中新增它：

1. 在可視化編輯器的左側功能表中，選取 [ 媒體]。
2. 執行下列其中一項動作：
   • 選取 [上傳檔案 ]，然後選取您計算機上的本機圖像檔。
   • 選取 [ 鏈接檔案]。 輸入 圖像檔和其他詳細數據的參考 URL 。 然後選取 [ 下載]。
3. 選取 [ 關閉 ] 以結束媒體櫃。

提示

您也可以將影像直接拖放到可視化編輯器視窗中，以將影像新增至媒體櫃。

取代首頁上的預設標誌

導覽列左上角會提供佔位符標誌。 您可以將它取代為您自己的標誌，以符合貴組織的商標。

1. 在開發人員入口網站中，選取導覽列左上方的預設 Contoso 標誌。
2. 選取編輯。
3. 在 [圖片] 彈出視窗的 [主要] 下，選取 [來源]。
4. 在 [ 媒體 ] 彈出視窗中，選取下列其中一項：
   • 媒體櫃中已上傳的影像
   • 上傳檔案 以將新的圖像檔上傳至媒體櫃
   • 如果您不想使用標誌，則 無
5. 標誌會即時更新。
6. 選取快顯視窗外部將結束媒體櫃。
7. 在頂端列中，選取 [ 儲存]。

編輯首頁上的內容

預設 的首頁 和其他頁面會提供佔位元文字和其他影像。 您可以移除包含此內容的整個區段，或保留結構並逐一調整元素。 將產生的文字和影像取代為您自己的文字和影像，並確定任何連結指向所需的位置。

以數種方式編輯所產生頁面的結構和內容。 例如：

• 選取現有的文字和標題元素，以編輯和格式化內容。

• 將區段停留在空白區域，然後按兩下具有加號的藍色圖示，以將區段新增至頁面。 從數個區段配置中選擇。

  

• 將滑鼠停留在空白區域，以新增小工具（例如文字、影像、自定義小工具或 API 清單），然後按兩下具有加號的灰色圖示。

  

• 依拖放方式重新排列頁面中的專案。

編輯網站的主要色彩

若要變更開發人員入口網站中的色彩、漸層、印刷樣式、按鈕和其他使用者介面元素，請編輯網站樣式。 例如，變更導覽列、按鈕和其他元素中使用的主要色彩，以符合貴組織的商標。

1. 在開發人員入口網站的可視化編輯器左側功能表中，選取 [ 樣式]。
2. 在 [色彩] 區段下，選取您想要編輯的色彩樣式項目。 例如，選取 [主要]。
3. 選取 [ 編輯色彩]。
4. 從色彩選擇器選取色彩，或輸入色彩十六進位代碼。
5. 在頂端列中，選取 [ 儲存]。

更新的色彩會即時套用至網站。

提示

如果您想要，請選取 [樣式] 頁面上的 [+ 新增色彩]，以新增並命名另一個色彩專案。

變更首頁上的背景影像

您可以將入口網站首頁的背景變更為符合您組織商標的影像或色彩。 如果您尚未將不同的影像上傳至媒體媒體櫃，您可以在變更背景影像之前或變更背景影像之前上傳它。

1. 在開發人員入口網站的首頁上，單擊右上角，讓頂端區段在角落醒目提示，並顯示快捷功能表。

2. 在快捷功能表中的 [編輯] 文章 右側，選取向上箭號（切換至父項）。

3. 選取 [ 編輯] 區段。

4. 在 [區段] 彈出視窗的 [背景] 底下，選取其中一個圖示：

   

   • 清除背景，以移除背景影像
   • 背景影像、從媒體櫃選取影像，或上傳新的影像
   • 背景色彩、從色彩選擇器選取色彩，或清除色彩
   • 背景漸層、從您的網站樣式頁面選取漸層，或清除漸層

5. 在 [背景重設大小] 底下，選擇適合您的背景。

6. 在頂端列中，選取 [ 儲存]。

變更預設版面配置

開發人員入口網站會使用 版面配置 來定義常見的內容元素，例如相關頁面群組的導覽列和頁尾。 每個頁面都會根據 URL 範本自動比對配置。

根據預設，開發人員入口網站隨附兩種版面配置：

• 首頁 - 用於首頁 （URL 樣本 /）

• 預設值 - 用於所有其他頁面（URL 範本 /*）。

您可以變更開發人員入口網站中任何頁面的版面配置，並定義新的版面配置，以套用至符合其他 URL 範本的頁面。

例如，若要變更預設版面配置導覽列中所使用的標誌，以符合貴組織的商標：

1. 在可視化編輯器的左側功能表中，選取 [頁面]。
2. 選取 [ 配置] 索引 標籤，然後選取 [ 預設]。
3. 選取左上角標誌的圖片，然後選取 [ 編輯]。
4. 在 [主要] 底下，選取 [來源]。
5. 在 [ 媒體 ] 彈出視窗中，選取下列其中一項：
   • 媒體櫃中已上傳的影像
   • 上傳檔案 以將新的圖像檔上傳至您可以選取的媒體檔案
   • 如果您不想使用標誌，則 無
6. 標誌會即時更新。
7. 選取快顯視窗外部將結束媒體櫃。
8. 在頂端列中，選取 [ 儲存]。

編輯導覽功能表

您可以編輯開發人員入口網站頁面頂端的導覽功能表，以變更功能表項的順序、新增專案或移除專案。 您也可以變更功能表項的名稱，以及它們指向的URL或其他內容。

例如， 開發人員入口網站的 [預設 ] 和 [首頁 ] 配置會顯示兩個功能表給開發人員入口網站的來賓使用者：

• 主功能表，其中包含 [首頁]、[API] 和 [產品] 連結
• 匿名使用者功能表，其中包含 [ 登入 和 註冊 ] 頁面的連結。

不過，您可能想要自定義它們。 例如，如果您想要獨立邀請使用者加入您的網站，您可以停用 匿名使用者功能表中的 [註冊 ] 連結。

1. 在可視化編輯器的左側功能表中，選取 [網站] 功能表。
2. 在左側展開 [匿名使用者] 選單。
3. 選取 [註冊] 旁的設定（齒輪圖示），然後選取 [刪除]。
4. 選取 [儲存]。

編輯網站設定

編輯開發人員入口網站的網站設定，以變更網站名稱、描述和其他詳細數據。

1. 在可視化編輯器的左側功能表中，選取 [設定]。
2. 在 設定 彈出視窗中，輸入您想要變更的網站元數據。 或者，從媒體媒體庫中的影像設定網站的 favicon。
3. 在頂端列中， 儲存。

提示

如果您想要變更網站的功能變數名稱，您必須先在 API 管理 實例中設定自定義網域。 深入瞭解 API 管理 中的自定義功能變數名稱。

發佈入口網站

若要讓您的入口網站和其最新的變更可供訪客使用，您需要「發佈」內容。

若要從開發人員入口網站的系統管理介面發佈：

1. 選取 [儲存] 按鈕，確定您已儲存變更。

2. 在頂端的功能表中，選取 [ 發佈網站]。 這項作業可能需要幾分鐘的時間。

   

提示

另一個選項是從 Azure 入口網站 發佈網站。 在 Azure 入口網站 中 API 管理 實例的 [入口網站概觀] 頁面上，選取 [發佈]。

造訪已發佈的入口網站

若要在發佈入口網站之後檢視變更，請以與系統管理面板相同的 URL 存取變更，例如 https://contoso-api.developer.azure-api.net。 在另一個瀏覽器工作階段 (使用 incognito 或私人瀏覽模式) 中，以外部訪客的身分檢視。

在 API 上套用 CORS 原則

若要讓入口網站的訪客透過內建的互動式控制台測試 API，如果您尚未這麼做，請在 API 上啟用 CORS（跨原始來源資源分享）。 在 Azure 入口網站 中 API 管理 實例的 [入口網站概觀] 頁面上，選取 [啟用 CORS]。 深入了解。

下一步

在本教學課程中，您已了解如何：

• 存取開發人員入口網站的受控版本
• 瀏覽系統管理介面
• 自訂內容
• 發行變更
• 檢視已發佈的入口網站

前進到下一個教學課程：

使用 Visual Studio Code 匯入和管理 API

請參閱開發人員入口網站的相關內容：

• Azure API 管理開發人員入口網站概觀
• 使用使用者名稱和密碼、Microsoft Entra ID 或 Azure AD B2C，來設定對開發人員入口網站的驗證。
• 深入了解如何自訂和擴充開發人員入口網站的功能。