項目設定

本教程介紹如何建立Maven多模組項目,以管理Adobe Experience Manager站點的代碼和配置。

必備條件

查看所需的工具和設定 地方開發環境。 確保您在本地提供了Adobe Experience Manager的新實例,並且沒有安裝其他示例/演示包(所需的Service Pack除外)。

目標

  1. 瞭解如何使用Maven原型AEM生成新項目。
  2. 瞭解項目原型生成的AEM不同模組以及它們如何協同工作。
  3. 瞭解AEM核心元件如何包含在項AEM目中。

您將構建的

在本章中,您將使用 項AEM目原型。 您的AEM項目包含用於站點實施的所有代碼、內容和配置。 本章中生成的項目將作為執行WKND網站的基礎,並將在今後各章中繼續。

什麼是Maven項目? - 阿帕奇·馬文 是用於構建項目的軟體管理工具。 全Adobe Experience Manager 實現使用Maven項目在上面構建、管理和部署自定義代AEM碼。

什麼是馬文原型? - A 馬文原型 是用於生成新項目的模板或模式。 「項AEM目」原型允許我們使用自定義命名空間生成新項目,並包括遵循最佳實踐的項目結構,這大大加快了我們的項目。

建立項目

為建立Maven多模組項目有幾個選AEM項。 本教程將利用 馬文AEM計畫原型 35。 雲管理器 提供UI嚮導 啟動應用程式項AEM目的建立。 由Cloud Manager UI生成的基礎項目與直接使用原型的結構相同。

注意

本教程使用版本 35 原型。 使用 最新 原型版本以生成新項目。

接下來的一系列步驟將使用基於UNIX的命令行終端進行,但如果使用Windows終端,則應類似。

  1. 開啟命令行終端。 驗證是否安裝了Maven:

    $ mvn --version
    Apache Maven 3.6.2
    Maven home: /Library/apache-maven-3.6.2
    Java version: 11.0.4, vendor: Oracle Corporation, runtime: /Library/Java/JavaVirtualMachines/jdk-11.0.4.jdk/Contents/Home
    
  2. 導航到要在其中生成項目的AEM目錄。 這可以是要維護項目原始碼的任何目錄。 例如,名為 code 在用戶的主目錄下:

    $ cd ~/code
    
  3. 將以下內容貼上到命令行中以 以批處理模式生成項目:

    mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate \
        -D archetypeGroupId=com.adobe.aem \
        -D archetypeArtifactId=aem-project-archetype \
        -D archetypeVersion=35 \
        -D appTitle="WKND Sites Project" \
        -D appId="wknd" \
        -D groupId="com.adobe.aem.guides" \
        -D artifactId="aem-guides-wknd" \
        -D package="com.adobe.aem.guides.wknd" \
        -D version="0.0.1-SNAPSHOT" \
        -D aemVersion="cloud"
    
    注意

    如果以AEM6.5.10+替換為目標 aemVersion="cloud"aemVersion="6.5.10"

    用於配置項目的可用屬性的完整清單 可在此處找到

  4. 以下資料夾和檔案結構將由本地檔案系統上的Maven原型生成:

     ~/code/
        |--- aem-guides-wknd/
            |--- all/
            |--- core/
            |--- ui.apps/
            |--- ui.apps.structure/
            |--- ui.config/
            |--- ui.content/
            |--- ui.frontend/
            |--- ui.tests /
            |--- it.tests/
            |--- dispatcher/
            |--- analyse/
            |--- pom.xml
            |--- README.md
            |--- .gitignore
    

部署和生成項目

生成項目代碼並將其部署到的本地實例AEM。

  1. 確保有一個作者實例AEM在埠上本地運行 4502

  2. 從命令行導航到 aem-guides-wknd 項目目錄。

    $ cd aem-guides-wknd
    
  3. 運行以下命令以構建和部署整個項目AEM:

    $ mvn clean install -PautoInstallSinglePackage
    

    生成大約需要一分鐘時間,應以以下消息結束:

    ...
    [INFO] ------------------------------------------------------------------------
    [INFO] Reactor Summary for aem-guides-wknd 0.0.1-SNAPSHOT:
    [INFO]
    [INFO] aem-guides-wknd .................................... SUCCESS [  0.269 s]
    [INFO] WKND Sites Project - Core .......................... SUCCESS [  8.047 s]
    [INFO] WKND Sites Project - UI Frontend ................... SUCCESS [01:02 min]
    [INFO] WKND Sites Project - Repository Structure Package .. SUCCESS [  1.985 s]
    [INFO] WKND Sites Project - UI apps ....................... SUCCESS [  8.037 s]
    [INFO] WKND Sites Project - UI content .................... SUCCESS [  4.672 s]
    [INFO] WKND Sites Project - UI config ..................... SUCCESS [  0.313 s]
    [INFO] WKND Sites Project - All ........................... SUCCESS [  0.270 s]
    [INFO] WKND Sites Project - Integration Tests ............. SUCCESS [ 15.571 s]
    [INFO] WKND Sites Project - Dispatcher .................... SUCCESS [  0.232 s]
    [INFO] WKND Sites Project - UI Tests ...................... SUCCESS [  0.728 s]
    [INFO] WKND Sites Project - Project Analyser .............. SUCCESS [ 33.398 s]
    [INFO] ------------------------------------------------------------------------
    [INFO] BUILD SUCCESS
    [INFO] ------------------------------------------------------------------------
    [INFO] Total time:  02:18 min
    [INFO] Finished at: 2021-01-31T12:33:56-08:00
    [INFO] ------------------------------------------------------------------------
    

    馬文檔案 autoInstallSinglePackage 編譯項目的各個模組,並將單個包部署到實AEM例。 預設情況下,此包將部署到埠上AEM本地運行的實例 4502 還有 admin:admin

  4. 導航到本地實例上的包管AEM理器: http://localhost:4502/crx/packmgr/index.jsp。 您應看到的包 aem-guides-wknd.ui.appsaem-guides-wknd.ui.configaem-guides-wknd.ui.content, aem-guides-wknd.all

  5. 導航到「站點」控制台: http://localhost:4502/sites.html/content。 WKND站點將是其中一個站點。 它將包括一個包含美國和語言大師等級的網站結構。 此站點層次結構基於的 language_countryisSingleCountryWebsite 使用原型生成項目時。

  6. 開啟 美國 > 英語 頁面 編輯 按鈕:

    站點控制台

  7. 已建立啟動程式內容,並且有幾個元件可添加到頁面。 對這些元件進行實驗,以瞭解其功能。 您將在下一章中學習元件的基本知識。

    首頁入門級內容

    原型生成的樣本內容

Inspect項目

生成的AEM項目由各個Maven模組組成,每個模組具有不同的角色。 本教程和大部分開發都側重於以下模組:

  • - Java代碼,主要是後端開發人員。

  • ui.frontend — 包含CSS、JavaScript、Sass、Type Script的原始碼,主要用於前端開發人員。

  • ui.apps — 包含元件和對話框定義,將編譯的CSS和JavaScript嵌入為客戶端庫。

  • ui.content — 包含結構內容和配置,如可編輯模板、元資料架構(/content%E3%80%81/conf?lang=zh-Hant)。

  • 全部 — 這是一個空的Maven模組,它將上述模組合併到一個可以部署到環境的AEM包中。

Maven項目圖

查看 項AEM目原型文檔 瞭解更多詳細資訊 全部 馬文模組。

包含核心元件

核AEM心元件 是一組標準化的Web內容管理(WCM)組AEM件。 這些元件提供了功能的基線集,並設計為針對單個項目進行樣式化、定制和擴展。

AEMas a Cloud Service環境包括 核AEM心元件。 因此為as a Cloud Service生成AEM的項目 包括嵌入的AEM核心元件。

對於AEM6.5/6.4生成的項目,原型自動嵌入 核AEM心元件 的下界。 嵌入核心元件AEM是6.5/6.4的最AEM佳做法,可確保將最新版本與您的項目一起部署。 有關核心元件的詳細資訊 包含在項目中,可在此處找到

原始碼管理

使用某種形式的原始碼管理來管理應用程式中的代碼始終是一個好主意。 本教程使用git和GitHub。 由Maven和/或所選IDE生成的檔案有幾個應被SCM忽略。

Maven將在您構建和安裝代碼包時建立目標資料夾。 目標資料夾和內容應從SCM中排除。

在下面 ui.apps 觀察許多 .content.xml 檔案。 這些XML檔案映射JCR中安裝的內容的節點類型和屬性。 這些檔案很重要,應 被忽略。

項AEM目原型將生成示例 .gitignore 可用作檔案可安全忽略的起始點的檔案。 檔案生成於 <src>/aem-guides-wknd/.gitignore

恭喜!

恭喜,您剛剛建立了第一個AEM項目!

後續步驟

通過簡單易懂的功能,瞭解Adobe Experience Manager(AEM)站點元件的底層技術 HelloWorld 示例 元件基礎 教程。

高級Maven命令(附加)

在開發過程中,您可能只使用其中一個模組,並希望避免構建整個項目以節省時間。 您可能還希望直接部署到AEM發佈實例,或者可能部署到AEM埠4502上未運行的實例。

接下來,我們將看看一些額外的Maven配置檔案和命令,這些配置檔案和命令可在開發過程中用於提高靈活性。

核心模組

模組包含與項目關聯的所有Java代碼。 在構建時,它將OSGi捆綁包部署到AEM。 要僅構建此模組,請執行以下操作:

  1. 導航到 core 資料夾 aem-guides-wknd):

    $ cd core/
    
  2. 運行以下命令:

    $ mvn clean install -PautoInstallBundle
    ...
    [INFO] --- sling-maven-plugin:2.4.0:install (install-bundle) @ aem-guides-wknd.core ---
    [INFO] Installing Bundle aem-guides-wknd.core(~/code/aem-guides-wknd/core/target/aem-guides-wknd.core-0.0.1-SNAPSHOT.jar) to http://localhost:4502/system/console via WebConsole
    [INFO] Bundle installed
    [INFO] ------------------------------------------------------------------------
    [INFO] BUILD SUCCESS
    [INFO] ------------------------------------------------------------------------
    [INFO] Total time:  8.558 s
    
  3. 導航到 http://localhost:4502/system/console/bundles。 這是OSGi Web控制台,包含有關實例上安裝的所有捆綁包AEM的資訊。

  4. 切換 ID 排序列,您應看到WKND捆綁包已安裝並處於活動狀態。

    核心束

  5. 您可以在中查看罐的「物理」位置 CRXDE-Lite:

    CRXDE的Jar位置

Ui.apps和Ui.content模組

ui.apps maven模組包含下面站點所需的所有呈現代碼 /apps。 這包括將以名為的格式儲存AEM的CSS/JS 客戶端。 這還包括 HTL 用於呈現動態HTML的指令碼。 你可以想到 ui.apps 模組作為指向JCR中結構的映射,但格式可以儲存在檔案系統上並提交到原始碼控制。 的 ui.apps 模組僅包含代碼。

要生成此模組,請執行以下操作:

  1. 從命令行。 導航到 ui.apps 資料夾 aem-guides-wknd):

    $ cd ../ui.apps
    
  2. 運行以下命令:

    $ mvn clean install -PautoInstallPackage
    ...
    Package installed in 122ms.
    [INFO] ------------------------------------------------------------------------
    [INFO] BUILD SUCCESS
    [INFO] ------------------------------------------------------------------------
    [INFO] Total time:  6.972 s
    [INFO] Finished at: 2019-12-06T14:44:12-08:00
    [INFO] ------------------------------------------------------------------------
    
  3. 導航到 http://localhost:4502/crx/packmgr/index.jsp。 您應該看到 ui.apps 軟體包作為第一個安裝的軟體包,它應具有比其它任何軟體包更新的時間戳。

    已安裝Ui.apps包

  4. 返回到命令行並運行以下命令(在 ui.apps 資料夾):

    $ mvn -PautoInstallPackagePublish clean install
    ...
    [INFO] --- content-package-maven-plugin:1.0.2:install (install-package-publish) @ aem-guides-wknd.ui.apps ---
    [INFO] Installing aem-guides-wknd.ui.apps (/Users/dgordon/code/aem-guides-wknd/ui.apps/target/aem-guides-wknd.ui.apps-0.0.1-SNAPSHOT.zip) to http://localhost:4503/crx/packmgr/service.jsp
    [INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused)
    [INFO] Retrying request
    [INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused)
    [INFO] Retrying request
    [INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused)
    [INFO] Retrying request
    [INFO] ------------------------------------------------------------------------
    [INFO] BUILD FAILURE
    [INFO] ------------------------------------------------------------------------
    [INFO] Total time:  6.717 s
    [INFO] Finished at: 2019-12-06T14:51:45-08:00
    [INFO] ------------------------------------------------------------------------
    

    配置檔案 autoInstallPackagePublish 旨在將包部署到埠上運行的發佈環境 4503。 如果找不到運行在http://localhost:4503上AEM的實例,則會出現上述錯誤。

  5. 最後運行以下命令以部署 ui.apps 埠上的包 4504:

    $ mvn -PautoInstallPackage clean install -Daem.port=4504
    ...
    [INFO] --- content-package-maven-plugin:1.0.2:install (install-package) @ aem-guides-wknd.ui.apps ---
    [INFO] Installing aem-guides-wknd.ui.apps (/Users/dgordon/code/aem-guides-wknd/ui.apps/target/aem-guides-wknd.ui.apps-0.0.1-SNAPSHOT.zip) to http://localhost:4504/crx/packmgr/service.jsp
    [INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused)
    [INFO] Retrying request
    [INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused)
    [INFO] Retrying request
    [INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused)
    [INFO] Retrying request
    [INFO] ------------------------------------------------------------------------
    [INFO] BUILD FAILURE
    [INFO] --------------------------------------------------------------------
    

    如果埠上沒有運行實例,則預計會AEM發生生成失敗 4504 的子菜單。 參數 aem.port 在POM檔案中定義 aem-guides-wknd/pom.xml

ui.content 模組的結構與 ui.apps 中。 唯一的區別是 ui.content 模組包含所謂的 可變 內容。 可變 內容實質上是指儲存在原始碼管理中的非代碼配置,如模板、策略或資料夾結構 可以直接在實例AEM上修改。 將在「頁面和模板」一章中更詳細地探討此問題。

用於生成 ui.apps 模組可用於構建 ui.content 中。 您可以在 ui.content 的子菜單。

疑難排解

如果您在使用「項目原型」生成項目時AEM遇到問題,請參閱 已知問題 和開啟清單 問題

再次祝賀!

恭喜你,翻閱獎金材料。

後續步驟

通過簡單易懂的功能,瞭解Adobe Experience Manager(AEM)站點元件的底層技術 HelloWorld 示例 元件基礎 教程。

本頁內容