可編輯的容器元件

固定 元件為編寫SPA內容提供了一定的彈性,但此方法很僵化,需要開發人員定義可編輯內容的確切組成。為了支援作者建立優異的體驗,SPA Editor支援在SPA中使用容器元件。 容器元件可讓作者將允許的元件拖放至容器中,並像傳統AEM Sites編寫中一樣加以編寫!

可編輯的容器元件

在本章中,我們將在首頁檢視中新增可編輯的容器,讓作者直接在SPA中使用AEM React核心元件來撰寫和配置豐富的內容體驗。

更新WKND應用程式

要向「首頁」視圖添加容器元件:

  • 匯入AEM React可編輯元件的ResponsiveGrid元件
  • 匯入並註冊AEM React核心元件(文字和影像),以用於容器元件

在ResponsiveGrid容器元件中匯入

要將可編輯區域放置到「首頁」視圖,我們必須:

  1. @adobe/aem-react-editable-components匯入ResponsiveGrid元件
  2. 使用withMappable註冊,讓開發人員可將其放入SPA
  3. 此外,請用MapTo註冊,以便它可在其他容器元件中重複使用,從而有效地嵌套容器。

要執行此操作:

  1. 在IDE中開啟SPA專案

  2. src/components/aem/AEMResponsiveGrid.js建立React元件

  3. 將下列程式碼新增至AEMResponsiveGrid.js

    // Import the withMappable API provided bu the AEM SPA Editor JS SDK
    import { withMappable, MapTo } from '@adobe/aem-react-editable-components';
    
    // Import the base ResponsiveGrid component
    import { ResponsiveGrid } from "@adobe/aem-react-editable-components";
    
    // The sling:resourceType for which this Core Component is registered with in AEM
    const RESOURCE_TYPE = "wcm/foundation/components/responsivegrid";
    
    // Create an EditConfig to allow the AEM SPA Editor to properly render the component in the Editor's context
    const EditConfig = {
        emptyLabel: "Layout Container",  // The component placeholder in AEM SPA Editor
        isEmpty: function(props) { 
            return props.cqItemsOrder == null || props.cqItemsOrder.length === 0;
        },                              // The function to determine if this component has been authored
        resourceType: RESOURCE_TYPE     // The sling:resourceType this SPA component is mapped to
    };
    
    // MapTo allows the AEM SPA Editor JS SDK to dynamically render components added to SPA Editor Containers
    MapTo(RESOURCE_TYPE)(ResponsiveGrid, EditConfig);
    
    // withMappable allows the component to be hardcoded into the SPA; <AEMResponsiveGrid .../>
    const AEMResponsiveGrid = withMappable(ResponsiveGrid, EditConfig);
    
    export default AEMResponsiveGrid;
    

程式碼與匯入AEM觸及核心元件標題元件類似。AEMTitle.js

AEMResponsiveGrid.js檔案應該如下所示:

AEMResponsiveGrid.js

使用AEMResponsiveGrid SPA元件

現在AEM ResponsiveGrid元件已註冊於中,且可在SPA內使用,我們可以將其置於首頁檢視中。

  1. 開啟並編輯react-app/src/App.js

  2. 匯入AEMResponsiveGrid元件,並將其置於<AEMTitle ...>元件上方。

  3. <AEMResponsiveGrid...>元件上設定以下屬性

    • pagePath = '/content/wknd-app/us/en/home'
    • itemPath = 'root/responsivegrid'

    這會指示此AEMResponsiveGrid元件從AEM資源擷取其內容:

    • /content/wknd-app/us/en/home/jcr:content/root/responsivegrid

    itemPath對應至Remote SPA Page AEM範本中定義的responsivegrid節點,並會在從Remote SPA Page AEM範本建立的新AEM頁面上自動建立。

    更新App.js以新增<AEMResponsiveGrid...>元件。

    ...
    import AEMResponsiveGrid from './components/aem/AEMResponsiveGrid';
    ...
    
    function Home() {
    return (
        <div className="Home">
            <AEMResponsiveGrid
                pagePath='/content/wknd-app/us/en/home' 
                itemPath='root/responsivegrid'/>
    
            <AEMTitle
                pagePath='/content/wknd-app/us/en/home' 
                itemPath='title'/>
            <Adventures />
        </div>
    );
    }
    

Apps.js檔案應該如下所示:

App.js

建立可編輯的元件

若要充分運用SPA編輯器中提供的彈性製作體驗容器。 我們已建立可編輯的標題元件,不過讓作者在新增的容器元件中再多使用一些內容,以便使用文字和影像AEM WCM核心元件。

文字元件

  1. 在IDE中開啟SPA專案

  2. src/components/aem/AEMText.js建立React元件

  3. 將下列程式碼新增至AEMText.js

    import { withMappable, MapTo } from '@adobe/aem-react-editable-components';
    import { TextV2, TextV2IsEmptyFn } from "@adobe/aem-core-components-react-base";
    
    const RESOURCE_TYPE = "wknd-app/components/text";
    
    const EditConfig = {    
        emptyLabel: "Text",
        isEmpty: TextV2IsEmptyFn,
        resourceType: RESOURCE_TYPE
    };
    
    MapTo(RESOURCE_TYPE)(TextV2, EditConfig);
    
    const AEMText = withMappable(TextV2, EditConfig);
    
    export default AEMText;
    

AEMText.js檔案應該如下所示:

AEMText.js

影像元件

  1. 在IDE中開啟SPA專案

  2. src/components/aem/AEMImage.js建立React元件

  3. 將下列程式碼新增至AEMImage.js

    import { withMappable, MapTo } from '@adobe/aem-react-editable-components';
    import { ImageV2, ImageV2IsEmptyFn } from "@adobe/aem-core-components-react-base";
    
    const RESOURCE_TYPE = "wknd-app/components/image";
    
    const EditConfig = {    
        emptyLabel: "Image",
        isEmpty: ImageV2IsEmptyFn,
        resourceType: RESOURCE_TYPE
    };
    
    MapTo(RESOURCE_TYPE)(ImageV2, EditConfig);
    
    const AEMImage = withMappable(ImageV2, EditConfig);
    
    export default AEMImage;
    
  4. 建立SCSS檔案src/components/aem/AEMImage.scss,該檔案提供AEMImage.scss的自定義樣式。 這些樣式以AEM React核心元件的BEM標籤法CSS類別為目標。

  5. 將以下SCSS添加到AEMImage.scss

    .cmp-image__image {
        margin: 1rem 0;
        width: 100%;
        border: 0;
     }
    
  6. AEMImage.js中導入AEMImage.scss

    ...
    import './AEMImage.scss';
    ...
    

AEMImage.jsAEMImage.scss看起來應該如下:

AEMImage.js和AEMImage.scss

匯入可編輯的元件

新建立的AEMTextAEMImage SPA元件會在SPA中參照,並根據AEM傳回的JSON以動態方式具現化。 為確保SPA可使用這些元件,請在App.js中為它們建立匯入陳述式

  1. 在IDE中開啟SPA專案

  2. 開啟檔案src/App.js

  3. AEMTextAEMImage添加導入語句

    ...
    import AEMText from './components/aem/AEMText';
    import AEMImage from './components/aem/AEMImage';
    ...
    

結果應該如下:

Apps.js

如果這些匯入是新增​not,SPA將不會叫用AEMTextAEMImage程式碼,因此不會根據提供的資源類型註冊元件。

在AEM中設定容器

AEM容器元件使用原則指定其允許的元件。 使用SPA編輯器時,這是重要的設定,因為SPA只會轉譯已對應SPA元件的AEM WCM核心元件。 確保僅允許我們為SPA實作提供的元件:

  • AEMTitle 已對應至 wknd-app/components/title
  • AEMText 已對應至 wknd-app/components/text
  • AEMImage 已對應至 wknd-app/components/image

要配置遠程SPA頁面模板的Reponsivegrid容器:

  1. 登入AEM作者

  2. 導覽至​工具>一般>範本> WKND應用程式

  3. 編輯​報表SPA頁面

    響應式網格策略

  4. 在右上角的模式切換器中選擇​結構

  5. 點選以選取「版面容器

  6. 點選快顯列中的​Policy​圖示

    響應式網格策略

  7. 在右側的​允許的元件​標籤下,展開​WKND APP - CONTENT

  8. 請確定僅選取下列項目:

    • 影像
    • 文字
    • 標題

    遠端SPA頁面

  9. 點選​完成

在AEM中編寫容器

更新SPA以內嵌<AEMResponsiveGrid...>、三個AEM React核心元件(AEMTitleAEMTextAEMImage)的包裝函式,並更新AEM的相符範本原則後,我們就可以開始在容器元件中編寫內容。

  1. 登入AEM作者

  2. 導覽至​Sites > WKND App

  3. 點選​Home​並從頂端動作列選取​Edit

    • 隨即顯示「Hello World」文字元件,因為這是從AEM專案原型產生專案時自動新增的
  4. 從頁面編輯器右上角的模式選取器中選取​Edit

  5. 找出標題下方的​Layout Container​可編輯區域

  6. 開啟​頁面編輯器的側欄,然後選取​元件檢視

  7. 將下列元件拖曳至​版面容器

    • 影像
    • 標題
  8. 拖曳元件以依下列順序重新排序:

    1. 標題
    2. 影像
    3. 文字
  9. ____ Authorithe ____ Titlecomponent

    1. 點選「Title」元件,然後點選​扳手​圖示以​edit Title元件
    2. 新增下列文字:
      • 標題:夏天即將到來,讓我們充分利用它!
      • 類型:H1
    3. 點選​完成
  10. ____ 製作 ____ Imagecomponent

    1. 從影像元件的側邊列(切換至「資產」檢視後)拖曳影像進入
    2. 點選「影像」元件,然後點選​扳手​圖示以編輯
    3. 勾選​Image is decortial​核取方塊
    4. 點選​完成
  11. ____ Authorith ____ Textcomponent

    1. 點選「文字」元件,然後點選​扳手​圖示,以編輯「文字」元件
    2. 新增下列文字:
      • 現在,在所有1週的冒險中,你可以獲得15%的回報,在所有2週或更長的冒險中,你可以獲得20%的回報!結帳時,只需新增促銷活動代碼SUMMERISCOMING,即可獲得折扣!
    3. 點選​完成
  12. 您的元件現已撰寫完成,但垂直堆疊。

    製作的元件

    使用「AEM版面模式」可讓我們調整元件的大小和版面。

  13. 使用右上角的模式選擇器切換到​佈局模式

  14. ____ 調整影像和文字元件的大小,使它們並排

    • ____ Imagecomponent應寬 8列
    • ____ Textcomponent應為 3欄寬

    版面元件

  15. ____ 在AEM頁面編輯器中預覽您的變更

  16. 重新整理在http://localhost:3000本機執行的WKND應用程式,以查看所撰寫的變更!

    SPA中的容器元件

恭喜!

您已新增容器元件,讓作者可將可編輯的元件新增至WKND應用程式! 您現在知道如何:

  • 在SPA中使用AEM React可編輯元件的ResponsiveGrid元件
  • 註冊AEM React核心元件(文字和影像),以透過容器元件用於SPA
  • 設定遠端SPA頁面範本,以允許啟用SPA的核心元件
  • 將可編輯的元件新增至容器元件
  • 在SPA編輯器中製作和配置元件

後續步驟

下一步將使用此相同的技術來將可編輯的元件新增至SPA中的「探險詳細資訊」路由

本頁內容