コンテンツ階層で駆動する動的なナビゲーションについて説明します。このナビゲーションには、ヘッダーのクイック検索コンポーネントが含まれます。複数のテンプレート間での複合コンポーネントとポリシー共有についても説明します。また、HTL テンプレート言語の基本やダイアログも使用します。

前提条件

これは、複数のパートで構成されているチュートリアルの第 5 章です。パート 4 はこちら概要はこちらから確認できます

GitHub で完成済みコードを参照するか、ソリューションパッケージをダウンロードできます。

ダウンロード

コンテンツ階層

AEM 実装では、コンテンツ階層を計画することが重要です。コンテンツ階層は、コンテンツを整理する際の主なメカニズムです。サイトナビゲーションはコンテンツ階層の影響を大きく受けることが多く、考え抜かれた階層はアプリケーションを簡素化できます。また、コンテンツ階層を計画する際には、権限や複数の言語のサポートも大きな役割を果たします。 

架空の WKND サイトは、何をすべきかについての記事が複数のカテゴリに分かれたライフスタイルに関するサイトです。この組織を反映するコンテンツ階層を作成します。ナビゲーションは、コンテンツ階層に基づいて動的に設定されます。また、将来的に AEM 翻訳機能を使用できるよう、言語ルートを使用してサイトを設定することもできます。

上位レベル階層
WKND サイト構造の上位レベル階層。

サイト階層の更新

 ナビゲーション機能を適切に表示するには、サイト階層をうまく設定する必要があります。構造の大部分を提供するために、ランディングページテンプレートを使用します。

  1. screen_shot_2018-02-07at44228pm

    サイト構造の更新

    ナビゲーションコンポーネントの機能はサイト階層に依存しています。動作していることを確認するために、これらをあらかじめコンテンツ階層から抜いておきます。ランディングテンプレートを使用して、次の一連のページを作成します。

    /WKND (wknd)
         /Home (en)
             /Restaurant (restaurant)
             /Bars (bars)
             /Sports (sports)
             /Art (art)
             /Music (music)
             /Shopping (shopping)
    

    記事テンプレートを使用するカテゴリのいずれかの下に新しいページを追加します。最終的に、次のような構成になります。

    2018-11-16_at_8_44am

Core コンポーネントには、ヘッダーやフッターの作成に活用するナビゲーションコンポーネントが含まれています。ナビゲーションコンポーネントは、サイト構造に基づいてナビゲーションを作成します。このコンポーネントはプロジェクトに合わせて既にプロキシ化されています。デザインに合わせてスタイルをいくつか追加します。

ナビゲーションの BEM 表記:

BLOCK cmp-navigation
    ELEMENT cmp-navigation__group
    ELEMENT cmp-navigation__item
        MOD cmp-navigation__item--active
        MOD cmp-navigation__item--level-*
    ELEMENT cmp-navigation__item-link

ナビゲーションは 2 つの方法(ヘッダー用とフッター用)で実装されます。構造を提供する追加レイアウトコンテナを使用して、最初にフッターナビゲーションが実装されます。

ui.apps モジュールが更新されます。

  1. ナビゲーションコンポーネントを構造に移動させる

    ナビゲーションコンポーネントは AEM プロジェクトアーキタイプによって /apps/wknd/components/content の下に作成されています。このコンポーネントは、このプロジェクト用の構造的なコンポーネントに過ぎません。

    1. /apps/wknd/components/content から /apps/wknd/components/structure へナビゲーションコンポーネントを移動させます。
    2. componentGroup を更新して WKND.Structure にします。
    apr-06-2018_18-27-28
    2018-04-09_at_1034am
  2. レイアウトコンテナのフッタースタイルを作成する

    フッターのナビゲーション用コンテナとして動作する新しいレイアウトコンテナを作成します。

    /apps/wknd/clientlibs/clientlib-site/components/layout-container の下で、次の手順をおこないます。

    1. styles フォルダーで、次の手順をおこないます。
    2. footer.less という名前のスタイルの下に新しいファイルを作成します。
    screen_shot_2018-02-07at50719pm
  3. 以下のように footer.less を設定する

    /* WKND Layout Container Footer Style */
     
    @footer-background-color: #000;
    @footer-text-color: #fff;
     
     
    .cmp-layout-container--footer {
        background: @footer-background-color;
        min-height: 365px;
        margin-top: 3em;
        padding: 0 3em;
        
        >.aem-Grid {
            .container-content();
        }
         
        @media (max-width: @screen-medium) {
                min-height:267px; 
        }
         
        p {
               color: @footer-text-color;
               font-size: @font-size-xsmall;
               text-align:center;
           }        
    }

    これにより、CSS クラス cmp-layout-container--footer がレイアウトコンテナに追加されると、コンテナ用に黒色の背景と白色のテキストが作成されます。

  4. 以下を使用して layout-container.less を更新する

    /* WKND Layout Container Styles */
    
    @import "styles/fixed-width.less";
    @import "styles/footer.less";
    
  5. ナビゲーションのフッタースタイルを作成する

    ナビゲーションコンポーネントのフッタースタイルを作成します。

    /apps/wknd/clientlibs/clientlib-site/components の下で、次の手順をおこないます。

    1. navigation という名前の新しいフォルダーを作成します。
    2. navigation フォルダーの下に、navigation.less という名前の新しいファイルを作成します。
    3. navigation フォルダーの下に、styles という名前の新しいフォルダーを作成します。
    4. styles フォルダーの下に nav-footer.less という名前の新しいファイルを作成します。
    screen_shot_2018-02-07at60704pm
  6. 以下のように nav-footer.less を設定する

    /* WKND Navigation Footer Style */
    
    @footer-color: #fff;
    
    
    .cmp-navigation--footer {
         
          .cmp-navigation {
            width: 100%;
            text-align: center;
            float: left;
            margin-top: 3em;
             
            .cmp-navigation__group {
                 
                margin-top:2em;
                margin-left:2em;
                margin-right: 2em;
             
              .cmp-navigation__item {
                 
                float:left;
                display: block;
                 
                .cmp-navigation__item-link {
                    font-size: @font-size-xsmall;
                    text-transform: uppercase;
                    color: @footer-color;
                    height:6em;
                    width: 10em;
                    text-align: center;
                    text-decoration: none;
                    padding-top: 4em;
                    float:left;
                     
                    &:hover,
                    &:focus {
                        background-color: @brand-primary;
                        color: @text-color;
                    }
                 
                     
                }
                 
            }
             
            li.cmp-navigation__item--active .cmp-navigation__item-link {
                background-color: rgba(255, 233, 0, 0.4);
                color: @brand-primary;
            }
         
             @media (max-width: @screen-medium) {
                margin-top: 2em;    
            }
        }
         
        } 
             
    }
  7. 以下を使用して navigation.less を設定する

    /* WKND navigation styles */
    
    @import (once) "styles/nav-footer.less";
  8. /apps/wknd/clientlibs/clientlib-site の下の main.less を更新してナビゲーションスタイルを含めるようにします。

    /* main.less */
    
    ...
    
    /* Component Styles */
    @import "components/breadcrumb/breadcrumb.less";
    @import "components/contentfragment/contentfragment.less";
    @import "components/header/header.less";
    @import "components/image/image.less";
    @import "components/layout-container/layout-container.less";
    @import "components/list/list.less";
    /* import navigation.less */
    @import "components/navigation/navigation.less";
    @import "components/text/text.less";
    @import "components/title/title.less";
  9. コードを AEM にデプロイする

次に、記事とランディングページのテンプレートでフッターを設定します。

  1. 記事テンプレートでフッターレイアウトコンテナを作成する

    1. 記事テンプレート(http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page-template/structure.html)に移動します。
    2. 新しいレイアウトコンテナを、最後のレイアウトコンテナとなるようドラッグします(ヘルプが必要な場合は、固定幅コンテナの外側にあるコンポーネントツリーを使用します)。
    2018-11-16_at_9_04am
  2. フッターレイアウトコンテナポリシーを作成する

    1. ポリシーアイコンをクリックしてフッターレイアウトコンテナ用の新しいポリシーを作成します。
    2. ポリシータイトル = WKND フッター
    3. 許可されているコンポーネント = WKND.Content および WKND.Structure チェックボックスをオンにする
    4. スタイル > デフォルトの CSS クラス = cmp-layout-container--footer

     ポリシーを保存した後、レイアウトコンテナは全幅となり、背景は黒色になります。

    screen_shot_2018-02-07at62710pm
  3. フッター用のナビゲーションコンポーネントを作成する

    1. フッターレイアウトコンテナにナビゲーションコンポーネントを追加します。
    2. 以下を使用してナビゲーションコンポーネント用のポリシーを設定します。
    3. ポリシータイトルWKND ナビゲーション - フッター
    4. ナビゲーションルート = /content/wknd/en
    5. ナビゲーションルートを除外チェックボックスをオンにします。
    6. すべての子ページを収集チェックボックスをオフにします。
      1. ナビゲーション = 1
    7. スタイル > デフォルトの CSS クラスcmp-navigation--footer
    footer-navpolicy
    2018-11-16_at_1029am
  4. ランディングテンプレートを使用して上記の手順を繰り返します(http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/landing-page-template/structure.html)。

    WKND フッターおよび WKND ナビゲーション - フッターポリシーをそれぞれのコンポーネントで再使用できる必要があります。

    コンテンツページのいずれかを確認します。すべてのコンポーネントページでフッターナビゲーションが設定されたことがわかります。

    screen_shot_2018-02-07at65417pm

ヘッダーコンポーネント

ヘッダーコンポーネントには、ナビゲーション、検索およびホーム/ロゴリンクが含まれます。レイアウトコンテナを作成し、フッターと同じアプローチをおこないます。ただし、すべてのコンポーネントのサイズを変更して整列させようとすると、作成者にとって非常に複雑な作業になる可能性があります。

代わりに、「複合」コンポーネントを作成します。ヘッダーコンポーネントはこの中にナビゲーションコンポーネントとクイック検索コンポーネントを埋め込みます。ヘッダーコンポーネントをページにドラッグすると、他の 2 つのコンポーネントも移動します。

ヘッダーコンポーネント
ナビゲーションコンポーネントとクイック検索コンポーネントが埋め込まれたヘッダーコンポーネント
  1. 検索コンポーネントを構造に移動させる

    検索コンポーネントは AEM プロジェクトアーキタイプによって /apps/wknd/components/content の下に作成されています。このプロジェクトの構造的なコンポーネントであり、複合コンポーネントに埋め込まれます。

    1. 検索コンポーネントを /apps/wknd/components/content から /apps/wknd/components/structure へ移動させます。
    2. componentGroup を更新して WKND.Structure にします。
    apr-09-2018_11-00-44
    2018-04-09_at_1102am
  2. ヘッダーダイアログを更新する

    ダイアログ(スパナアイコン)は、作成者がコンテンツを変更するために使用します。ここまで、core コンポーネントのスタイルを設定しており、定義済みのダイアログに依存しています。このダイアログでは、ユーザーは WKND ロゴとリンクさせるようルートパスを設定することができます。

    1. /apps/wknd/components/structure/header の下で、cq:dialog を編集します。
    2. xml を直接編集する方法が最も簡単なので、aem-guides-wkind.ui.apps/src/main/content/jcr_root/apps/wknd/components/structure/header/_cq_dialog/.content.xml を開きます。
    dialog-header
    <?xml version="1.0" encoding="UTF-8"?>
    <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
        jcr:primaryType="nt:unstructured"
        jcr:title="Header"
        sling:resourceType="cq/gui/components/authoring/dialog">
        <content
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/container">
            <items jcr:primaryType="nt:unstructured">
                <tabs
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/tabs"
                    maximized="{Boolean}true">
                    <items jcr:primaryType="nt:unstructured">
                        <header
                            jcr:primaryType="nt:unstructured"
                            jcr:title="Header Settings"
                            sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                            margin="{Boolean}true">
                            <items jcr:primaryType="nt:unstructured">
                                <column
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/container">
                                    <items jcr:primaryType="nt:unstructured">
                                        <rootpath
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
                                            fieldDescription="Populate the link of the WKND logo"
                                            fieldLabel="Root Path"
                                            name="./rootPath"
                                            rootPath="/content/wknd"/>
                                    </items>
                                </column>
                            </items>
                        </header>
                    </items>
                </tabs>
            </items>
        </content>
    </jcr:root>
  3. ヘッダーデザインダイアログ(ポリシー)を更新する

    デザインダイアログを使用すると、ユーザーはコンポーネントのポリシーを更新できます。ポリシーはテンプレート間で適用できるので、テンプレート間で再使用される構造的なコンポーネントを操作する場合には、ポリシーを使用すると便利です。

    ヘッダーデザインダイアログを作成すると、ユーザーはポリシー経由でルートパスを WKND ロゴにリンクさせるよう設定できます。

    1. /apps/wknd/components/structure/header の下で、名前が cq:design_dialog 、タイプが nt:unstructured の新しいノードを作成します。
    2. xml を直接編集する方法が最も簡単なので、/wknd-sites-guide.ui.apps/src/main/content/jcr_root/apps/wknd/components/structure/header/_cq_design_dialog/.content.xml を開きます。
    design_dialog-header
    <?xml version="1.0" encoding="UTF-8"?>
    <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
        jcr:primaryType="nt:unstructured"
        jcr:title="Navigation"
        sling:resourceType="cq/gui/components/authoring/dialog">
        <content
            granite:class="cmp-navigation__editor"
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/container">
            <items jcr:primaryType="nt:unstructured">
                <tabs
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/tabs"
                    maximized="{Boolean}true">
                    <items jcr:primaryType="nt:unstructured">
                        <properties
                            jcr:primaryType="nt:unstructured"
                            jcr:title="Properties"
                            sling:resourceType="granite/ui/components/coral/foundation/container"
                            margin="{Boolean}true">
                            <items jcr:primaryType="nt:unstructured">
                               <rootpath
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
                                    fieldDescription="Populate the link of the WKND logo"
                                    fieldLabel="Root Path"
                                    name="./rootPath"
                                    rootPath="/content/wknd"/>
                            </items>
                        </properties>
                        <styletab
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/include"
                            path="/mnt/overlay/cq/gui/components/authoring/dialog/style/tab_design/styletab"/>
                    </items>
                </tabs>
            </items>
        </content>
    </jcr:root>

    XML で、<rootpath /> ノード(属性 name="./rootPath")を書き留めます。これは、作成者セクションが作られるプロパティの名前となります。

    <styletab> ノードと、パス /mnt/overlay/cq/gui/components/authoring/dialog/style/tab_design/styletab を書き留めます。これには、ヘッダーコンポーネントがスタイルシステムを活用できるようにする「スタイル」タブが含まれます。

  4. header.html script を更新してナビゲーションコンポーネントや検索コンポーネントを含める

    1. /apps/wknd/components/structure/header/header.html を更新します。
    <!--/* Header Component for WKND Site 
     
    */-->
     
    <header class="wknd-header">
    	<div class="container">
    		<a class="wknd-header-logo" href="${properties.rootPath || currentStyle.rootPath @ extension='html'}">WKND</a>
        	<div class="cmp-search--header" data-sly-resource="${'search' @ resourceType='wknd/components/structure/search'}"></div>
        	<div class="cmp-navigation--header" id="header-navbar" data-sly-resource="${'navigation' @ resourceType='wknd/components/structure/navigation'}"></div>	
    	</div>
    </header>

    スニペット ${properties.rootPath || currentStyle.rootPath @ extension='html'}

    ダイアログまたはデザインダイアログから、作成者が選択したパスを挿入します。最初に rootPath のプロパティ値が存在するか(ダイアログ)を確認した後、フォールバックして currentStyle で rootPath の値を確認します(デザインダイアログ)。

    propertiescurrentStyle は両方とも、すべてのコンポーネント HTL スクリプトで利用可能な Global Objects です。

    スニペット data-sly-resource="${'search' @ resourceType='wknd/components/structure/search'}" には検索コンポーネントが含まれ、search という名前のヘッダーの下でリソースとしてこれを検索します。

    ナビゲーションコンポーネントも同じ方法( data-sly-resource="${'navigation' @ resourceType='wknd/components/structure/navigation'}")で含められます。

    これは HTL ブロックステートメントの例です。詳細はこちらを参照してください。

  5. cq:template を追加する

    複合コンポーネントを作成する場合は常に、JCR で埋め込みコンポーネントまたはサブコンポーネントに実際の nodes/resources が作成されるよう、cq:template を作成するのがベストプラクティスです。サブコンポーネントにマッピングする間違ったコードがあった場合、保存するとダイアログやポリシーで異常な動作が発生する可能性があります。

    /apps/wknd/components/structure/header の下で、
    1. 名前が cq:template、タイプが nt:unstructured の新しいノードを作成します。
    2. 編集を容易におこなうために、.content.xml を開きます。
    cq-template-header
    <?xml version="1.0" encoding="UTF-8"?>
    <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
        jcr:primaryType="nt:unstructured">
        <navigation
            jcr:primaryType="nt:unstructured"
            sling:resourceType="wknd/components/structure/navigation"/>
        <search
            jcr:primaryType="nt:unstructured"
            sling:resourceType="wknd/components/structure/search"/>
    </jcr:root>

    /aem-guides-wknd.ui.apps/src/main/content/jcr_root/apps/wknd/components/structure/header/_cq_template/.content.xml

    上記のスニペットと置き換えます。これにより、ヘッダーコンポーネントが追加されたら navigation および search 用にノードが作成されるようにします。

  6. ヘッダーでナビゲーション用の新しいスタイルを追加する

    次に、ヘッダーでナビゲーションコンポーネント用に新しいスタイルを追加します。

    /apps/wknd/clientlibs/clientlib-site/components/navigation/styles の下で、次の手順をおこないます。

    1. nav-header.less という名前の新しいファイルを作成します。
    2. 以下のように記述します。
    /* WKND Navigation Header styles */
     
    @mobile-nav-bg-color: #000;
    @mobile-nav-link-color: #fff;
         
    .cmp-navigation--header {
         
        float:right;
        padding-top: .25em;
        min-width: 100px;
        margin-right: 0.25em;
        margin-left: 0.25em;
         
        .cmp-navigation {
            float:right;
             
            .cmp-navigation__group {
                list-style: none;
                margin:0; 
            }
             
            .cmp-navigation__item {
                display: block;
                float: left;
            }
             
            .cmp-navigation__item-link {
                color: @text-color;
                font-size: @font-size-medium;
                text-transform: uppercase;
                font-weight: bolder;
                padding: 15px 17px;
                text-decoration: none;
                 
                &:hover,
                  &:focus {
                    background-color: @brand-primary;
                  }
            }
             
            .cmp-navigation__item--active .cmp-navigation__item-link {
                background-color: @brand-primary;
            }
        }
         
        @media (max-width: @screen-medium) {
             
            display:none;
        }    
    }

    nav-header.less ファイルを含めるよう /apps/wknd/clientlibs/clientlib-site/components/navigation/navigation.less を更新します。

    /* WKND navigation styles */
    
    @import (once) "styles/nav-footer.less";
    @import (once) "styles/nav-header.less";
  7. ヘッダーで検索用の新しいスタイルを追加する

    次に、ヘッダーで検索コンポーネント用の新しいスタイルを追加します。

    /apps/wknd/clientlibs/clientlib-site/components の下で、次の手順をおこないます。

    1. search という名前の新しいファイルを作成します。
    2. search フォルダーの下に、search.less という名前の新しいファイルを作成します。
    3. search フォルダーの下に、styles という名前の新しいフォルダーを作成します。
    4. styles フォルダーの下に、search-header.less という名前の新しいファイルを作成します。
    2018-11-16_at_1222pm
  8. 以下のように search-header.less を設定します。

    /* WKND Search Header styles */
     
    @search-width: 165px;
    @search-width-expand: 265px;
    
    @search-width-mobile: @search-width /2;
    @search-width-mobile-expand: @search-width;
    
    .cmp-search--header {
        float: right;
        margin-right: -12px;
        padding-right: @gutter-padding;
     
        .cmp-search {
             
            &__form {
             
            .cmp-search__icon {
                top: 0.7rem;
            }
             
            .cmp-search__clear-icon {
                top: 0.7rem;
            }
                 
            .cmp-search__input {
                background-color: #ebebeb8a;
                color:@text-color;
                font-size: @font-size-medium;
                border-radius: 0px;
                border:none;
                height:40px;
                width:@search-width;
                padding-right: 2rem;
                padding-left: 1.8rem;
                transition: ease-in-out, width .35s ease-in-out;
    
                &:focus {
                    background-color: @body-bg;
                    outline: none !important;
                    border:1px solid @text-color;
                    box-shadow: none;
                    width: @search-width-expand;
                }
                     
                &::placeholder { 
                    text-transform: uppercase;    
                    }
    
                    @media (max-width: @screen-small) {
                        width: @search-width-mobile;
                        &:focus {
                            width: @search-width-mobile-expand;
                             }
                    }
                    
                     
                }
                 
             
        }
             
            .cmp-search__results {
                margin-top: 0.5em;
                background: @gray-dark;
                 
                a.cmp-search__item {
                    color: @brand-third;
                    font-size: @font-size-small;
                    height: 50px;
                    text-overflow: ellipsis;
                    padding: 0.5em;
                    margin-top:0.25em;
                }
                 
                a.cmp-search__item:hover {
                    text-decoration:none;
                    background: @gray-base;
                }
                 
                .cmp-search__item-mark {
                    background: @gray-base;
                    color: @brand-third;
                }    
              }    
            }
             
             @media (max-width: @screen-medium) {
                 .cmp-search__input {
                   height:50px;
                 }
            }
             
            @media (max-width: @screen-small) {
                margin-right: 1em;
                position: absolute;
                right: 0;
                z-index: 100;
                margin-top: 0.25em;
                 
            }    
    }
  9. search-header.less ファイルを含めるよう /apps/wknd/clientlibs/clientlib-site/components/search/search.less を設定します。

    /* WKND Search styles */
    
    @import (once) "styles/search-header.less";
  10. /apps/wknd/clientlibs/clientlib-site の下の main.less を更新して検索スタイルを含めるようにします。

    /* main.less */
    ...
    
    /* Component Styles */
    @import "components/breadcrumb/breadcrumb.less";
    @import "components/contentfragment/contentfragment.less";
    @import "components/header/header.less";
    @import "components/image/image.less";
    @import "components/layout-container/layout-container.less";
    @import "components/list/list.less";
    @import "components/navigation/navigation.less";
    /* import search styles */
    @import "components/search/search.less";
    @import "components/text/text.less";
    @import "components/title/title.less";
  11. コードを AEM にデプロイする

ヘッダーの設定

ヘッダー、ナビゲーション、および検索コンポーネント用の更新済みコードを AEM にデプロイした後、テンプレートの一部としてヘッダーコンポーネントを設定します。

http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page-template/structure.html で、navigation および search を含むヘッダーコンポーネントが表示されているはずです。

ただし、コンポーネントを設定するには、その前に削除してから再度追加する必要があります。これは、ヘッダーコンポーネントは「複合」コンポーネントとなり、navigation コンポーネントと search コンポーネントが埋め込まれているためです。正常に機能させるためには、search ノードと navigation ノードをテンプレート構造に追加する必要があります。以前設定した cq:template は、適切なノード構造が作成されるようにします。 

ヘッダー設定の大まかな手順:

  1. CRXDE-Lite で記事ページテンプレートとランディングページテンプレートからヘッダーノードを削除します。
  2. 記事ページテンプレートにヘッダーコンポーネントを再度追加します。
  3. ヘッダーコンポーネントでナビゲーションコンポーネントを設定します。
  4. ヘッダーコンポーネントで検索コンポーネントを設定します。
  5. ランディングページテンプレートで手順 2~4 を繰り返し、ナビゲーションおよび検索ポリシーを再使用します。

以下のビデオでは、これらの大まかな手順を説明します。


モバイルナビゲーション

この時点では、AEM スタイルシステムを使用し、core コンポーネントで作成された既存のマークアップのスタイルを設定します。LESS および CSS はコンポーネントの表示を変える非常に強力なツールですが、要件によっては制限があります。また、読み込んだ後で core コンポーネントのマークアップを操作するために、JavaScript を使用することもできます。このようにすると、コンポーネントのマークアップの目的を変更して別の方法で使用することができますが、バックエンドコードを変更する必要はありません。

モバイルナビゲーションの場合は、左側からナビゲーションがポップアウトし、ページの本文を画面から「押し出す」のが理想的です。ヘッダーコンポーネントのナビゲーションの位置はネストされているので、CSS 単体でこのビヘイビアーを実現することはできません。代わりに、短い Javascript を使用してヘッダーナビゲーションマークアップのコピーを作成し、本文タグに追加します。これにより、モバイルナビゲーションの視覚効果を作成できるようになります。

clone-navigationv2
JavaScript を使用してヘッダーのナビゲーションアイテムのクローンを、モバイルナビゲーション(HTML 本文に追加される)へ作成します。この処理は、ページが読み込まれたときやヘッダーコンポーネントがページに追加されたときに発生します。
  1. モバイルナビゲーションに新しいスタイルを追加する

    /apps/wknd/clientlibs/clientlib-site/components/navigation/styles の下で、次の手順をおこないます。

    1. nav-mobile.less という名前の新しいファイルを作成します。
    2. 以下のように記述します。
    /* WKND Navigation - Mobile */
    
    @nav-item-mobile-top-level-color: #fff;
    @nav-item-mobile-hover-color: @brand-primary;
    @nav-item-mobile-text-color: #888;
    @nav-item-mobile-border : solid 1px rgba(255, 255, 255, 0.05);
     
    .cmp-navigation--mobile {
         
      .cmp-navigation__group {
          list-style: none;
          display: inline-block;
          margin: 0;
          padding: 0;
      }
     
      .cmp-navigation__item {
          display: inline-block;
          float: left;
          width: 100%;
      }
     
      .cmp-navigation__item-link {
        display: block;
        color: @nav-item-mobile-text-color;
        text-decoration: none;
        height: 44px;
        line-height: 44px;
        border-top: @nav-item-mobile-border;
        padding: 0 1em 0 1em;
         
        &:hover {
            color: @nav-item-mobile-hover-color;
        }
      }
     
      .cmp-navigation__item--level-0, .cmp-navigation__item--level-1 {
       
              > .cmp-navigation__item-link {
                  color: @nav-item-mobile-top-level-color;
                   
                  &:hover {
                      color: @nav-item-mobile-hover-color;
                  }
              }
        }
         
        .cmp-navigation__item--level-2 {
            padding-left: 2em;
        }
         
        .cmp-navigation__item--level-3 {
            padding-left: 4em;
        }
    }
     
     
         #mobileNav, #toggleNav {
            display: none;
        }
         
        /*Styles to push mobile nav into view */
         
        @media (max-width: @screen-medium) {
         
        .root.responsivegrid {
                    -moz-backface-visibility: hidden;
                    -webkit-backface-visibility: hidden;
                    -ms-backface-visibility: hidden;
                    backface-visibility: hidden;
                    -moz-transition: -moz-transform 0.5s ease;
                    -webkit-transition: -webkit-transform 0.5s ease;
                    -ms-transition: -ms-transform 0.5s ease;
                    transition: transform 0.5s ease;
                    padding-bottom: 1px;
        }
         
        #toggleNav {
                    -moz-backface-visibility: hidden;
                    -webkit-backface-visibility: hidden;
                    -ms-backface-visibility: hidden;
                    backface-visibility: hidden;
                    -moz-transition: -moz-transform 0.5s ease;
                    -webkit-transition: -webkit-transform 0.5s ease;
                    -ms-transition: -ms-transform 0.5s ease;
                    transition: transform 0.5s ease;
                    display: block;
                    height: 44px;
                    left: 0;
                    position: fixed;
                    top: 6px;
                    width: 40px;
                    z-index: 10001;
                    border-top-right-radius: 2px;
                    border-bottom-right-radius: 2px;
                }
                .scrolly {
                    #toggleNav {
                        background: #edededa8;
                    }
                }
     
                    #toggleNav .toggle {
                        width: 80px;
                        height: 60px;
                        font-size: 40px;
                        color: @text-color;
                         
                        &:hover {
                            text-decoration:none;
                            color: @text-color;
                        }
                         
                    }
     
                #mobileNav {
                    -moz-backface-visibility: hidden;
                    -webkit-backface-visibility: hidden;
                    -ms-backface-visibility: hidden;
                    backface-visibility: hidden;
                    -moz-transform: translateX(-275px);
                    -webkit-transform: translateX(-275px);
                    -ms-transform: translateX(-275px);
                    transform: translateX(-275px);
                    -moz-transition: -moz-transform 0.5s ease;
                    -webkit-transition: -webkit-transform 0.5s ease;
                    -ms-transition: -ms-transform 0.5s ease;
                    transition: transform 0.5s ease;
                    display: block;
                    height: 100%;
                    left: 0;
                    overflow-y: auto;
                    position: fixed;
                    top: 0;
                    width: 275px;
                    z-index: 10002;
                    color: #858484;
                    background: #000;
                    box-shadow: inset -3px 0px 5px 0px rgba(0, 0, 0, 0.35);
                }
                 
                 
                body.navPanel-visible {
                    overflow-x: hidden;
                     
                    .root.responsivegrid {
                        -moz-transform: translateX(290px);
                        -webkit-transform: translateX(290px);
                        -ms-transform: translateX(290px);
                        transform: translateX(290px);
                    }
                     
                     #toggleNav {
                        -moz-transform: translateX(275px);
                        -webkit-transform: translateX(275px);
                        -ms-transform: translateX(275px);
                        transform: translateX(275px);
                    }
                     
                    #mobileNav {
                        -moz-transform: translateX(0);
                        -webkit-transform: translateX(0);
                        -ms-transform: translateX(0);
                        transform: translateX(0);
                    }
                     
            }    
        }

    モバイルナビゲーションの範囲はcmp-navigation--mobile クラスで設定されます。モバイルナビゲーションの開閉動作には、複数の CSS 変形ルールが使用されています。

    最後に、/apps/wknd/clientlibs/clientlib-site/components/navigation/navigation.less を更新し、nav-mobile.less ファイルが含まれるようにします。

    /* WKND navigation styles */
    
    @import "styles/nav-footer.less";
    @import "styles/nav-header.less";
    @import "styles/nav-mobile.less";
  2. モバイルナビゲーション用の JavaScript を作成する

     /apps/wknd/clientlibs/clientlib-site/components/navigation の下で、次の手順をおこないます。

    1. navigation.js という名前の新しいファイルを作成します。
    2. 以下のように記述します。
    // Wrap bindings in anonymous namespace to prevent collisions
    jQuery(function($) {
        "use strict";
    
     function applyComponentStyles() {
    
      //Top Level Navigation (expected to only be one of these)
      $("#header-navbar .cmp-navigation").not("[data-top-nav-processed='true']").each(function() {
                // Mark the component element as processed to avoid the cyclic processing (see .not(..) above).
                var nav = $(this).attr("data-top-nav-processed", true),
                    $body = $('body');
                
                // Toggle Nav
                $('<div id="toggleNav">' +
                     '<a href="#mobileNav" class="toggle"><i class="wkndicon wkndicon-ico-bm" aria-hidden="true"></i></a>' +
                    '</div>'
                ).appendTo($body);
                
             // Navigation Panel.
                $(
                    '<div id="mobileNav" class="cmp-navigation--mobile">' +
                        '<nav class="cmp-navigation">' +
                            $(this).html() +
                        '</nav>' +
                    '</div>'
                )
                    .appendTo($body)
                    .panel({
                        delay: 500,
                        hideOnClick: true,
                        hideOnSwipe: true,
                        resetScroll: true,
                        resetForms: true,
                        side: 'left',
                        target: $body,
                        visibleClass: 'navPanel-visible'
                    });
            });
        }
    
      applyComponentStyles();
      
      $(".responsivegrid").bind("DOMNodeInserted", applyComponentStyles);
    });

    上記のコードは、responsivegrid が DOM に追加されたときに呼び出されます。最初の jQuery セレクターはヘッダーでナビゲーションを探します。ナビゲーションの数は 1 つであることが想定されます。AEM エディター経由でコンポーネントが追加された場合に備え、処理の重複を防ぐ大まかなチェックがおこなわれます。

    次に、アンカータグが本文に追加されます。ユーザーはこれをクリックすることでモバイルナビゲーションを切り替えます。その後、ヘッダーナビゲーションは ID が mobileNav、クラスが cmp-navigation--mobile の新しい div にコピーされます。これはモバイルナビゲーションであり、本文に追加されます。

    最後に、モバイルナビゲーションの表示を切り替えるパネル機能が追加されます。このパネルの機能はサードパーティのユーティリティファイルで定義されます。

  3. サードパーティ util.js を追加する

    次に、https://html5up.net/ から変更されたサードパーティ javascript ファイルを追加し、モバイルナビゲーションでのクリックおよびスワイプに対応できるようにします。

    /apps/wknd/clientlibs/clientlib-site の下で、次の手順をおこないます。

    1. js という名前の新しいフォルダーを作成します。
    2. js フォルダーの下に、util.js という名前の新しいファイルを作成します。
    3. 次の util.js を使用して設定します
      (コードスニペットが非常に長くなるので、GitHub へのリンクを含めています)。
    2018-11-16_at_5_28pm
  4. js.txt を更新して新しい javascript ファイルを含める

    1. /apps/wknd/clientlibs/clientlib-site/js.txt を更新し、navigation.js および util.js ファイルを含めます。
    #base=.
    
    js/util.js
    components/page/page.js
    components/navigation/navigation.js
    
  5. コードを AEM にデプロイする

  6. 最後の設定とまとめは次のビデオでご覧いただけます。

まとめ


ヘルプ

行き詰まったり、追加の質問がある場合は、AEM 用 Experience League フォーラムを確認するか、既存の GitHub の問題を参照してください。

探していた情報が見つからなかった場合やエラーが見つかった場合は、WKND プロジェクトの問題として GitHub で報告してください。

次の手順

チュートリアルの次のパート:

ダウンロード