微前端資產選擇器 Overview

Last update: Wed Jun 11 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

適用對象：
Experience Manager as a Cloud Service

建立對象：

管理員
使用者

^全新Dynamic Media Prime 與 Ultimate

^全新AEM Assets Ultimate

^全新AEM Assets 與 Edge Delivery Services 整合

^全新使用者介面可擴充性

^全新啟用 Dynamic Media Prime 與 Ultimate

搜尋最佳實務

中繼資料最佳實務

Content Hub

具有 OpenAPI 功能的 Dynamic Media

AEM Assets 開發人員文件

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

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

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

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

先決條件 prereqs

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

該主機應用程式於 HTTPS 上執行。
您無法於 localhost 上執行該應用程式。如果您想在本機上整合資產選擇器，則必須建立一個自訂網域，例如 [https://<your_campany>.localhost.com:<port_number>]，並在 redirectUrl list 中新增此自訂網域。
您可以使用相應的 imsClientId 設定並新增 clientID 至 AEM Cloud Service 環境變數中。
IMS 範圍清單需要在環境設定中進行定義。
應用程式的 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` 欄位中提及未來的日期範圍。它會顯示附有即將過期徽章的資產。

MIME 類型： 包含 JPG、GIF、PPTX、PNG、MP4、DOCX、TIFF、PDF、XLSX。
影像尺寸： 包含影像的最小/最大寬度、最小/最大高度。

自訂搜尋

除了全文搜尋外，資產選擇器也可讓您使用自訂搜尋來搜尋檔案中的資產。您可以在模組檢視和邊欄檢視模式下，使用自訂搜尋篩選器。

custom-search

您也可以建立一個預設的搜尋篩選器，以儲存您經常搜尋的欄位，並供後續使用。若要為資產建立自訂搜尋，您可以使用 filterSchema 屬性。

搜尋列 search-bar

資產選擇器可讓您在選取的存放庫中執行資產的全文搜尋。例如，如果您在搜尋列中鍵入關鍵字 wave，就會顯示中繼資料屬性中提及 wave 關鍵字的所有資產。

排序 sorting

您可以按資產的名稱、維度或大小對資產選擇器中的資產進行排序。您可以依照遞增或遞減順序排序資產。

檢視的類型 types-of-view

資產選擇器可讓您在四種不同的檢視中檢視資產：

清單檢視 清單檢視會在單一欄中顯示可捲動的檔案和資料夾。
網格檢視 網格檢視會在列與欄的網格中顯示可捲動的檔案和資料夾。
圖庫檢視 圖庫檢視會在居中鎖定的水平清單中顯示檔案或資料夾。
瀑布檢視瀑布檢視會以 Bridge 的形式顯示檔案或資料夾。

資產詳細資料和中繼資料 asset-details-and-metadata

資產詳細資料頁面提供特定資產的全方位視圖，將所有關鍵資訊整合到一個地方。其中包含顯示名稱、檔案格式、狀態和簡要說明的概觀，以及方便視覺識別的預覽或縮圖。另外亦包括某項資產的中繼資料，例如建立日期、作者、大小、色彩配置等。這些屬性有助於提高資產搜尋、過濾和分類的效率。在資產選擇器的邊欄視圖和模態視圖中皆可看見資產詳細資料面板。在邊欄視圖中，必須啟用並設定 onDrop 屬性才能傳回資產。或者，在模態視圖中，handleSelection 屬性會傳回一項資產。請參閱資產選擇器屬性。

要查看資產和中繼資料的詳細資料，請執行以下步驟：