文件AEMAEM 教學課程AEM Headless 教學課程

新增導覽和路由 navigation-routing

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 主題：

建立對象：

  • 初學者
  • 開發人員

瞭解如何使用SPA編輯器SDK將對應到AEM頁面，以支援SPA中的多個檢視。 動態導覽是使用React Router和React Core Components來實施。

目標

  1. 瞭解使用SPA編輯器時可用的SPA模型路由選項。
  2. 瞭解如何使用React Router，在SPA的不同檢視之間瀏覽。
  3. 使用AEM React核心元件來實作由AEM頁面階層驅動的動態導覽。

您將建置的內容

本章會將導覽新增至AEM中的SPA。 導覽功能表是由AEM頁面階層所驅動，並將使用導覽核心元件提供的JSON模型。

已新增導覽

先決條件

檢閱設定本機開發環境所需的工具和指示。 本章是Map Components章節的延續，但您只需要將已啟用SPA的AEM專案部署到本機AEM執行個體即可。

將導覽新增至範本 add-navigation-template

  1. 開啟瀏覽器並登入AEM，http://localhost:4502/。 起始程式碼基底應該已經部署。

  2. 瀏覽至​ SPA頁面範本： http://localhost:4502/editor.html/conf/wknd-spa-react/settings/wcm/templates/spa-page-template/structure.html。

  3. 選取最外層的​ 根配置容器，然後按一下它的​ 原則 ​圖示。 請注意，not ​選取​ 配置容器 ​已解除製作鎖定。

    選取根配置容器原則圖示

  4. 建立名稱為​ SPA結構 ​的新原則：

    SPA結構原則

    在​ 允許的元件 > 一般 >下，選取​ 配置容器 ​元件。

    在​ 允許的元件 > WKND SPA REACT — 結構 >選取​ 導覽 ​元件下：

    選取導覽元件

    在​ 允許的元件 > WKND SPA REACT - Content >選取​ 影像 ​和​ 文字 ​元件。 您總共應選取4個元件。

    按一下「完成」以儲存變更。

  5. 重新整理頁面，並在解除鎖定的​ 配置容器 ​上方新增​ 導覽 ​元件：

    新增導覽元件至範本

  6. 選取​ Navigation ​元件，然後按一下其​ 原則 ​圖示以編輯原則。

  7. 使用​ SPA導覽 ​的​ 原則標題 ​建立新原則。

    在​ 屬性 ​下：

    • 將​ 導覽根目錄 ​設定為/content/wknd-spa-react/us/en。
    • 將​ 排除根層級 ​設定為​ 1。
    • 取消勾選​ 收集所有子頁面。
    • 將​ 導覽結構深度 ​設定為​ 3。

    設定導覽原則

    這會收集位於/content/wknd-spa-react/us/en下方的導覽2層級。

  8. 儲存變更後，您應該會看到填入的Navigation成為範本的一部分：

    已填入導覽元件

建立子頁面

接著，在AEM中建立其他頁面，做為SPA中的不同檢視。 我們也會檢查AEM所提供JSON模型的階層結構。

  1. 導覽至​ 網站 ​主控台： http://localhost:4502/sites.html/content/wknd-spa-react/us/en/home。 選取​ WKND SPA React首頁，然後按一下​ 建立 > 頁面：

    建立新頁面

  2. 在​ 範本 ​下，選取​ SPA頁面。 在「屬性」下，輸入​ Title ​的​ Page 1 ​和​ page-1 ​作為名稱。

    輸入初始頁面屬性

    按一下「建立」，然後在對話方塊快顯視窗中，按一下「開啟」以在AEM SPA編輯器中開啟頁面。

  3. 將新的​ Text ​元件新增至主要​ 配置容器。 編輯元件並輸入文字： 第1 ​頁（使用RTE和​ H2 ​元素）。

    範例內容頁面1

    您可以隨意新增其他內容，例如影像。

  4. 返回AEM Sites主控台並重複上述步驟，建立名為​ 第2 ​頁的第二個頁面作為​ 第1 ​頁的同層級。

  5. 最後建立第三頁，第3，但做為​ 第2 ​頁的​ 子項。 完成後，網站階層應如下所示：

    範例網站階層

  6. 導覽元件現在可用於導覽至SPA的不同區域。

    導覽及路由

  7. 開啟AEM編輯器外部的頁面： http://localhost:4502/content/wknd-spa-react/us/en/home.html。 使用​ Navigation ​元件導覽至應用程式的不同檢視。

  8. 瀏覽時，請使用瀏覽器的開發人員工具來檢查網路要求。 熒幕擷取畫面如下：Google Chrome瀏覽器。

    觀察網路要求

    請注意，在初始頁面載入後，後續導覽不會造成完整頁面重新整理，而且在返回先前造訪的頁面時，網路流量會降至最低。

階層頁面JSON模型 hierarchy-page-json-model

接下來，檢查推動SPA多檢視體驗的JSON模型。

  1. 在新索引標籤中，開啟AEM提供的JSON模型API： http://localhost:4502/content/wknd-spa-react/us/en.model.json。 使用瀏覽器延伸模組格式化JSON可能會有幫助。

    SPA首次載入時會請求此JSON內容。 外部結構如下所示：

    code language-json 
    {
"language": "en",
"title": "en",
"templateName": "spa-app-template",
"designPath": "/libs/settings/wcm/designs/default",
"cssClassNames": "spa page basicpage",
":type": "wknd-spa-react/components/spa",
":items": {},
":itemsOrder": [],
":hierarchyType": "page",
":path": "/content/wknd-spa-react/us/en",
":children": {
   "/content/wknd-spa-react/us/en/home": {},
   "/content/wknd-spa-react/us/en/home/page-1": {},
   "/content/wknd-spa-react/us/en/home/page-2": {},
   "/content/wknd-spa-react/us/en/home/page-2/page-3": {}
   }
}

    在:children底下，您應該會看到每個已建立頁面的專案。 所有頁面的內容都在此初始JSON請求中。 透過導覽路由，SPA的後續檢視會快速載入，因為內容在使用者端已經可用。

    在初始JSON要求中載入SPA的​ 所有 ​內容是不明智的，因為這會減慢初始頁面載入的速度。 接下來，讓我們檢視如何收集頁面的階層深度。

  2. 瀏覽至​ SPA根 ​範本，網址為： http://localhost:4502/editor.html/conf/wknd-spa-react/settings/wcm/templates/spa-app-template/structure.html。

    按一下​ 頁面屬性功能表 > 頁面原則：

    開啟SPA根目錄的頁面原則

  3. SPA Root ​範本有一個額外的​ 階層結構 ​標籤，可控制所收集的JSON內容。 結構深度 ​決定網站階層中要多深才能收集​ root ​下的子頁面。 您也可以使用​ 結構模式 ​欄位，根據規則運算式篩選出其他頁面。

    將​ 結構深度 ​更新為​ 2：

    更新結構深度

    按一下​ 完成 ​儲存原則的變更。

  4. 重新開啟JSON模型http://localhost:4502/content/wknd-spa-react/us/en.model.json。

    code language-json 
    {
"language": "en",
"title": "en",
"templateName": "spa-app-template",
"designPath": "/libs/settings/wcm/designs/default",
"cssClassNames": "spa page basicpage",
":type": "wknd-spa-react/components/spa",
":items": {},
":itemsOrder": [],
":hierarchyType": "page",
":path": "/content/wknd-spa-react/us/en",
":children": {
   "/content/wknd-spa-react/us/en/home": {},
   "/content/wknd-spa-react/us/en/home/page-1": {},
   "/content/wknd-spa-react/us/en/home/page-2": {}
   }
}

    請注意，頁面3 ​路徑已從初始JSON模型中移除： /content/wknd-spa-react/us/en/home/page-2/page-3。 這是因為​ 頁面3 ​在階層中的層級3，而我們更新原則以僅包含最大深度層級2的內容。

  5. 重新開啟SPA首頁： http://localhost:4502/content/wknd-spa-react/us/en/home.html，然後開啟瀏覽器的開發人員工具。

    重新整理頁面，您應該會看到/content/wknd-spa-react/us/en.model.json (SPA根目錄)的XHR要求。 請注意，根據教學課程中先前進行的階層深度設定，SPA根範本僅包含三個子頁面。 這不包括​ 第3 ​頁。

    初始JSON要求 — SPA根目錄

  6. 在開發人員工具開啟的狀態下，使用Navigation元件直接導覽至​ 第3 ​頁：

    請注意，已向/content/wknd-spa-react/us/en/home/page-2/page-3.model.json提出新的XHR要求

    第3頁XHR要求

    AEM模型管理員瞭解​ 頁面3 JSON內容無法使用，並自動觸發其他XHR請求。

  7. 透過直接導覽至http://localhost:4502/content/wknd-spa-react/us/en/home/page-2.html來嘗試深層連結。 另請注意，瀏覽器的返回按鈕仍會繼續運作。

Inspect React路由 react-routing

已使用React路由器實作導覽及路由。 React Router是React應用程式的導覽元件集合。 AEM React Core Components使用React Router的功能來實施先前步驟中使用的​ 導覽 ​元件。

接下來，檢查React路由器如何與SPA整合，並使用React路由器的連結元件進行實驗。

  1. 在IDE中，在ui.frontend/src/index.js開啟檔案index.js。

    code language-js 
    /* index.js */
import { Router } from 'react-router-dom';
...
...
 ModelManager.initialize().then(pageModel => {
    const history = createBrowserHistory();
    render(
    <Router history={history}>
        <App
        history={history}
        cqChildren={pageModel[Constants.CHILDREN_PROP]}
        cqItems={pageModel[Constants.ITEMS_PROP]}
        cqItemsOrder={pageModel[Constants.ITEMS_ORDER_PROP]}
        cqPath={pageModel[Constants.PATH_PROP]}
        locationPathname={window.location.pathname}
        />
    </Router>,
    document.getElementById('spa-root')
    );
});

    請注意，App已包裝在React路由器的Router元件中。 由AEM SPA編輯器JS SDK提供的ModelManager會根據JSON模型API將動態路由新增至AEM頁面。

  2. 在ui.frontend/src/components/Page/Page.js開啟檔案Page.js

    code language-js 
    class AppPage extends Page {
  get containerProps() {
    let attrs = super.containerProps;
    attrs.className =
      (attrs.className || '') + ' page ' + (this.props.cssClassNames || '');
    return attrs;
  }
}

export default MapTo('wknd-spa-react/components/page')(
  withComponentMappingContext(withRoute(AppPage))
);

    Page SPA元件使用MapTo函式，將AEM中的​ 頁面 ​對應到對應的SPA元件。 withRoute公用程式可協助您根據cqPath屬性，以動態方式將SPA路由到適當的AEM子頁面。

  3. 在ui.frontend/src/components/Header/Header.js開啟Header.js元件。

  4. 更新Header以將<h1>標籤包裝在連結的首頁中：

    code language-diff 
      //Header.js
  import React, {Component} from 'react';
+ import {Link} from 'react-router-dom';
  require('./Header.css');

export default class Header extends Component {

    render() {
        return (
            <header className="Header">
            <div className="Header-container">
+              <Link to="/content/wknd-spa-react/us/en/home.html">
                    <h1>WKND</h1>
+              </Link>
            </div>
            </header>
        );
    }

    我們使用React Router提供的<Link>，而不是使用預設的<a>錨記標籤。 只要to=指向有效的路由，SPA就會切換至該路由，不會 ​執行完整頁面重新整理。 在此處，我們只是將連結硬式編碼至首頁，以說明如何使用Link。

  5. 在App.test.js的ui.frontend/src/App.test.js更新測試。

    code language-diff 
    + import { BrowserRouter as Router } from 'react-router-dom';
  import App from './App';

  it('renders without crashing', () => {
    const div = document.createElement('div');
-   ReactDOM.render(<App />, div);
+   ReactDOM.render(<Router><App /></Router>, div);
  });

    由於我們在App.js中參考的靜態元件中使用React路由器的功能，因此我們需要更新單元測試來說明它。

  6. 開啟終端機、導覽至專案的根目錄，然後使用您的Maven技能將專案部署到AEM：

    code language-shell 
    $ cd aem-guides-wknd-spa.react
$ mvn clean install -PautoInstallSinglePackage

  7. 導覽至AEM中SPA的其中一個頁面： http://localhost:4502/content/wknd-spa-react/us/en/home/page-1.html

    請使用Header中的連結，而不使用Navigation元件來導覽。

    標題連結

    請注意，完整頁面重新整理並​ 未 ​觸發，且SPA路由運作中。

  8. 可選擇使用標準<a>錨點標籤來實驗Header.js檔案：

    code language-js 
    <a href="/content/wknd-spa-react/us/en/home.html">
    <h1>WKND</h1>
</a>

    這可協助說明SPA路由與一般網頁連結之間的差異。

恭喜！ congratulations

恭喜，您已瞭解如何使用SPA編輯器SDK將對應至AEM頁面，以支援SPA中的多個檢視。 已使用React路由器實作動態導覽，並已新增至Header元件。

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4