AEM Sites の概要(第 4 章)- スタイルシステムを使用した開発

スタイルシステムによる、ブランド独自の CSS を使用したコアコンポーネントの拡張、およびテンプレートエディターの高度なポリシー設定について説明します。長文形式の記事テキストを作成するために、コンテンツフラグメントも統合されます。

前提条件

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

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

ダウンロード

記事テンプレートの準備

この章では、スタイルシステム機能および編集可能テンプレートを使用して、記事テンプレートの統一された外観と操作性を創出します。まず、記事内で AEM コンポーネントにマッピングされるモックアップ領域を特定します。

パンくず

  • 設定可能な開始レベル
  • ナビゲーション項目を表示および非表示にするオプション
  • 現在のページをパンくずから除外

コンテンツフラグメント

  • 記事テキスト(コピー)をページから独立して作成および管理可能
  • チャネル間で再利用することで、様々なバリエーションを創出

画像

  • 最適なレンディションをロードする高度な機能
  • インプレースによる編集、切り抜き、およびサイズ変更
  • 画像タイトル、説明、アクセシビリティ用テキスト、およびリンク

リスト

  • 複数のソース:
    • 子ページを一覧表示
    • タグ付き項目を一覧表示
    • クエリ結果を一覧表示
    • 静的項目を一覧表示
  • 順序、ページネーション、および最大数
  • スタイル

テキスト

  • インプレース編集
  • リッチテキストのオーサリング

タイトル

  • インプレース編集
  • ページタイトルでテキストを上書きするオプションを使用

上記のすべての機能はコアコンポーネントにより提供されます。モックアップに合わせてコンポーネントをスタイリングすることを中心に説明します。

スタイルシステム

開発者およびテンプレート編集者は、スタイルシステムを使用して、コンポーネントの複数の視覚的バリエーションを作成できます。次に、作成者はページを構成する際に、どのスタイルを使用するかを決めることができます。以降のすべてのチュートリアルでは、ローコードの手法でコアコンポーネントを使用しながら、スタイルシステムを使用して、いくつかの独自のスタイルを創出していきます。

スタイルシステムの基本的な考え方は、コンポーネントがどのように表示されるかについて、作成者が様々なスタイルを選択できるようにすることです。「スタイル」は、コンポーネントの外側の div に取り込まれた追加の CSS クラスに基づき実現されます。これらのスタイルクラスに基づき、CSS ルールがクライアントライブラリに追加され、コンポーネントの表示が変更されます。

スタイルシステムに関する詳細なドキュメンテーションについては、こちらで参照できます。スタイルシステムの使用に関する概要のビデオもご覧いただけます。

タイトルコンポーネント

ここで、タイトルコンポーネントは、/apps/wknd/components/content/title の下のプロジェクトでプロキシ化されています。タイトルコンポーネントのスタイルを clientlib-site ライブラリ /apps/wknd/clientlibs/clientlib-site/components に追加します。

モックアップには、タイトルコンポーネント用の独自の下線付きスタイルが含まれています。スタイルシステムを使用すれば、2 つのコンポーネントを作成したり、コンポーネントダイアログを修正せずに、下線付きスタイルを追加できます。

注意:

ベストプラクティスとしては、スタイルをターゲットコンポーネントで使用する範囲に収めることが推奨されます。これにより、ページの他の領域が余分なスタイルの影響を受けることを回避できます。

すべてのコアコンポーネントは、BEM 記法に準拠しています。ベストプラクティスとしては、コンポーネントのデフォルトスタイルを作成する際は、外部の CSS クラスを指定することが推奨されます。また、HTML 要素ではなく、コアコンポーネントの BEM 記法で指定されたクラス名を指定することが推奨されます。

タイトルコンポーネントの BEM 記法

BLOCK cmp-title
    ELEMENT cmp-title__text
  1. 前章では、タイトルコンポーネント用にいくつかのデフォルトスタイルを読み込みました。現在、/apps/wknd/clientlibs/clientlib-site/components/title の下の ui.apps モジュールの  default.less によって、デフォルトスタイルが定義されています。

    /* WKND Title Default style */ 
      
    .cmp-title { 
          
        h1, h2, h3, h4 { 
            font-family: @font-family-serif; 
        } 
     
        h1 { 
            font-size: 48px; 
     
            @media (max-width: @screen-medium) { 
                font-size: @font-size-h1; 
            } 
        } 
         
    }
  2. 前の手順のフォルダー内の styles フォルダーの下に underline.less という名前のファイルを作成します。/apps/wknd/clientlibs/clientlib-site/components/title/styles/underline.less

    次のコードを追加します。

    /* WKND Title Underline style */
    
    .cmp-title--underline {
     
     .cmp-title {
      .cmp-title__text {
       &:after {
       display: block;
          width: 84px;
          padding-top: 8px;
          content: '';
          border-bottom: 2px solid @brand-primary;
       }
      }
     }
    }
    

    これにより、タイトルコンポーネントの一部に、WKND ブランドのメインカラー(黄色)で下線が付けられます。

  3. 以下のコードで /apps/wknd/clientlibs/clientlib-site/components/title/title.less を更新し、デフォルトスタイルおよび下線付きスタイルを組み込みます。

    /* WKND Title Styles */
    
    @import (once) "styles/default.less";
    @import (once) "styles/underline.less";

  4. 更新されたコードベースをローカルの AEM インスタンスにデプロイします。

  5. AEM で、記事ページテンプレートに移動します。

    http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page-template/structure.html

    レイアウトコンテナでタイトルコンポーネントをクリックし、ポリシー設定を開きます。

  6. 以下の値でポリシーを更新します。

    ポリシーのタイトル *:WKND Title - Article

    プロパティ/サイズ/すべてのサイズをオンにする

    プロパティ/「スタイル」タブ/新しいスタイルを追加する

    下線cmp-title--underline

    テンプレートのポリシーで追加された cmp-title--underline が、最上位の CSS クラス underline.less ファイルのルールと一致していることに注意してください。

  7. これで、新しいタイトルコンポーネントをページに追加し、下線スタイルをコンポーネントに適用できるようになりました。http://localhost:4502/editor.html/content/wknd/en/first-article-page.html に移動します。

    スタイルが適用されていない場合の、タイトルコンポーネントの HTML ソース:

    <div class="title aem-GridColumn aem-GridColumn--default--12">
        <div class="cmp-title">
            <h2 class="cmp-title__text">New paragraph</h2>
        </div>
    </div>

    スタイルが適用されている場合の、タイトルコンポーネントの HTML ソース:

    <div class="title cmp-title--underline aem-GridColumn aem-GridColumn--default--12">
        <div class="cmp-title">
            <h2 class="cmp-title__text">New paragraph</h2>
        </div>
    </div>

    コンポーネントの外側を囲む div が、スタイルシステムを通して適用された CSS クラスによって常に配置されます。

テキストコンポーネント

次に、作成者が標準的な記事テキストに加え、ブロック引用スタイルを作成可能にするために、テキストコンポーネントにいくつかのスタイルを追加します。

テキストコンポーネントの BEM 記法

BLOCK cmp-text
    ELEMENT cmp-text__paragraph (only present if text is NOT Rich Text)
  1. /apps/wknd/clientlibs/clientlib-site/components/text/styles の下で、quote.less という名前の新しいファイルを作成します。

  2. 以下のように /apps/wknd/clientlibs/clientlib-site/components/text/styles/quote.less を設定します。

    /* WKND Text Quote style */
    
    .cmp-text--quote {
    
          background-color:@brand-secondary;
          padding: 1em 3em;
         margin: 1em 0em;
          
          blockquote {
           margin: 0;
           font-size: 36px;
           border: none;
           padding: 14px 0px;
          }
          
          u {
           text-decoration: none;
           font-family: @font-family-sans-serif;
           &:before {
                    border-top: 2px solid @brand-primary;
                    content: '';
                    display: block;
                    width: 80px;
           }
          }
    }
    
  3. default.less ファイルおよび quote.less ファイルを組み込むよう、/apps/wknd/clientlibs/clientlib-site/components/text/text.less を更新します。

    /* WKND Text Styles */
    
    
    @import (once) "styles/default.less";
    @import (once) "styles/quote.less";
    
    
  4. 更新された Text LESS を AEM にデプロイします。

  5. AEM で、記事ページテンプレートに移動します。

    http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page-template/structure.html

    レイアウトコンテナでテキストコンポーネントをクリックし、ポリシー設定を開きます。次の内容を設定します。

    1. ポリシーのタイトル *:WKND Text - Article
    2. プラグイン/フォーマット/「下線オプションを表示」をオンにする
    3. プラグイン/段落スタイル/「段落スタイルを有効にする」をオンにする。段落および引用以外のすべての要素を削除します
    4. スタイル/値を cmp-text--quote として、Quote Block という名前の新しいスタイルを追加する

  6. ページに移動し、新しいテキストコンポーネントを作成します。

    1. テキストコンポーネントを編集します(鉛筆アイコン)。
    2. RTE を全画面表示に拡大します。
    3. 「段落」ドロップダウンを使用してブロック引用を作成し、有名な引用を追加します。
    4. ブロック引用の下に追加した新しい行に、段落要素を作成し、著者名を追加します。
    5. 著者名に RTE の下線スタイルを適用します。
    6. 変更を保存します。
    7. スタイルを Quote Block スタイルに変更します。

リストコンポーネント

リストコンポーネントはコアコンポーネントによって提供され、注目記事のリストを配置するために使用されます。リストコンポーネントは記事ページテンプレートの固定部分を占め、記事ページ全体で一貫性が創出されます。リストコンポーネントはサイトの他の部分でも使用できるので、独自のスタイルで注目記事のバリエーションを作成できます。

BEM 記法をリストします。

BLOCK cmp-list
    ELEMENT cmp-list__item
    ELEMENT cmp-list__item-link
    ELEMENT cmp-list__item-title
    ELEMENT cmp-list__item-date
  1. /apps/wknd/clientlibs/clientlib-site/components の下で以下をおこないます。

    1. list という名前の新しいフォルダーを作成します。
    2. list.less という名前の新しいファイルを追加します。
    3. list フォルダーの下に styles という名前の新しいフォルダーを作成します。
    4. styles フォルダーに、default.less という名前のファイルを作成します。
    5. styles フォルダーに、upnext.less という名前のファイルを作成します。

  2. 以下のように default.less を設定します。

    /* WKND List Default Style */ 
          
          
    .cmp-list { 
          
        float:left; 
        padding:0; 
          
        .cmp-list__item { 
            list-style: none; 
            float:left; 
            width:100%; 
            margin-bottom:1em; 
        } 
          
        .cmp-list__item-link { 
            font-weight: 600; 
            float:left; 
            padding: 0.5rem 1rem; 
              
            &:hover { 
                background: @brand-secondary; 
            } 
        } 
          
        .cmp-list__item-title { 
            width:100%; 
            float:left; 
        } 
          
        .cmp-list__item-date { 
            width:100%; 
            float:left; 
            color: @gray-light; 
            font-size: @font-size-small;  
        } 
          
    }
  3. 以下のように upnext.less を設定します。

    /* WKND List Up Next Style */ 
          
    .cmp-list--upnext { 
          
        .cmp-list { 
                  
                padding-left: 0em; 
                  
                .cmp-list__item { 
                    list-style: none; 
                    float:left; 
                    width:100%;  
                    margin-bottom:1em; 
                } 
                  
                .cmp-list__item-link { 
                    font-weight: normal; 
                    height: 120px; 
                    border-left: 6px solid @brand-secondary; 
                      
                    &:hover { 
                        background: @brand-primary; 
                        border-color: @text-color; 
                    } 
                      
                } 
                  
                .cmp-list__item-title { 
                    color: @text-color; 
                    padding: 5px; 
                    text-transform: uppercase; 
                      
                } 
                  
                .cmp-list__item-date { 
                    color: @gray-light; 
                    font-size: @font-size-xsmall;  
                    padding: 5px; 
                    text-transform: uppercase; 
                } 
                  
            } 
    }        
  4. list.less を次のように更新して、default および upnext の各スタイルを組み込みます。

    /* WKND List Styles */
    
    @import (once) "styles/default.less";
    @import (once) "styles/upnext.less";
  5. list.less を読み込むよう main.less を更新します。

    /apps/wknd/clientlibs/clientlib-site/main.less ファイルに list.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"; 
    /* add list.less */ 
    @import "components/list/list.less"; 
    @import "components/text/text.less"; 
    @import "components/title/title.less";
  6. コードを AEM にデプロイします。

  7. AEM で、記事ページテンプレートに移動します。

    http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page-template/structure.html

    レイアウトコンテナでリストコンポーネントのポリシーアイコンをクリックし、ポリシー設定を開きます。次の内容を設定します。

    1. ポリシーのタイトル *:WKND List - Article
    2. リスト設定/日付の形式/EEEE, d MMM y
    3. スタイル/値を cmp-list--upnext として、Up Next という名前の新しいスタイルを追加する

  8. ページに移動し、リストコンポーネントを追加します。

    1. リストコンポーネントをページ上にドラッグアンドドロップします。
    2. リストコンポーネントを設定するために、レンチアイコンをクリックします。
    3. リスト設定/以下を使用してリストを作成/固定リスト
      1. 固定リストのオプション 」の下でいくつかのページを追加します。
    4. 項目設定/リンク項目日付を表示をチェックします。

    リストコンポーネントには、次のものを含むいくつかの動的ソースを設定できます。

    • 子ページ
    • タグ付き項目
    • クエリ結果

    設定の詳細については、リストコンポーネントの README を参照してください。

  9. リストスタイルを切り替えます。

レイアウトコンテナ

ここで、記事テンプレートの「body」がページの全幅で表示されていることにお気づきでしょう。第 2 章で設定したレイアウトコンテナは記事の本文に対応し、作成者はこれを使用してコンポーネントを追加できます。レイアウトコンテナと共にスタイルシステムを使用することで、新しく固定幅のスタイルを作成し、ページの本文を固定できます。

  1. /apps/wknd/clientlibs/clientlib-site/components の下で、以下のタスクを実行し、レイアウトコンテナのスタイルが含まれる新しい構造を作成します。

    1. layout-container という名前の新しいフォルダーを作成します。
    2. このフォルダーの下に、layout-container.less という名前のファイルを作成します。
    3. layout-container フォルダーの下に、styles という名前の新しいフォルダーを作成します。
    4. styles フォルダーに、fixed-width.less という名前のファイルを作成します。

  2. 以下のように fixed-width.less を設定します。

    /* WKND Layout Container - fixed-width.less */ 
     
    .cmp-layout-container--fixed { 
      display:block; 
      max-width:  @max-width !important; 
      float: unset !important; 
      margin: 0 auto !important; 
      padding: 0 @gutter-padding; 
      clear: both !important;  
     
      @media (max-width: @screen-medium) { 
        padding: 0 !important; 
      } 
       
    }

    上記のスニペットでは、LESS 変数、@max-width を使用して、.cmp-layout-container--fixed クラスを持つレイアウトコンテナを、中央に最大幅で固定表示します。この変数は variables.less ファイルで定義され、1164px に設定されています。

  3. 以下のように layout-container.less を設定します。

    /* WKND Layout Container Styles */ 
     
    @import (once) "styles/fixed-width.less";
  4. 次に、layout-container.less ファイルを組み込むよう、/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"; 
    /* add import of layout-container.less */ 
    @import "components/layout-container/layout-container.less"; 
    @import "components/text/text.less"; 
    @import "components/title/title.less";
  5. コードを AEM にデプロイします。

    Eclipse または他の IDE でコードベースを編集していた場合、コードを AEM にデプロイします。

  6. AEM で、記事ページテンプレートに移動します。

    http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page-template/structure.html

    レイアウトコンテナコンポーネントをクリックし、ポリシーアイコンをクリックして、レイアウトコンテナのポリシーダイアログを開きます。

    現在、ポリシーのタイトルは WKND Content となっています。 「スタイル」タブを更新します。
    1. スタイル/値を指定せずに、Default という名前の新しいスタイルを追加します。
    2. スタイル/cmp-layout-container--fixed という値を指定して、Fixed Width という名前の新しいスタイルを追加します。

  7. 最後に、レイアウトコンテナ上で Fixed Width スタイルをテストします。 

    警告:

    記事テンプレートによって作成されたページを参照すると、ページのレイアウトコンテナに固定幅が存在しないことがわかります。この章の最後に、記事テンプレートから作成されたすべてのページが固定幅になるよう、記事テンプレートを大幅に更新します。

コンテンツフラグメントコンポーネント

記事本文には、AEM コンテンツフラグメントを使用します。コンテンツフラグメントは、プレゼンテーションレイヤーから独立しており、チャネル間にわたるコンテンツの再利用を促進させます。コンテンツフラグメントの編集用 UI は、大量のテキストを処理するのに役立ちます。記事ページからコンテンツフラグメントを参照できるようにするために、WKND アプリケーションにコンポーネントを追加します。コンテンツフラグメントの概要については、こちらをクリックしてください。

  1. コアコンポーネントの拡張機能への依存関係を組み込むよう、aem-guides-wknd/pom.xml を更新します

    コンテンツフラグメントコンポーネントは、AEM コアコンポーネントの個別のモジュールです。AEM で使用できるよう、親の pom.xml を更新する必要があります。

    aem-guides-wkn/pom.xml に、以下の依存関係を追加します。

    //pom.xml 
     
    ... 
    <dependencies> 
    ... 
    <dependency> 
        <groupId>com.adobe.cq</groupId> 
        <artifactId>core.wcm.components.extension</artifactId> 
        <type>zip</type> 
        <version>1.0.6</version> 
    </dependency> 
    ... 
    </dependencies>
  2. コアコンポーネントの拡張機能をサブパッケージとして組み込むよう、aem-guides-wknd/ui.apps/pom.xml を更新します

    ui.apps/pom.xml を以下のように更新します。

    // ui.apps/pom.xml
    
    ...
    
    <dependencies>
    ...
        <dependency>
            <groupId>com.adobe.cq</groupId>
     <artifactId>core.wcm.components.extension</artifactId>
     <type>zip</type>
        </dependency>
    ...
    </dependencies>
    // ui.apps/pom.xml 
     
    <plugins> 
    ... 
    <!-- ====================================================================== --> 
                <!-- V A U L T   P A C K A G E   P L U G I N S                              --> 
                <!-- ====================================================================== --> 
                <plugin> 
                    <groupId>org.apache.jackrabbit</groupId> 
                    <artifactId>filevault-package-maven-plugin</artifactId> 
                    <extensions>true</extensions> 
                    <configuration> 
                        <embeddeds> 
                            <embedded> 
                                <groupId>com.adobe.aem.guides</groupId> 
                                <artifactId>aem-guides-wknd.core</artifactId> 
                                <target>/apps/wknd/install</target> 
                            </embedded> 
                        </embeddeds> 
                        <subPackages> 
                            <subPackage> 
                                <groupId>com.adobe.cq</groupId> 
                                <artifactId>core.wcm.components.all</artifactId> 
                                <filter>true</filter> 
                            </subPackage> 
                            <subPackage> 
                             <groupId>com.adobe.cq</groupId> 
        <artifactId>core.wcm.components.extension</artifactId> 
                   <filter>true</filter> 
                            </subPackage> 
                        </subPackages> 
                    </configuration> 
                </plugin> 
    ... 
    </plugins>
  3. コアコンポーネント、コンテンツフラグメントコンポーネントをプロキシ化します

    AEM コアコンポーネントのコンポーネントを参照するコンテンツフラグメントがあります。このコンポーネントは、AEM プロジェクトアーキタイプに自動で組み込まれません。コンポーネントを手動で WKND コードベースにプロキシ化します。

    /apps/wknd/components/content の下に、contentfragment という名前の cq:Component ノードを作成します。

    このノードに次のプロパティを追加します。

     

    名前

    タイプ

    componentGroup

    String

    WKND.Content

    jcr:description

    String

    Displays content from a referenced Content Fragment

    jcr:title

    String

    Content Fragment

    jcr:primaryType

    Name

    cq:Component

    sling:resourceSuperType

    String

    core/wcm/extension/components/contentfragment/v1/contentfragment

    cq:isContainer

    Booean

    true

    <?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"
        cq:isContainer="{Boolean}true"
        jcr:primaryType="cq:Component"
        componentGroup="WKND.Content"
        sling:resourceSuperType="core/wcm/extension/components/contentfragment/v1/contentfragment"
        jcr:title="Content Fragment"
        jcr:description="Displays content from a referenced Content Fragment"/>
  4. コンテンツフラグメントコンポーネントのスタイルを参照します

    前の章でおこなった読み込みの際、コンテンツフラグメントコンポーネントのデフォルトスタイルのいくつかが /apps/wknd/clientlibs/clientlib-site/components/contentfragment の下に組み込まれました。

    /* WKND Content Fragment style - default.less */
    
    .cmp-contentfragment {
     
     font-family: @font-family-serif;
     
        p {
         text-align: justify;
         font-size: 20px;
         line-height: (@line-height-base + 1);
        }
    }

  5. コードベースをローカルの AEM インスタンスにデプロイします。POM ファイルに大幅な変更がおこなわれたので、プロジェクトのルートディレクトリから Maven 全体をビルドします。

    $ cd aem-guides-wknd 
    $ mvn -PautoInstallPackage -Padobe-public clean install

    コンテンツフラグメントの拡張機能のための 2 つの追加パッケージがインストールされていることがパッケージマネージャーで確認できます。

  6. レイアウトコンテナポリシーを更新することで、コンテンツフラグメントを有効にします。

    1. 記事ページテンプレート に移動します。http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page-template/structure.html
    2. メインのレイアウトコンテナを選択し、そのポリシーアイコンをクリックします。
    3. WKND.Content の下のコンテンツフラグメントコンポーネントを組み込むよう、許可されたコンポーネントを更新します。

  7. コンテンツフラグメントをページに追加します

    コンテンツフラグメントコンポーネントが有効化され、ページへの追加が可能になっています。

    コンテンツフラグメントコンポーネント
    空のコンテンツフラグメントコンポーネントがページに追加されています。

  8. コンテンツフラグメントを作成します(オプション)

    http://localhost:4502/assets.html/content/dam に移動し、「作成」ボタンをクリックし、次にドロップダウンからコンテンツフラグメントをクリックすることで、コンテンツフラグメントを新規作成できます。コンテンツフラグメントのオーサリングに関する詳細はこちらを参照してください。

    コンテンツフラグメントのオーサリング
    コンテンツフラグメントのオーサリング用 UI

  9. ページ上でコンテンツフラグメントを参照します

    コンテンツフラグメントコンポーネントを追加したコンテンツページに戻ります(手順 4)。レンチアイコンをクリックし、ダイアログを表示します。パスファインダーを使用して、DAM の既存のコンテンツフラグメントを参照および選択できます。オプションで、アセットファインダーフィルターを使用して、アセットをコンテンツフラグメントに制限し、1 つのコンテンツフラグメントをコンポーネント上にドラッグアンドドロップできます。

    コンテンツフラグメントコンポーネントのダイアログ
    コンテンツフラグメントを参照するよう、コンテンツフラグメントコンポーネントのダイアログを編集しています。

    コンテンツフラグメントの各段落には、そのコンテンツフラグメントに追加のコンポーネントを組み込むためのドロップゾーンがあります。また、コンテンツフラグメントのコンテンツは読み取り専用です。これは、元のフラグメントを編集することによってのみコンテンツフラグメントを更新可能にするために、意図的にそうなっています。

まとめ

これでコンポーネントが数個用意できたので、ここからは、それらの構造を記事テンプレートに追加していきます。編集可能テンプレートの強力で柔軟な機能により、あるページコンポーネントをすべてのページにわたって固定化および標準化すると同時に、別のコンポーネントをページレベルで編集可能にすることが可能です。ページレベルで編集可能にするものと、テンプレートレベルで管理する必要があるものの間のバランスを見つけることが重要です。

下の図は、記事テンプレートを固定、固定かつロック解除、および完全に編集可能な領域に分割したものです

記事テンプレートのアーキテクチャ
記事テンプレートコンポーネントのアーキテクチャ

以下のビデオでは、AEM のテンプレートエディターの上記の要件を実装し、記事ページを作成する方法についてご覧いただけます。

ヘルプ

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

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

次の手順

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

ダウンロード

アドビのロゴ

アカウントにログイン