可編輯的容器元件

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

可編輯的容器元件

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

更新WKND應用程式

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

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

在ResponsiveGrid容器元件中匯入

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

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

要執行此操作：

在IDE中開啟SPA專案
在建立React元件 src/components/aem/AEMResponsiveGrid.js

將下列程式碼新增至 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;

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

此 AEMResponsiveGrid.js 檔案看起來應該像這樣：

AEMResponsiveGrid.js

使用AEMResponsiveGrid SPA元件

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

開啟和編輯 react-app/src/Home.js
匯入 AEMResponsiveGrid 元件並放在上面 <AEMTitle ...> 元件。

在 <AEMResponsiveGrid...> 元件

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

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

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

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

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

...
import AEMResponsiveGrid from './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>
    );
}

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

Home.js

建立可編輯的元件

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

文字元件

在IDE中開啟SPA專案
在建立React元件 src/components/aem/AEMText.js

將下列程式碼新增至 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

影像元件

在IDE中開啟SPA專案
在建立React元件 src/components/aem/AEMImage.js

將下列程式碼新增至 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;

建立SCSS檔案 src/components/aem/AEMImage.scss 可為 AEMImage.scss. 這些樣式以AEM React核心元件的BEM標籤法CSS類別為目標。

將以下SCSS添加到 AEMImage.scss

.cmp-image__image {
    margin: 1rem 0;
    width: 100%;
    border: 0;
 }

匯入 AEMImage.scss in AEMImage.js
```
...
import './AEMImage.scss';
...
```

此 AEMImage.js 和 AEMImage.scss 看起來應該像這樣：

AEMImage.js和AEMImage.scss

匯入可編輯的元件

新建立的 AEMText 和 AEMImage SPA元件會在SPA中參照，並會根據AEM傳回的JSON以動態方式具現化。若要確保SPA可使用這些元件，請在 Home.js

在IDE中開啟SPA專案
開啟檔案 src/Home.js

為添加導入語句 AEMText 和 AEMImage

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

結果應該如下：

Home.js

如果這些匯入 not 新增： AEMText 和 AEMImage SPA不會叫用程式碼，因此不會根據提供的資源類型註冊元件。

在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容器：

登入AEM作者
導覽至 工具>一般>範本> WKND應用程式
編輯 報表SPA頁面
選擇結構在右上角的模式切換器中
點選以選取 版面容器
點選原則圖示
在右下 允許的元件 標籤，展開 WKND應用程式 — 內容
請確定僅選取下列項目：
- 影像
- 文字
- 標題
點選完成

在AEM中編寫容器

更新SPA以內嵌 <AEMResponsiveGrid...>，三個AEM React核心元件的包裝函式(AEMTitle, AEMText，和 AEMImage)，而AEM已更新為相符的範本原則，我們就可以開始在容器元件中編寫內容。

登入AEM作者
導覽至 Sites > WKND應用程式
點選首頁選取編輯從頂端動作列
- 隨即顯示「Hello World」文字元件，因為這是從AEM專案原型產生專案時自動新增的
選擇編輯從頁面編輯器右上方的模式選取器
找出 版面容器 標題下方的可編輯區域
開啟 頁面編輯器側邊列，然後選取 元件視圖
將下列元件拖曳至 版面容器
- 影像
- 標題
拖曳元件以依下列順序重新排序：
1. 標題
2. 影像
3. 文字
作者 the 標題元件
1. 點選「標題」元件，然後點選扳手圖示編輯標題元件
2. 新增下列文字：
  - 標題： 夏天就要來了，讓我們好好利用！
  - 類型： H1
3. 點選完成
作者 the 影像元件
1. 從影像元件的側邊列（切換至「資產」檢視後）拖曳影像進入
2. 點選「影像」元件，然後點選扳手編輯
3. 檢查 影像是裝飾 核取方塊
4. 點選完成
作者 the 文字元件
1. 點選「文字」元件，然後點選「」，編輯「文字」元件扳手圖示
2. 新增下列文字：
  - 現在，在所有1週的冒險中，你可以獲得15%的回報，在所有2週或更長的冒險中，你可以獲得20%的回報！結帳時，新增促銷活動代碼SUMMERISCOMING以取得折扣！
3. 點選完成
您的元件現已撰寫完成，但垂直堆疊。

使用「AEM版面模式」可讓我們調整元件的大小和版面。
切換至 版面模式 使用右上角的模式選取器
調整大小 影像和文字元件，使它們並排
- 影像元件應 寬8欄
- 文字元件應 寬3欄
預覽 AEM頁面編輯器中的變更
重新整理在本機執行的WKND應用程式 http://localhost:3000 來查看所撰寫的變更！