可編輯的容器元件
固定元件可為SPA內容的製作提供一些彈性,但這種方法很僵化,需要開發人員定義可編輯內容的確切構成。 為了支援作者建立卓越的體驗,SPA編輯器支援在SPA中使用容器元件。 容器元件可讓作者將允許的元件拖放至容器中並加以撰寫,就像在傳統AEM Sites製作中一樣!
在本章中,我們將可編輯的容器新增至首頁檢視,讓作者可直接在SPA中使用可編輯的React元件來撰寫和配置豐富的內容體驗。
更新WKND應用程式
若要將容器元件新增至「首頁」檢視:
- 匯入AEM React Editable元件的
ResponsiveGrid
元件 - 匯入並註冊自訂的可編輯React元件(文字和影像),以用於ResponsiveGrid元件
使用ResponsiveGrid元件
若要將可編輯區域新增至「首頁」檢視:
-
開啟並編輯
react-app/src/components/Home.js
-
從
@adobe/aem-react-editable-components
匯入ResponsiveGrid
元件,並將其新增至Home
元件。 -
在
<ResponsiveGrid...>
元件上設定下列屬性pagePath = '/content/wknd-app/us/en/home'
itemPath = 'root/responsivegrid'
這會指示
ResponsiveGrid
元件從AEM資源擷取其內容:/content/wknd-app/us/en/home/jcr:content/root/responsivegrid
itemPath
對應至Remote SPA Page
AEM範本中定義的responsivegrid
節點,且會在從Remote SPA Page
AEM範本建立的新AEM頁面上自動建立。更新
Home.js
以新增<ResponsiveGrid...>
元件。code language-javascript ... 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
檔案應該如下所示:
建立可編輯的元件
以充分發揮SPA編輯器中提供的彈性撰寫體驗容器的效果。 我們已建立可編輯的Title元件,但接下來讓我們介紹幾個專案,讓作者可在新新增的ResponsiveGrid元件中使用可編輯的文字和影像元件。
新的可編輯文字和影像React元件是使用在可編輯的固定元件中公開的可編輯元件定義模式所建立。
可編輯文字元件
-
在IDE中開啟SPA專案
-
在
src/components/editable/core/Text.js
建立React元件 -
將下列程式碼新增至
Text.js
code language-javascript 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; }
-
在
src/components/editable/EditableText.js
建立可編輯的React元件 -
將下列程式碼新增至
EditableText.js
code language-javascript 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;
可編輯的文字元件實作應如下所示:
影像元件
-
在IDE中開啟SPA專案
-
在
src/components/editable/core/Image.js
建立React元件 -
將下列程式碼新增至
Image.js
code language-javascript 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> ) };
-
在
src/components/editable/EditableImage.js
建立可編輯的React元件 -
將下列程式碼新增至
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;
-
建立提供
EditableImage.scss
自訂樣式的SCSS檔案src/components/editable/EditableImage.scss
。 這些樣式以可編輯的React元件的CSS類別為目標。 -
將下列SCSS新增至
EditableImage.scss
code language-css .cmp-image__image { margin: 1rem 0; width: 100%; border: 0; }
-
在
EditableImage.js
中匯入EditableImage.scss
code language-javascript ... import './EditableImage.scss'; ...
可編輯的影像元件實作應如下所示:
匯入可編輯的元件
新建立的EditableText
和EditableImage
React元件已在SPA中參照,並根據AEM傳回的JSON動態具現化。 若要確保SPA可以使用這些元件,請在Home.js
中為其建立匯入陳述式
-
在IDE中開啟SPA專案
-
開啟檔案
src/Home.js
-
新增
AEMText
和AEMImage
的匯入陳述式code language-javascript ... // The following need to be imported, so that MapTo is run for the components import EditableText from './editable/EditableText'; import EditableImage from './editable/EditableImage'; ...
結果應如下所示:
如果這些匯入專案是 未 新增,則SPA不會叫用EditableText
和EditableImage
程式碼,因此元件不會對應到提供的資源型別。
在AEM中設定容器
AEM容器元件會使用原則來指定其允許的元件。 這是使用SPA編輯器時的關鍵設定,因為SPA只能轉譯對應了SPA元件的AEM元件。 請確定僅允許我們提供SPA實施的元件:
EditableTitle
對應至wknd-app/components/title
EditableText
對應至wknd-app/components/text
EditableImage
對應至wknd-app/components/image
若要設定「遠端SPA頁面」範本的responsivegrid容器:
-
登入AEM Author
-
導覽至 工具>一般>範本> WKND應用程式
-
編輯 報表SPA頁面
-
在右上角的模式切換器中選取 結構
-
點選以選取 配置容器
-
點選快顯列中的 原則 圖示
-
在右側的 允許的元件 標籤下,展開 WKND APP - CONTENT
-
請確定僅選取下列專案:
- 影像
- 文字
- 標題
-
點選 完成
在AEM中編寫容器
SPA更新為內嵌<ResponsiveGrid...>
、三個可編輯React元件(EditableTitle
、EditableText
和EditableImage
)的包裝函式,以及AEM更新為相符的範本原則後,我們就可以開始編寫容器元件中的內容。
-
登入AEM Author
-
導覽至 網站> WKND應用程式
-
點選 首頁,然後從最上方的動作列選取 編輯
- 「Hello World」文字元件隨即顯示,因為從AEM專案原型產生專案時會自動新增此元件
-
從「頁面編輯器」右上角的模式選取器中選取「編輯」
-
在標題下方找到 配置容器 可編輯區域
-
開啟 頁面編輯器的側列,然後選取 元件檢視
-
將下列元件拖曳至 配置容器
- 影像
- 標題
-
拖曳元件以將其重新排序為下列順序:
- 標題
- 影像
- 文字
-
作者 標題 元件
-
點選「標題」元件,然後點選 扳手 圖示以 編輯「標題」元件
-
新增下列文字:
- 標題: 夏天即將到來,讓我們充分利用它!
- 型別: H1
-
點選 完成
-
-
作者 影像 元件
- 在影像元件上,從側邊欄(切換至Assets檢視後)將影像拖曳到中
- 點選「影像」元件,然後點選「扳手」圖示以進行編輯
- 勾選 影像為裝飾性 核取方塊
- 點選 完成
-
作者 文字 元件
- 點選「文字」元件,並點選 扳手 圖示以編輯「文字」元件
- 新增下列文字:
- 現在,您可以在所有的一週冒險中獲得15%的折扣,在所有兩週或更長時間的冒險中獲得20%的折扣! 結帳時,新增行銷活動代碼SUMMERISCOMING以取得折扣!
- 點選 完成
-
您的元件現在已製作,但可垂直棧疊。
使用「AEM配置模式」可讓我們調整元件的大小和配置。
-
使用右上角的模式選擇器切換至 配置模式
-
調整影像和文字元件的大小,讓它們並排
- 影像 元件應為 8欄寬
- 文字 元件應為 3欄寬
-
在AEM頁面編輯器中 預覽 您的變更
-
重新整理在http://localhost:3000本機執行的WKND應用程式以檢視編寫的變更!
SPA
恭喜!
您已新增容器元件,讓作者可將可編輯的元件新增到WKND應用程式! 您現在知道如何:
- 在SPA中使用AEM React Editable元件的
ResponsiveGrid
元件 - 建立並註冊可編輯的React元件(文字和影像),以透過容器元件用於SPA
- 設定遠端SPA頁面範本,以允許啟用SPA的元件
- 將可編輯的元件新增至容器元件
- 在SPA編輯器中製作和配置元件
後續步驟
下一個步驟使用相同的技巧,在SPA中將可編輯的元件新增到冒險詳細資訊路由。