將 Adobe Learning Manager 與 AEM 整合

Adobe Learning Manager （ALM） 可與 Adobe Experience Manager （AEM） 網站整合。 這讓你能以最少的程式碼工作量，為 Adobe Learning Manager 建立自己的網站和響應式行動介面。 透過此整合，您可以為使用者打造客製化的學習體驗。

為了建立這樣的體驗，ALM 提供了 Adobe Learning Manager 參考網站套件（ALM 參考網站套件），以 ZIP 檔形式安裝於你的 AEM Sites 實例中。

該套件包含 AEM Sites 的網頁範本與網站元件，以及可嵌入的小工具。 例如學習目錄、行事曆、合規、分類、課程與路徑等等。

安裝 ALM 參考網站套件後，你可以開始為 Adobe Learning Manager 建立一個網站，並架設在你的 AEM Sites 實例上。 使用者接著可以在網站上拖放這些元件。

安裝 ALM 參考網站套件

先決條件

在您確保 AEM Sites 環境安全後，必須安裝 ALM 參考網站套件。 此套件包含 AEM 網頁與網站元件，協助建構學習平台。

參考網站套件託管在 GitHub 倉庫中。

欲了解更多資訊，請參閱說明文件。

下載內容包 downloadthecontentpackage

安裝程式是以 AEM 內容套件形式出貨。 下載套件。

內容包以壓縮檔形式提供，且相容於 AEM 6.4 與 AEM 6.5。

安裝學習管理器元件 installcaptivateprimecomponent

使用 AEM 套件管理器安裝學習管理員內容套件：

建立應用程式 Adobe Learning Manager

安裝 AEM 網站套件後，您必須設定一個 ALM 應用程式，將您的學習入口網站與 AEM 網站連接。

此情境適用於 AEM，且 Adobe Learning Manager。

請依照以下步驟操作：

請注意螢幕上的應用程式憑證。

申請憑證

要批准申請，請點擊 Approve。

去拿代幣

在 AEM 中設定 ALM 帳戶

AEM + Adobe Learning Manager（登入/未登入用戶）

Adobe Learning Manager 現在讓你能向現有及潛在客戶及合作夥伴展示產品與培訓，無需強制建立帳號或登入。 此功能將協助你推動產品與培訓的採用，透過快速且簡便地預覽訓練內容，突顯並推廣產品特色。 因此，您可以有效地展示產品與服務，特別是向潛在客戶和合作夥伴展示，提升產品知名度。 易於取得且更易接觸，促進興趣提升，有助於推動培訓報名與學習採用。

透過此工作流程，學習者可在不登入 Adobe Learning Manager 的情況下預覽訓練、存取培訓資訊或搜尋培訓內容。 此工作流程不適用於原生 Learning Manager 介面（僅適用於 AEM 網站及其他無頭介面）。

設定並啟用學習平台連接器

本節強調配置及啟用以下連接器所需的步驟：

訓練資料存取

此連接器可讓你的 AEM Sites 基礎或其他客製化無頭使用者介面，能取得並呈現訓練資訊給學習者，並在學習者登入前或登入後實現無縫的培訓資訊搜尋。

此連接器僅在使用 AEM Sites 或其他無頭介面時才需要。

連接器將訓練中繼資料匯出至資料儲存與檢索解決方案，以及搜尋啟用系統。 因此，你可以設定基於 AEM Sites 或其他客製化的無頭使用者介面，利用這兩項服務來取得訓練資料、呈現網頁，並為學習者提供優化的訓練搜尋功能。 例如，一個未登入的 AEM Sites 介面，可以利用匯出的元資料協助學習者搜尋、瀏覽及存取顯示培訓資訊的培訓頁面。

啟用此連接器，建立並呈現基於 AEM Sites 的網頁，並為學習者在登入前後提供客製化體驗。 啟用此連接器，建立並呈現基於 AEM Sites 的網頁，並為學習者在登入前後提供客製化體驗。

AEM + Adobe Learning Manager + Adobe Commerce（登入/未登入用戶）

Adobe Learning Manager 現提供解決方案，幫助您無縫整合學習平台與 Adobe 商務。 此版本將讓您輕鬆將原生、AEM 網站或其他無頭學習管理介面與 Adobe Commerce 連接。 這種整合讓你能在學習平台上實現電子商務能力。 你現在可以向客戶和商業夥伴提供付費培訓，並輕鬆在原生與非原生學習管理器介面上啟用培訓購買。 學習者也可在不登入 Adobe Learning Manager 的情況下預覽訓練、存取培訓資訊或搜尋培訓內容。

使用者可以使用已存在的 AEM 應用程式並核准，而不必自行建立一個應用程式。

自訂網頁

利用 AEM 參考網站及可用的小工具自訂您的網頁。

建立網頁

除了參考網站套件提供的範本外，你也可以根據 AEM 範本建立網頁。

Adobe Learning Manager 小工具

Adobe Learning Manager Widget 在 2.0.0 版本及以上 版本的學習-內容 組件群組中提供。 單一元件可容納 ALM 首頁的所有元件，這些元件可從創作對話框的下拉選單中選擇。

隨著新增 Adobe Learning Manager 小工具​的加入，您可以在 AEM 網站創建與原生 Adobe Learning Manager 頁面相當的體驗——首頁、目錄、學習物件總覽，以及使用類別、課程和路徑等小工具建立的自訂頁面。

可用小工具：

著作功能

球場圖塊自訂

在 ALM 管理應用程式 中，於「管理 > 品牌」 > 「課程圖塊 」中所做的課程圖塊自訂，適用於所有為課程、學習路徑、認證及工作輔助工具繪製磚塊的小工具。 利用此設定控制哪些細節（格式、時長、技能、評分、作者姓名、描述、完成狀態等）會透過單一配置，在你的 AEM Sites 學習學院中傳遞給學習者。

如需自訂 Adobe Learning Manager 小工具，請參見 與 AEM 整合。

從 Blueprint 建立網站

ALM 參考網站套件提供「學習網站藍圖」，讓您能為學習平台建立網站。 AEM 藍圖允許您直接從 AEM Sites 元件建立網頁。 你不需要使用任何範本。

寫程式設計你的網站

除了使用內建範本並利用所見即所得（WYSIWYG）元件從零建立網站外，你也可以撰寫程式碼並建置網站。

程式碼在 參考網站的 GitHub 倉庫 裡，方便你開始使用。

範本的主要部分包括：

使用程式碼自訂 Adobe Learning Manager 小工具

Adobe Learning Manager Widget 元件會直接使用 React 元件渲染到頁面 DOM。

這對你的專案意味著什麼？

用於小工具的預先定義 CSS 類別

以下預定義的 CSS 類別可作為元件層級樣式的目標：

所有程式碼都在倉庫裡，幫助你啟動並運作。

匯入並新增學習管理工具元件至現有網頁或範本

安裝 AEM 參考網站套件會將學習管理員元件加入您的 AEM 網站實例。 預設情況下，您可以將這些元件加入我們開箱即用的網頁專案（網站）學習網站。 這些元件也可在你從學習網站藍圖建立的網站上取得。

不過，如果你想將這些新加入的 Learning Manager 元件用於現有的網頁專案或網站，應該依照以下步驟匯入。

以下程序使範本能滿足匯入學習管理器元件的客戶端函式庫相依性。

包含這些元件的網頁應該載入這些函式庫，才能成功渲染並使用元件。

儲存此範本後，您可以在所有由此範本衍生的網頁中加入學習管理員元件。

在 AEM 中設定小工具 configurethewidgetinaem

對於元件設定，AEM 作者只需 Learning Manager 整合管理員提供的刷新權杖即可。

你也可以在多個頁面設定多個帳號設定。

AEM 作者 aemauthor

AEM 作者必須先將元件加入 AEM 範本中

AEM 作者就能拖放 Adobe Learning Manager 元件並相應配置。

學習管理元件要求上述步驟建立的設定必須映射到頁面​​。作者可以透過編輯頁面屬性>Advanced​Cloud Configuration> Configuration 來映射設定，並提供設定路徑。透過這種方式，作者可以為多個 Learning Manager 帳號建立設定，並將每個帳號對應到不同的網站頁面。 如果設定未映射到頁面，元件會從父頁面反覆讀取該設定，直到找到設定為止。

學習者 learner

學習者可以在頁面內修讀課程。

要存取 Learning Manager 元件，Learner 必須是已登入的 AEM 使用者。 此外，學​員代表:User節點的「/profile」節點中應該有屬性電子郵件。這個電子郵件應該和 Learning Manager 帳戶裡的郵件完全一樣。

學習者可以在頁面內修讀課程。

課程進度也會被保存。

提供以下小工具：

如果沒有推薦，該小工具會顯示為空白。

支援天際線

Skyline 是 AEM 的雲端版本。 你必須先從套件管理器安裝 Skyline。 要在 AEM 中使用 Skyline 元件，使用者必須在學習管理員帳號中存在。 換句話說，使用者的電子郵件地址必須存在於帳號中。

部署 Skyline

設定 Skyline 的步驟在 GitHub 倉庫🔗中有說明。

我的學習小工具

My Learning 小工具允許你向使用者顯示特定或一組目錄的訓練內容。

在 Properties 頁面屬性的區塊中，從列出的選項中選擇 Catalog 。

目錄選項包含以下選項：

以下是一些你可以自訂的額外組件：

Learning Object Types： 根據學習物件的類型進行篩選。 支援的類型包括課程、認證、就業輔助及學習計畫。

在 AEM 中，條狀卡片的標題一開始會是空的。 在物業中輸入標題名稱，widgets.html。

客製化

你可以用widgets.html自訂版面的外觀和感覺。 你可以改變出現卡片的外觀並自訂主題。

在這個 General Settings 區塊中，你可以選擇卡片的主色和副色，並指定屬性來自訂主題。

{
 "globalCssText":"@import url('https://fonts.googleapis.com/css2?family=Grandstander:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');",
 "fontNames":"Grandstander",
 "cardLayout":{
 "cardLayoutName":"compact",
 "cardPrimaryColor":"#376BA4",
 "cardSecondaryColor":"#F98EB0",
 "startedStateTextColor":"#ffffff",
 "continueStateTextColor":"#ffffff",
 "revisitStateTextColor":"#ffffff",
 "startedStateColor":"#a0a0a0",
 "continueStateColor":"#f9a122",
 "revisitedStateColor":"#7fbc64",
 "textPrimaryColor":"#ffffff",
 "textSecondaryColor":"#d93f3f",
 "navIconColor":"#a0a0a0"
 }
}

在 AEM 網站中設定已儲存課程的小工具

我的已儲存課程小工具讓學習者能直接在學習頁面查看已收藏或儲存的課程，方便你找到想要重溫或完成的課程。

要在 AEM Sites 中設定 「我已儲存的課程」小工具 ：

學習者可以在學習者首頁的條帶中查看他們已儲存的課程 Saved by Me 。 選擇條 Saved by Me 帶後，學習者會進入目錄頁面，並顯示已收藏的課程數量。

當你在目錄​ 中套用另一個篩選器 ​時，只會顯示符合該篩選器的結果。書籤項目不會自動包含。

忽略高階LO的註冊

如果 啟用「忽略高階 LO 註冊 」勾選框，且使用者直接註冊於學習計畫或認證，該認證或學習計畫的課程將顯示在小工具中。

若該勾選框被停用，則學習計畫或認證中未直接註冊的課程將不會出現。

*選擇忽略高階貸款登記方框。

接著將設定套用到小工具上。

安全性

新增了 Client ID 和 Client Secret 欄位。 此外，刷新代幣也會被遮蔽。 使用者建立完整組態後，若再次開啟組建以編輯，或是其他使用者開啟此組，刷新令牌將會被遮蔽。