微前端資產選擇器 Overview

Last update: Mon Feb 03 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

建立對象：

管理員
使用者

搜尋最佳實務

中繼資料最佳實務

Content Hub

具有 OpenAPI 功能的 Dynamic Media

AEM Assets 開發人員文件

微前端資產選擇器提供一個輕鬆整合 Experience Manager Assets 存放庫的使用者介面，讓您可以瀏覽或搜尋存放庫中的可用數位資產，並用於您的應用程式編寫體驗。

在您的應用程式體驗中可利用資產選擇器套件使用微前端使用者介面。套件的任何更新都會自動匯入，而最新部署的資產選擇器會自動載入到您的應用程式。

資產選擇器提供了許多優點，例如：

可使用 Vanilla JavaScript 資料庫輕鬆整合任何 Adobe 或非 Adobe 應用程式。
容易維護，因為資產選擇器套件的更新會自動部署到您的應用程式可用的資產選擇器。您的應用程式無需更新即可載入最新的修改內容。
簡易的自訂功能，因為有可以控制應用程式中資產選擇器顯示的可用屬性。
全文搜尋、開箱即用和自訂篩選器，可快速找到要在編寫體驗中使用的資產。
能夠在 IMS 組織內切換存放庫以選擇資產。
能夠依照名稱、維度和大小對資產進行排序，並以清單、網格、圖庫或瀑布檢視檢視。

先決條件 prereqs

您必須確保以下通訊方式：

該應用程式是在 HTTPS 上運作。
應用程式的 URL 位於 IMS 用戶端的重新導向 URL 允許清單中。
IMS 登入流程是使用網頁瀏覽器上的快顯視窗進行設定和轉譯。因此，應在目標瀏覽器上啟用或允許快顯視窗。

如果您需要資產選擇器的 IMS 驗證工作流程，應符合上述先決條件。或者，如果您已透過 IMS 工作流程進行驗證，則可以改為新增 IMS 資訊。

了解更多

IMPORTANT

存放庫旨在作為補充文件，說明整合資產選擇器的可用 API 和使用範例。在嘗試安裝或使用資產選擇器之前，請確保您的組織已佈建對資產選擇器的存取權限，作為 Experience Manager Assets as a Cloud Service 設定檔的一部分。如果您尚未佈建，則無法整合或使用這些元件。若要要求佈建，您的程式管理員應從 Admin Console 提出標記為 P2 的支援服務單，並包含以下資訊：

託管整合應用程式的網域名稱。
佈建後，您的組織將獲得與所要求之環境相對應的 imsClientId、imsScope 和 redirectUrl，對於資產選擇器的設定至關重要。如果沒有這些有效屬性，您就無法執行安裝步驟。

安裝 installation

ESM 內容傳遞網路 (例如 esm.sh/skypack) 和 UMD 版本均可使用資產選擇器。

在使用 UMD 版 的瀏覽器中 (建議)：

<script src="https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/assets-selectors.js"></script>

<script>
  const { renderAssetSelector } = PureJSSelectors;
</script>

在具備 import maps 支援並使用 ESM CDN 版 的瀏覽器中：

<script type="module">
  import { AssetSelector } from 'https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/@assets/selectors/index.js'
</script>

在使用 ESM CDN 版 的 Deno/Webpack Module Federation 中：

import { AssetSelector } from 'https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/@assets/selectors/index.js'

使用資產選擇器 using-asset-selector

在資產選擇器設定完成後，且您以 Adobe Experience Manager as a Cloud Service 應用程式使用資產選擇器完成身分驗證，則您可以選擇資產或執行各種其他操作，以便在存放庫中搜尋您的資產。

using-asset-selector

A：隱藏/顯示面板
B：存放庫切換器
C：資產
D：篩選器
E：搜尋列
F：排序
G：按遞增或遞減順序排序
H：檢視

隱藏/顯示面板 hide-show-panel

若要將資料夾隱藏在左側導覽中，請按一下 隱藏資料夾 圖示。要還原變更，請再按一下 隱藏資料夾 圖示。

存放庫切換器 repository-switcher

資產選擇器也可讓您切換存放庫進行資產選擇。您可以從左側面板中的下拉清單中選擇您要的存放庫。下拉清單中可用的存放庫選項是根據repositoryId``index.html檔案中定義的屬性。它是以登入使用者所存取的選定 IMS org 環境為基礎。消費者可以傳遞一個偏好的repositoryID，而且在該情況下，資產選擇器將停止呈現 repo 切換器，並僅從指定的存放庫呈現資產。

資產存放庫

那是可用於執行操作的資產資料夾集合。

現成可用篩選器 filters

資產選擇器也提供現成可用的篩選器選項，以調整您的搜尋結果。您可以使用以下篩選器：

狀態： 包含在 all、approved、rejected 和 no status 之間的資產現況。
檔案類型： 包含 folder、file、images、documents 或 video。

過期狀態： 依據資產的過期時間提及資產。您可以勾選 Expired 核取方塊來篩選過期的資產；或設定資產的 Expiration Duration 以根據其到期時間顯示資產。資產已過期或即將過期時，會出現一個徽章來描繪該狀態。此外，您可以控制是否允許使用 (或拖放) 過期資產。了解更多有關自訂過期資產的資訊。預設情況下，對於未來 30 天內到期的資產，會顯示 即將到期 徽章。不過，您可以使用 expirationDate 屬性來設定過期時間。

note tip
TIP
如果您想根據未來的到期日檢視或篩選資產，請在 `Expiration Duration` 欄位中提及未來的日期範圍。它會顯示附有即將過期徽章的資產。