可編輯的容器元件

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

可編輯的容器元件

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

更新WKND應用程式

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

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

在ResponsiveGrid容器元件中匯入

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

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

要執行此操作：

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

將下列程式碼新增至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內使用，我們可以將其置於首頁檢視中。

開啟並編輯react-app/src/App.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對應至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核心元件。

文字元件

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

將下列程式碼新增至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專案
在src/components/aem/AEMImage.js建立React元件

將下列程式碼新增至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.js中導入AEMImage.scss
```
...
import './AEMImage.scss';
...
```

AEMImage.js和AEMImage.scss看起來應該如下：

AEMImage.js和AEMImage.scss

匯入可編輯的元件

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

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

為AEMText和AEMImage添加導入語句

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

結果應該如下：

Apps.js

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

在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頁面
在右上角的模式切換器中選擇結構
點選以選取「版面容器」
點選快顯列中的Policy圖示
在右側的允許的元件標籤下，展開WKND APP - CONTENT
請確定僅選取下列項目：
- 影像
- 文字
- 標題
點選完成

在AEM中編寫容器

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

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

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