<a0/SPA>中的複合元件

複合元件將多個基本元件AEM結合為單一元件,以運用元件的模組化特性。 常見的複合元件使用案例是卡片元件,由影像和文字元件的組合而成。

當複合元件在「單頁應用程式(AEMSPA)編輯器」架構中正確實作時,內容作者可以像拖放任何其他元件一樣拖放這些元件,但仍能個別編輯組成複合元件的每個元件。

本文將示範如何將複合元件新增至單一頁面應用程式,以便與編輯器完AEM美搭SPA配運作。

使用案例

本文將以典型卡片元件為實例。 卡片是許多數位體驗的常用UI元素,通常由影像和相關文字或標題組成。 作者希望能夠拖放整張卡片,但可以個別編輯卡片的影像,並自訂相關文字。

必備條件

以下用於支援複合元件使用案例的模型需要以下先決條件。

  • 您的開AEM發實例在具有示例項目的埠4502上本地運行。
  • 您已啟用正在工作的外部React應用程式,可AEM在中編輯。
  • React應用程式會使用RemotePage元AEM件載入至編輯器

向<a0/SPA>添加複合元件

根據您在中的實作,實作複合元件有三種不SPA同的模AEM型。

以下各節提供使用卡片元件來實施每個案例的範例。

您的專案中不存在元AEM件。

首先,建立構成複合元件的元件,即影像及其文本的元件。

  1. 在專案中建立文字元AEM件。

  2. 在元件的editConfig節點中從項目添加相應的resourceType

     resourceType: 'wknd-spa/components/text' 
    
  3. 使用withMappable幫助程式可啟用元件的編輯。

    export const AEMText = withMappable(Text, TextEditConfig); 
    

文字元件將類似下列。

import React from 'react';
import { withMappable } from '@adobe/aem-react-editable-components';

export const TextEditConfig = {
  emptyLabel: 'Text',
  isEmpty: function(props) {
    return !props || !props.text || props.text.trim().length < 1;
  },
  resourceType: 'wknd-spa/components/text'
};

export const Text = ({ cqPath, richText, text }) => {
  const richTextContent = () => (
    <div className="aem_text"
      id={cqPath.substr(cqPath.lastIndexOf('/') + 1)}
      data-rte-editelement
      dangerouslySetInnerHTML={{__html: text}} />
  );
  return richText ? richTextContent() : (
     <div className="aem_text">{text}</div>
  );
};

export const AEMText = withMappable(Text, TextEditConfig);

如果您以類似的方式建立影像元件,則可將它與AEMText元件結合為新的卡片元件,將影像和文字元件當成子系。

import React from 'react';
import { AEMText } from './AEMText';
import { AEMImage } from './AEMImage';

export const AEMCard = ({ pagePath, itemPath}) => (
  <div>
    <AEMText
       pagePath={pagePath}
       itemPath={`text`} />
    <AEMImage
       pagePath={pagePath}
       itemPath={`image`} />
   </div>
);

現在,這個產生的複合元件可以放置在應用程式中的任何位置,而會在編輯器中新增文字和影像元件的預留位SPA置。 在以下範例中,卡片元件會新增至標題下方的首頁元件。

function Home() {
  return (
    <div className="Home">
      <h2>Current Adventures</h2>
      <AEMCard
        pagePath='/content/wknd-spa/home' />
    </div>
  );
}

這會在編輯器中顯示文字和影像的空白預留位置。 當使用編輯器輸入這些值時,這些值會儲存在指定的頁面路徑(即/content/wknd-spa/home)的根層級,且名稱會在itemPath中指定。

編輯器中的複合卡元件

元件存在於您的專AEM案中,但其必要內容不存在。

在這種情況下,卡片元件已建立在包含標題和影AEM像節點的專案中。 子節點(文本和影像)具有相應的資源類型。

卡元件的節點結構

然後,您可以將它新增至SPA並擷取其內容。

  1. 在中為此建立相SPA應元件。 確保子元件映射到項目中AEM的相應資源SPA類型。 在此範例中,我們使用與前例中詳細的相同的AEMTextAEMImage元件。

    import React from 'react';
    import { Container, withMappable, MapTo } from '@adobe/aem-react-editable-components';
    import { Text, TextEditConfig } from './AEMText';
    import Image, { ImageEditConfig } from './AEMImage';
    
    export const AEMCard = withMappable(Container, {
      resourceType: 'wknd-spa/components/imagecard'
    });
    
    MapTo('wknd-spa/components/text')(Text, TextEditConfig);
    MapTo('wknd-spa/components/image')(Image, ImageEditConfig);
    
  2. 由於imagecard元件沒有內容,請將卡片新增至頁面。 在中包含現AEM有容器SPA。

    • 如果專案中已有容器,AEM我們可將它加入SPA,並改為將元件新增至容AEM器。
    • 確保卡元件映射到中的相應資源類SPA型。
    <ResponsiveGrid
     pagePath='/content/wknd-spa/home'
     itemPath='root/responsivegrid' />
    
  3. 將建立的wknd-spa/components/imagecard元件添加到頁面模板中容器元件的允許元件中。

現在,imagecard元件可直接新增至編輯器中的容AEM器。

在編輯器中合成卡片

您的專案中同時包含元件及其必要AEM內容。

如果內容存在於AEM中,則可透過提供內容SPA路徑直接包含在中。

<AEMCard
    pagePath='/content/wknd-spa/home'
    itemPath='root/responsivegrid/imagecard' />

節點結構中的複合路徑

AEMCard元件與上一個使用案例中定義的元件相同。 在這裡,專案中上述位置所定義AEM的內容會包含在SPA中。

本頁內容

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now