可編輯的容器元件

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

可編輯的容器元件

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

更新WKND應用程式

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

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

使用ResponsiveGrid元件

要向「首頁」視圖添加可編輯區域,請執行以下操作:

  1. 開啟和編輯 react-app/src/components/Home.js

  2. 匯入 ResponsiveGrid 元件 @adobe/aem-react-editable-components 並加入 Home 元件。

  3. <ResponsiveGrid...> 元件

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

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

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

    itemPath 映射至 responsivegrid 在中定義的節點 Remote SPA Page AEM範本和會自動建立在從 Remote SPA Page AEM範本。

    更新 Home.js 若要新增 <ResponsiveGrid...> 元件。

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

Home.js 檔案看起來應該像這樣:

Home.js

建立可編輯的元件

若要充分運用SPA編輯器中提供的彈性製作體驗容器。 我們已建立可編輯的標題元件,但我們將再做幾項,讓作者在新新增的ResponsiveGrid元件中使用可編輯的文字和影像元件。

新的可編輯Text和Image React元件是使用 可編輯的固定元件.

可編輯的文字元件

  1. 在IDE中開啟SPA專案

  2. 在建立React元件 src/components/editable/core/Text.js

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

    import React from 'react'
    
    const TextPlain = (props) => <div className={props.baseCssClass}><p className="cmp-text__paragraph">{props.text}</p></div>;
    const TextRich = (props) => {
    const text = props.text;
    const id = (props.id) ? props.id : (props.cqPath ? props.cqPath.substr(props.cqPath.lastIndexOf('/') + 1) : "");
        return <div className={props.baseCssClass} id={id} data-rte-editelement dangerouslySetInnerHTML={{ __html: text }} />
    };
    
    export const Text = (props) => {
        if (!props.baseCssClass) {
            props.baseCssClass = 'cmp-text'
        }
    
        const { richText = false } = props
    
        return richText ? <TextRich {...props} /> : <TextPlain {...props} />
        }
    
        export function textIsEmpty(props) {
        return props.text == null || props.text.length === 0;
    }
    
  4. 在建立可編輯的React元件 src/components/editable/EditableText.js

  5. 將下列程式碼新增至 EditableText.js

    import React from 'react'
    import { EditableComponent, MapTo } from '@adobe/aem-react-editable-components';
    import { Text, textIsEmpty } from "./core/Text";
    import { withConditionalPlaceHolder } from "./core/util/withConditionalPlaceholder";
    import { withStandardBaseCssClass } from "./core/util/withStandardBaseCssClass";
    
    const RESOURCE_TYPE = "wknd-app/components/text";
    
    const EditConfig = {
        emptyLabel: "Text",
        isEmpty: textIsEmpty,
        resourceType: RESOURCE_TYPE
    };
    
    export const WrappedText = (props) => {
        const Wrapped = withConditionalPlaceHolder(withStandardBaseCssClass(Text, "cmp-text"), textIsEmpty, "Text V2")
        return <Wrapped {...props} />
    };
    
    const EditableText = (props) => <EditableComponent config={EditConfig} {...props}><WrappedText /></EditableComponent>
    
    MapTo(RESOURCE_TYPE)(EditableText);
    
    export default EditableText;
    

可編輯的文字元件實作看起來應該類似:

可編輯的文字元件

影像元件

  1. 在IDE中開啟SPA專案

  2. 在建立React元件 src/components/editable/core/Image.js

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

    import React from 'react'
    import { RoutedLink } from "./RoutedLink";
    
    export const imageIsEmpty = (props) => (!props.src) || props.src.trim().length === 0
    
    const ImageInnerContents = (props) => {
    return (<>
        <img src={props.src}
            className={props.baseCssClass + '__image'}
            alt={props.alt} />
        {
            !!(props.title) && <span className={props.baseCssClass + '__title'} itemProp="caption">{props.title}</span>
        }
        {
            props.displayPopupTitle && (!!props.title) && <meta itemProp="caption" content={props.title} />
        }
        </>);
    };
    
    const ImageContents = (props) => {
        if (props.link && props.link.trim().length > 0) {
            return (
            <RoutedLink className={props.baseCssClass + '__link'} isRouted={props.routed} to={props.link}>
                <ImageInnerContents {...props} />
            </RoutedLink>
            )
        }
        return <ImageInnerContents {...props} />
    };
    
    export const Image = (props) => {
        if (!props.baseCssClass) {
            props.baseCssClass = 'cmp-image'
        }
    
        const { isInEditor = false } = props;
        const cssClassName = (isInEditor) ? props.baseCssClass + ' cq-dd-image' : props.baseCssClass;
    
        return (
            <div className={cssClassName}>
                <ImageContents {...props} />
            </div>
        )
    };
    
  4. 在建立可編輯的React元件 src/components/editable/EditableImage.js

  5. 將下列程式碼新增至 EditableImage.js

import { EditableComponent, MapTo } from '@adobe/aem-react-editable-components';
import { Image, imageIsEmpty } from "./core/Image";
import React from 'react'

import { withConditionalPlaceHolder } from "./core/util/withConditionalPlaceholder";
import { withStandardBaseCssClass } from "./core/util/withStandardBaseCssClass";

const RESOURCE_TYPE = "wknd-app/components/image";

const EditConfig = {
    emptyLabel: "Image",
    isEmpty: imageIsEmpty,
    resourceType: RESOURCE_TYPE
};

const WrappedImage = (props) => {
    const Wrapped = withConditionalPlaceHolder(withStandardBaseCssClass(Image, "cmp-image"), imageIsEmpty, "Image V2");
    return <Wrapped {...props}/>
}

const EditableImage = (props) => <EditableComponent config={EditConfig} {...props}><WrappedImage /></EditableComponent>

MapTo(RESOURCE_TYPE)(EditableImage);

export default EditableImage;
  1. 建立SCSS檔案 src/components/editable/EditableImage.scss 可為 EditableImage.scss. 這些樣式以可編輯的React元件的CSS類別為目標。

  2. 將以下SCSS添加到 EditableImage.scss

    .cmp-image__image {
        margin: 1rem 0;
        width: 100%;
        border: 0;
     }
    
  3. 匯入 EditableImage.scss in EditableImage.js

    ...
    import './EditableImage.scss';
    ...
    

可編輯的影像元件實作看起來應該類似:

可編輯的影像元件

匯入可編輯的元件

新建立的 EditableTextEditableImage SPA會參考React元件,並根據AEM傳回的JSON以動態方式具現化。 若要確保SPA可使用這些元件,請在 Home.js

  1. 在IDE中開啟SPA專案

  2. 開啟檔案 src/Home.js

  3. 為添加導入語句 AEMTextAEMImage

    ...
    // The following need to be imported, so that MapTo is run for the components
    import EditableText from './editable/EditableText';
    import EditableImage from './editable/EditableImage';
    ...
    

結果應該如下:

Home.js

如果這些匯入 not 新增: EditableTextEditableImage SPA不會叫用程式碼,因此元件不會對應至提供的資源類型。

在AEM中設定容器

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

  • EditableTitle 已對應至 wknd-app/components/title
  • EditableText 已對應至 wknd-app/components/text
  • EditableImage 已對應至 wknd-app/components/image

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

  1. 登入AEM作者

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

  3. 編輯 報表SPA頁面

    響應式網格策略

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

  5. 點選以選取 版面容器

  6. 點選 原則 圖示

    響應式網格策略

  7. 在右下 允許的元件 標籤,展開 WKND應用程式 — 內容

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

    • 影像
    • 文字
    • 標題

    遠端SPA頁面

  9. 點選 完成

在AEM中編寫容器

更新SPA以內嵌 <ResponsiveGrid...>,包裝三個可編輯的React元件(EditableTitle, EditableText,和 EditableImage),而AEM已更新為相符的範本原則,我們就可以開始在容器元件中編寫內容。

  1. 登入AEM作者

  2. 導覽至 Sites > WKND應用程式

  3. 點選 首頁 選取 編輯 從頂端動作列

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

  5. 找出 版面容器 標題下方的可編輯區域

  6. 開啟 頁面編輯器側邊列,然後選取 元件視圖

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

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

    1. 標題
    2. 影像
    3. 文字
  9. 作者 the 標題 元件

    1. 點選「標題」元件,然後點選 扳手 圖示 編輯 標題元件
    2. 新增下列文字:
      • 標題: 夏天就要來了,讓我們好好利用!
      • 類型: H1
    3. 點選 完成
  10. 作者 the 影像 元件

    1. 從影像元件的側邊列(切換至「資產」檢視後)拖曳影像進入
    2. 點選「影像」元件,然後點選 扳手 編輯
    3. 檢查 影像是裝飾 核取方塊
    4. 點選 完成
  11. 作者 the 文字 元件

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

    製作的元件

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

  1. 切換至 版面模式 使用右上角的模式選取器

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

    • 影像 元件應 寬8欄
    • 文字 元件應 寬3欄

    版面元件

  3. 預覽 AEM頁面編輯器中的變更

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

    SPA中的容器元件

恭喜!

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

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

後續步驟

下一步會使用相同的技術 將可編輯的元件添加到冒險詳細資訊路徑 在SPA中。

本頁內容