建立和新增範本和元件 creating-and-adding-templates-and-components

NOTE
Adobe建議針對需要以單頁應用程式框架為基礎的使用者端轉譯(例如React)的專案,使用SPA編輯器。 了解更多

AEM Mobile On-Demand提供完整設定的應用程式範本、文章範本和文章元件。

We.Unlimited應用程式是範例範本,代表可完整設定及管理的AEM Mobile隨選應用程式的外殼。

在建立應用程式時選取此範例範本,可提供AEM Mobile豐富的儀表板。

chlimage_1-70

NOTE
若要從AEM Mobile應用程式控制中心管理您的應用程式和行動應用程式內容,請參閱AEM Mobile應用程式控制面板

建立應用程式範本 creating-app-templates

應用程式範本是用來建立應用程式,並作為頁面範本和元件的集合,代表應用程式的基準或基礎。 範本會列出一些基本屬性,以便以適當的方式領導應用程式。 一般而言,客戶不會建立太多應用程式。

應用程式範本可讓您輕鬆使用開發人員建立的現有設計,以便在AEM中建立新的應用程式。

根據其他應用程式的範本建立應用程式時,您會得到其起點代表在其中建立該應用程式之應用程式的應用程式。

根據應用程式範本建立應用程式的步驟:

  1. 導覽至AEM Mobile應用程式目錄: <server-url>/aem/apps.html/content/mobileapps
  2. 選取​ 建立 > 應用程式,如下所示

使用此範本建立應用程式後,您可以將文章、橫幅和集合新增至應用程式。 若要重新造訪文章、橫幅和集合的建立,請參閱內容管理動作

NOTE
或者,您也可以選取範例應用程式範本,例如AEM開發人員提供的​ We.Unlimited ​應用程式。 如果您的應用程式使用此範例範本,會取得一些要處理的範例文章和集合。 您可以選擇使用範例範本和元件、自訂現有範本和元件,或為應用程式建立新範本和元件。
CAUTION
正在設定​ redirectTarget ​屬性
使用其中一個應用程式範本時,開發人員會定義應用程式的內容。 不過,開發人員必須知道在jcr中建立應用程式的位置,以及​ redirectTarget ​屬性的值。
redirectTarget ​是在建立應用程式作業中計算的,如果應用程式範本中有redirectTarget屬性可用,且redirectTarget的值定義為相對,則會嘗試解析路徑。 當建立應用程式程式在應用程式範本中找到redirectTarget的相對值時,該值會附加至建立應用程式的已解析位置。
例如,如果應用程式範本定義值為"lanugage-masters/en"的​ redirectTarget,且應用程式是在"/content/mobileapps/fooApp"中建立,則建立應用程式後,redirectTarget的最終值將是"/content/mobileapps/fooApp/language-masters/en"。

建立內容範本 creating-content-templates

每個實體型別都有兩個現成的範本。 說明如下:

  • 預設範本: ​用於以適用的預設屬性/結構建立內容
  • 匯入的範本: ​用於從AEM Mobile匯入內容,具有適用的預設屬性/結構

文章範本 article-templates

Unlimited文章是範例範本,代表典型的AEM Mobile隨選文章版面。

  1. 在​ 管理文章 ​中,選取​ + ​以建立文章。 您可以選擇​ 無限制文章 ​或​ RTF文章。 下圖顯示的選項可讓您從這兩個文章範本的任何一個中進行選擇。

  2. 按一下​ 下一步 ​以定義文章中繼資料,例如文章名稱/標題、說明、作者、摘要、部門、縮圖影像、文章存取權等。

  3. 按一下[下一步]​ ​填入廣告內容。

  4. 按一下​ 下一步 ​以輸入文章影像或社群媒體影像

  5. 按一下[下一步]​ ,選擇此新文章的集合連結。

  6. 按一下[下一步]​ ​輸入社交分享的詳細資料。

  7. 按一下​ 建立,完成使用範例建立文章的程式。 您可以按一下​ 完成 ​或​ 編輯文章 ​來編輯此文章的內容。

chlimage_1-71

新增元件至文章 adding-components-to-article

建立後,作者可以新增文字和影像等元件來編輯文章內容。 文章是AEM頁面範本的擴充功能。

選取要編輯的文章,然後按一下[編輯] ​將元件新增至文章。

chlimage_1-72 chlimage_1-73

選擇左側面板上的'+',將元件新增至您的文章。

chlimage_1-74

建立現成可用的範本 creating-out-of-the-box-templates

沒有現成的文章範本,不過自訂範本應擴充預設範本,請參閱Geometrixx Unlimited應用程式的文章範本範例

超出一般AEM範本必要屬性的關鍵屬性包括;

dps-resourceType="dps:Article"

此屬性可確保將AEM頁面辨識為AEM Mobile目標文章頁面。

根據AEM範本,您可以將任何預設屬性或子節點新增到範本的​ jcr:content

橫幅和系列範本 banner-and-collection-templates

CAUTION
橫幅和集合沒有內容,因此其建立不支援自訂範本。

建立和新增元件 creating-and-adding-components

元件會使用並允許存取Widget,且這些元件會用於轉譯內容。

程式碼存放庫中包含簡單元件,其來源可以在AEM中找到。 接著,也可以在CRXDE Lite本機開啟它。

NOTE
目前沒有為AEM Mobile提供的現成元件。

您可以將元件新增至頁面。 任何元件都可以在AEM Mobile應用程式中使用,但在套用時,可能無法正確呈現。

不過,若無在AEM中轉譯的自訂匯出內容同步處理常式,自訂元件可能無法正確地匯出並上傳至AEM Mobile On-demand Services。

一旦元件已連同數個其他建置區塊元件納入AEM頁面,您就可以新增其他元件至頁面或編輯現有元件。

若要新增其他元件至頁面:

  1. 選擇頁面,並透過編輯器標題右上角的下拉式清單,確定您處於編輯模式
  2. 使用編輯器標題中最左側的圖示切換側面板
  3. 選取​ 元件 ​索引標籤
  4. 將其中一個可用元件拖放至頁面

chlimage_1-75

若要編輯現有元件:

  1. 選擇該頁面,並確定您處於​ 編輯 ​模式並選取元件
  2. 選取扳手圖示以設定元件
NOTE
您可以在AEM中建立元件,並使用使用CRXDE Lite開發自訂該元件。 一旦您根據需求自訂了現有的元件,就可以使用​ 管理文章 ​下的​ 編輯 ​選項將其新增到您的頁面中,如上圖所示。
NOTE
請參閱AEM Mobile中的範本與元件開發最佳實務

後續步驟 the-next-steps

recommendation-more-help
2eeeb575-8007-40cc-a72d-206fbc4ddd4b