ページとテンプレート pages-and-template

この章では、ベースページコンポーネントと編集可能なテンプレートとの関係を探索します。Adobe XD の一部のモックアップに基づいて、スタイルが設定されていない記事テンプレートを作成する方法について説明します。テンプレートを作成するプロセスでは、コアコンポーネントと編集可能なテンプレートの詳細ポリシー設定について説明します。

前提条件 prerequisites

ローカル開発環境を設定するために必要なツールや説明を確認します。

スタータープロジェクト

NOTE
前の章を正常に完了した場合は、プロジェクトを再利用して、スタータープロジェクトをチェックアウトする手順をスキップできます。

チュートリアルの作成元となるベースラインコードをチェックアウトします。

  1. GitHubtutorial/pages-templates-start ブランチをチェックアウトします。

    code language-shell
    $ cd ~/code/aem-guides-wknd
    $ git checkout tutorial/pages-templates-start
    
  2. Maven スキルを使用して、ローカル AEM インスタンスにコードベースをデプロイします。

    code language-shell
    $ mvn clean install -PautoInstallSinglePackage
    
    note note
    NOTE
    AEM 6.5 または 6.4 を使用している場合は、任意の Maven コマンドに classic プロファイルを追加します。
    code language-shell
    $ mvn clean install -PautoInstallSinglePackage -Pclassic
    

いつでも、完成したコードを GitHub で確認したり、ブランチ tutorial/pages-templates-solution に切り替えてローカルにチェックアウトしたりできます。

目的

  1. Adobe XD で作成したページデザインを検査し、コアコンポーネントにマッピングします。
  2. 編集可能なテンプレートの詳細と、ポリシーを使用してページコンテンツを詳細に制御する方法を理解します。
  3. テンプレートとページのリンク方法を学びます

作ろうとしているもの what-build

チュートリアルのこの部分では、記事ページの作成に使用でき、共通の構造に合わせて新しい記事ページテンプレートを作成します。記事ページテンプレートは、Adobe XD で作成したデザインと UI キットに基づいています。この章では、テンプレートの構造またはスケルトンの構築にのみ焦点を当てています。スタイルは実装されていませんが、テンプレートとページは機能しています。

記事ページデザインとスタイルが設定されていないバージョン

Adobe XD を使用した UI の計画 adobexd

通常、新しい web サイトの計画は、モックアップと静的なデザインから始まります。Adobe XD は、ユーザーエクスペリエンスを作成するデザインツールです。次に、記事ページテンプレートの構造を計画するのに役立つ UI キットとモックアップを探索します。

WKND 記事デザインファイルをダウンロードします

NOTE
カスタムプロジェクトの開始点として、汎用の AEM コアコンポーネント UI キットも使用できます

記事ページテンプレートの作成

ページを作成するとき、テンプレートを選択する必要があります。これはページを作成するための基本として使用されます。テンプレートは、作成されるページの構造、初期コンテンツおよび許可されるコンポーネントを定義します。

編集可能なテンプレートには、主に次の 3 つの領域があります。

  1. 構造 - テンプレートの一部であるコンポーネントを定義します。コンテンツ作成者はこれらを編集できません。
  2. 初期コンテンツ - テンプレート開始時のコンポーネントを定義します。コンテンツ作成者はこれらを編集/削除できます
  3. ポリシー - コンポーネントの動作、および作成者が利用可能なオプションに関する設定を定義します。

次に、AEM でモックアップの構造に合ったテンプレートを作成します。これは、AEM のローカルインスタンスで発生します。以下のビデオの手順に従います。

上記のビデオの大まかな手順:

構造の設定

  1. ページテンプレートタイプ ​を使用して、記事ページ ​という名前のテンプレートを作成します。

  2. 構造 ​モードに切り替えます。

  3. テンプレートの上部に、ヘッダー ​として機能する​ エクスペリエンスフラグメント ​コンポーネントを追加します。

    • コンポーネントが /content/experience-fragments/wknd/us/en/site/header/master を指すように設定します。
    • ポリシーを​ ページヘッダー ​に設定して、デフォルトの要素 ​が header に設定されているようにしてください。次の章では、header 要素のターゲット設定を CSS で指定します。
  4. テンプレートの最下部で、フッター ​として機能する​ エクスペリエンスフラグメント ​を追加します。

    • コンポーネントが /content/experience-fragments/wknd/us/en/site/footer/master を指すように設定します。
    • ポリシーを​ ページフッター ​に設定して、デフォルトの要素 ​が footer に設定されているようにしてください。次の章では、footer 要素のターゲット設定を CSS で指定します。
  5. テンプレートが最初に作成されたときに含まれていた​ メイン ​コンテナをロックします。

    • ポリシーを​ メインページ ​に設定して、デフォルトの要素main に設定されているようにしてください。次の章では、main 要素のターゲット設定を CSS で指定します。
  6. 画像 ​コンポーネントを​ メイン ​コンテナに追加します。

    • 画像 ​コンポーネントをロック解除します。
  7. メインコンテナの​ 画像 ​コンポーネントの下に​ パンくず ​コンポーネントを追加します。

    • パンくず ​コンポーネントに​ 記事ページ - パンくず ​という名前のポリシーを作成します。ナビゲーション開始レベル ​を 4 に設定します。
  8. コンテナ ​コンポーネントを​ パンくず ​コンポーネントの下かつ​ メイン ​コンテナの内側に追加します。これは、テンプレートの​ コンテンツコンテナ ​として機能します。

    • コンテンツ ​コンテナをロック解除します。
    • ポリシーを​ ページコンテンツ ​に設定します。
  9. 別の​ コンテナ ​コンポーネントを​ コンテンツコンテナ ​の下に追加します。これはテンプレートの​ サイドパネル ​コンテナとして機能します。

    • サイドパネル ​コンテナをロック解除
    • 記事ページ - サイドレール ​という名前のポリシーを作成します。
    • WKND Sites プロジェクト - コンテンツ ​の下の​ 許可されたコンポーネント ​を設定して、ボタンダウンロード画像リストセパレーターソーシャルメディア共有テキストタイトル ​を含めます。
  10. ページルートコンテナのポリシーを更新します。これは、テンプレートの最も外側にあるコンテナです。ポリシーを​ ページルート ​に設定します。

    • コンテナ設定 ​で、レイアウト ​を​ レスポンシブグリッド ​に設定します。
  11. コンテンツコンテナ ​をレイアウトモードにします。ハンドルを右から左にドラッグし、コンテナを 8 列幅に縮小します。

  12. サイドレールコンテナ ​のレイアウトモードを有効にします。ハンドルを右から左にドラッグし、コンテナを 4 列幅に縮小します。次に、左側のハンドルを左から右へ 1 列ドラッグしてコンテナを 3 列幅にし、コンテンツコンテナ ​の間に 1 列の間隔を残します。

  13. モバイルエミュレーターを開き、モバイルブレークポイントに切り替えます。レイアウトモードを再度有効にし、コンテンツコンテナ ​と​ サイドパネルコンテナ ​をページの全幅にします。これにより、モバイルのブレークポイントにコンテナが垂直に積み重なります。

  14. コンテンツコンテナ ​で​ テキスト ​コンポーネントのポリシーを更新します。

    • ポリシーを​ コンテンツテキスト ​に設定します。
    • プラグイン段落スタイル ​で、段落スタイルを有効にする ​にチェックを入れ、Quote Block が有効になっていることを確認します。

初期コンテンツ設定

  1. 初期コンテンツ ​モードに切り替えます。

  2. タイトル ​コンポーネントを​ コンテンツコンテナ ​に追加します。これは記事のタイトルとして機能します。空のままにすると、現在のページのタイトルが自動的に表示されます。

  3. 最初のタイトルコンポーネントの下に、2 番目の​ タイトル ​コンポーネントを追加します。

    • 「By Author」というテキストを使用してコンポーネントを設定します。これはテキストのプレースホルダーです。
    • タイプを H4 に設定します。
  4. By Author タイトルコンポーネントの下に、テキスト ​コンポーネントを追加します。

  5. サイドパネルコンテナ ​に​ タイトル ​コンポーネントを追加します。

    • 「このストーリーを共有」というテキストを使用してコンポーネントを設定します。
    • タイプを H5 に設定します。
  6. このストーリーを共有 ​タイトルコンポーネントの下に、ソーシャルメディア共有 ​コンポーネントを追加します。

  7. ソーシャルメディア共有 ​コンポーネントの下に​ セパレーター ​コンポーネントを追加します。

  8. セパレーター ​コンポーネントの下に​ ダウンロード ​コンポーネントを追加します。

  9. ダウンロード ​コンポーネントの下に​ リスト ​コンポーネントを追加します。

  10. テンプレートの​ 初期ページプロパティ ​を更新します。

    • ソーシャルメディアソーシャルメディア共有 ​で、FacebookPinterest にチェックを入れます。

テンプレートを有効にしてサムネールを追加

  1. http://localhost:4502/libs/wcm/core/content/sites/templates.html/conf/wknd に移動して、テンプレートコンソールでテンプレートを表示します。

  2. 記事ページテンプレートを​ 有効 ​にします。

  3. 記事ページテンプレートのプロパティを編集し、次のサムネールをアップロードして、記事ページテンプレートを使用して作成したページを素早く特定します。

    記事ページテンプレートサムネール

エクスペリエンスフラグメントを使用したヘッダーとフッターの更新 experience-fragments

ヘッダーやフッターなどのグローバルコンテンツを作成する際の一般的な方法は、エクスペリエンスフラグメントを使用することです。エクスペリエンスフラグメントを使用すると、複数のコンポーネントを組み合わせて、1 つの参照可能なコンポーネントを作成できます。エクスペリエンスフラグメントには、マルチサイト管理とローカリゼーションをサポートするという利点があります。

AEM プロジェクトアーキタイプがヘッダーとフッターを生成しました。次に、モックアップと一致するようにエクスペリエンスフラグメントを更新します。以下のビデオの手順に従います。

上記のビデオの大まかな手順:

  1. サンプルコンテンツパッケージ WKND-PagesTemplates-Content-Assets.zip をダウンロードします。

  2. http://localhost:4502/crx/packmgr/index.jsp でパッケージマネージャーを使用して、コンテンツパッケージをアップロードしてインストールします。

  3. Web バリエーションテンプレートを更新します。これは、http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/xf-web-variation/structure.html でエクスペリエンスフラグメントに使用されるテンプレートです。

    • テンプレートの​ コンテナ ​コンポーネントのポリシーを更新します。
    • ポリシーを XF ルート ​に設定します。
    • 許可されたコンポーネント ​で、コンポーネントグループ WKND Sites プロジェクト - 構造 ​を選択し、言語ナビゲーションナビゲーションクイック検索 ​コンポーネントを含めます。

ヘッダーエクスペリエンスフラグメントの更新

  1. http://localhost:4502/editor.html/content/experience-fragments/wknd/us/en/site/header/master.html でヘッダーをレンダリングするエクスペリエンスフラグメントを開きます。

  2. フラグメントのルート​ コンテナ ​を設定します。これが一番外側の コンテナ ​です。

    • レイアウト ​を​ レスポンシブグリッド ​に設定します。
  3. コンテナ ​の上部に WKND ダークロゴ ​を画像として追加します。ロゴは前の手順でインストールしたパッケージに含まれています。

    • WKND ダークロゴ ​のレイアウトを 2 列の幅に変更します。ハンドルを右から左にドラッグします。
    • ロゴの​ 代替テキスト ​を「WKND ロゴ」に設定します。
    • ロゴが /content/wknd/us/en ホームページに​ リンク ​するように設定します。
  4. 既にページに配置されている​ ナビゲーション ​コンポーネントを設定します。

    • ルートレベルを除外 ​を 1 に設定します。
    • ナビゲーション構造の深さ ​を 1 に設定します。
    • ナビゲーション ​コンポーネントのレイアウトを変更して、8 列幅にします。ハンドルを右から左にドラッグします。
  5. 言語ナビゲーション ​コンポーネントを削除します。

  6. 検索 ​コンポーネントのレイアウトを変更して 2 列幅にします。ハンドルを右から左にドラッグします。すべてのコンポーネントが、1 行に対して水平方向に整列しているはずです。

フッターエクスペリエンスフラグメントを更新

  1. フッターをレンダリングするエクスペリエンスフラグメントを http://localhost:4502/editor.html/content/experience-fragments/wknd/us/en/site/footer/master.html で開きます。

  2. フラグメントのルート​ コンテナ ​を設定します。これが一番外側の コンテナ ​です。

    • レイアウト ​を​ レスポンシブグリッド ​に設定します
  3. WKND ライトロゴ ​を​ コンテナ ​の上部に画像として追加します。ロゴは前の手順でインストールしたパッケージに含まれています。

    • WKND ライトロゴ ​のレイアウトを変更して 2 列幅にします。ハンドルを右から左にドラッグします。
    • ロゴの​ 代替テキスト ​を「WKND ロゴライト」に設定します。
    • ロゴを /content/wknd/us/en ホームページに​ リンク ​するように設定します。
  4. ロゴの下に​ ナビゲーション ​コンポーネントを追加します。ナビゲーション ​コンポーネントを設定します。

    • ルートレベルを除外 ​を 1 に設定します。
    • すべての子ページを収集」のチェックをオフにします。
    • ナビゲーション構造の深さ ​を 1 に設定します。
    • ナビゲーション ​コンポーネントのレイアウトを変更して、8 列幅にします。ハンドルを右から左にドラッグします。

記事ページの作成

次に、記事ページテンプレートを使用してページを作成します。サイトのモックアップと一致するようにページのコンテンツを作成します。以下のビデオの手順に従います。

上記のビデオの大まかな手順:

  1. Sites コンソール(http://localhost:4502/sites.html/content/wknd/us/en/magazine)に移動します。

  2. WKNDUSENMagazine の下にページを作成します。

    • 記事ページ ​テンプレートを選択します。
    • プロパティ ​で、タイトル ​を「Ultimate Guide to LA Skateparks」に設定します。
    • 名前 ​を「guide-la-skateparks」に設定します。
  3. By Author タイトルを「By Stacey Roswells」というテキストで置き換えます。

  4. テキスト ​コンポーネントを更新して、記事に入力する段落を含めます。コピーとして、テキストファイル la-skate-parks-copy.txt を使用できます。

  5. 別の​ テキスト ​コンポーネントを追加します。

    • コンポーネントを更新して、「There is no better place to shred than Los Angeles.」という引用を含めます。
    • フルスクリーンモードでリッチテキストエディターを編集し、上記の引用を変更して​ 引用ブロック ​要素を使用します。
  6. 続けて記事の本文を入力し、モックアップに一致させます。

  7. ダウンロード ​コンポーネントを設定して、記事の PDF 版を使用できるようにします。

    • ダウンロードプロパティ ​で、チェックボックスをクリックして DAM アセットからタイトルを取得します
    • 説明 ​を「全文を読む」に設定します。
    • アクションテキスト ​を「Download PDF」に設定します。
  8. リスト ​コンポーネントを設定します。

    • リスト設定次を使用してリストを作成 ​で、子ページ ​を選択します。
    • 親ページ ​を /content/wknd/us/en/magazine に設定します。
    • 項目設定 ​で、「項目をリンク」および「日付を表示」にチェックを入れます。

ノード構造の検査 node-structure

この時点で、記事ページは明らかにスタイルが設定されていません。しかし、基本的な構造は整っています。次に、記事ページのノード構造を検査して、テンプレート、ページおよびコンポーネントの役割をさらに深く理解します。

ローカル AEM インスタンスで CRXDE-Lite ツールを使用して、基礎となるノード構造を表示します。

  1. CRXDE-Lite を開き、ツリーナビゲーションを使用して /content/wknd/us/en/magazine/guide-la-skateparks に移動します。

  2. la-skateparks ページの下にある jcr:content ノードをクリックして、プロパティを表示します。

    JCR コンテンツのプロパティ

    cq:template の値に注目してください。これは、以前に作成した記事ページテンプレートの /conf/wknd/settings/wcm/templates/article-page を指しています。

    また、sling:resourceType の値にも注目してください。これは、wknd/components/page を指しています。これは、AEM プロジェクトアーキタイプによって作成されたページコンポーネントであり、テンプレートに基づいてページをレンダリングします。

  3. /content/wknd/us/en/magazine/guide-la-skateparks/jcr:content の下にある jcr:content ノードを展開し、ノード階層を表示します。

    JCR コンテンツの LA スケートパーク

    作成したコンポーネントに各ノードを大まかにマップできます。プレフィックスに container が付いたノードを検査して、使用されている様々なレイアウトコンテナを識別できるかどうかを確認します。

  4. 次に、/apps/wknd/components/page でページコンポーネントを検査します。CRXDE Lite でコンポーネントのプロパティを表示します。

    ページコンポーネントのプロパティ

    ページコンポーネントの下には、customfooterlibs.htmlcustomheaderlibs.html の 2 つの HTL スクリプトしかありません。それでは、このコンポーネントはページをどのようにレンダリングするのでしょうか。

    sling:resourceSuperType プロパティは、core/wcm/components/page/v2/page を指しています。このプロパティにより、WKND のページコンポーネントはコアコンポーネントページコンポーネントの​ すべて ​の機能を継承できます。これは、プロキシコンポーネントパターンと呼ばれるものの最初の例です。詳しくは、こちらを参照してください。

  5. WKND コンポーネント内の別のコンポーネントである /apps/wknd/components/breadcrumbBreadcrumb コンポーネントを検査します。同じ sling:resourceSuperType プロパティが見つかりますが、今回は core/wcm/components/breadcrumb/v2/breadcrumb を指していることに注目してください。これは、プロキシコンポーネントパターンを使用してコアコンポーネントを含める別の例です。実際、WKND コードベースのすべてのコンポーネントは、AEM コアコンポーネントのプロキシです(カスタムデモの HelloWorld コンポーネントを除く)。カスタムコードを記述する​ ​に、コアコンポーネントの機能をできるだけ再利用することをお勧めします。

  6. 次に、CRXDE Lite を使用して、/libs/core/wcm/components/page/v2/page にあるコアコンポーネントページを検査します。

    note note
    NOTE
    AEM 6.5 および 6.4 では、コアコンポーネントは /apps/core/wcm/components の下にあります。AEM as a Cloud Service では、コアコンポーネントは /libs の下にあり、自動的に更新されます。

    コアコンポーネントページ

    このページの下には、多くのスクリプトファイルが含まれています。コアコンポーネントページには、多数の機能が含まれています。この機能は、メンテナンスや読みやすさを容易にするために、複数のスクリプトに分割されています。page.html を開いて data-sly-include を探すことで、HTL スクリプトが含まれているかどうかを追跡できます。

    code language-html
    <!--/* /libs/core/wcm/components/page/v2/page/page.html */-->
    <!DOCTYPE HTML>
    <html data-sly-use.page="com.adobe.cq.wcm.core.components.models.Page" lang="${page.language}"
        data-sly-use.head="head.html"
        data-sly-use.footer="footer.html"
        data-sly-use.redirect="redirect.html">
        <head data-sly-call="${head.head @ page = page}"></head>
        <body class="${page.cssClassNames}"
            id="${page.id}"
            data-cmp-data-layer-enabled="${page.data ? true : false}">
            <script data-sly-test.dataLayerEnabled="${page.data}">
            window.adobeDataLayer = window.adobeDataLayer || [];
            adobeDataLayer.push({
                page: JSON.parse("${page.data.json @ context='scriptString'}"),
                event:'cmp:show',
                eventInfo: {
                    path: 'page.${page.id @ context="scriptString"}'
                }
            });
            </script>
            <sly data-sly-test.isRedirectPage="${page.redirectTarget && (wcmmode.edit || wcmmode.preview)}"
                data-sly-call="${redirect.redirect @ redirectTarget = page.redirectTarget}"></sly>
            <sly data-sly-test="${!isRedirectPage}">
                <sly data-sly-include="body.skiptomaincontent.html"></sly>
                <sly data-sly-include="body.socialmedia_begin.html"></sly>
                <sly data-sly-include="body.html"></sly>
                <sly data-sly-call="${footer.footer @ page = page}"></sly>
                <sly data-sly-include="body.socialmedia_end.html"></sly>
            </sly>
        </body>
    </html>
    

    HTL を複数のスクリプトに分割するもう 1 つの理由は、プロキシコンポーネントが個々のスクリプトを上書きしてカスタムビジネスロジックを実装できるようにするためです。HTL スクリプトの customfooterlibs.html および customheaderlibs.html は、プロジェクトを実装することによって明示的に上書きされるように作成されています。

    この記事を読むと、コンテンツページのレンダリングに編集可能なテンプレートが影響する方法について詳しく理解できます。

  7. /libs/core/wcm/components/breadcrumb/v2/breadcrumb にあるパンくずリストなど、別のコアコンポーネントを検査します。パンくずコンポーネントのマークアップが最終的にどのように生成されるかを理解するには、breadcrumb.html スクリプトを表示します。

ソース管理への設定の保存 configuration-persistence

多くの場合、特に AEM プロジェクトの開始時には、テンプレートや関連するコンテンツポリシーなどの設定をソース管理に保持することが重要です。これにより、すべての開発者が同じセットのコンテンツと設定に対して作業することが保証され、環境間の一貫性がさらに確保できます。プロジェクトが一定の成熟度に達すると、テンプレートの管理作業を特別なパワーユーザーグループに引き継ぐことができます。

現時点では、テンプレートは他のコードと同様に扱われ、記事ページテンプレート をプロジェクトの一部として同期します。
これまで、コードは AEM プロジェクトから AEM のローカルインスタンスにプッシュされていました。記事ページテンプレート ​が AEM のローカルインスタンスで直接作成されたので、テンプレートを AEM プロジェクトに​ 読み込む ​必要があります。ui.content モジュールは、この特定の目的のために AEM プロジェクトに含まれています。

次の一部の手順は、VSCode AEM Sync プラグインを使用して VSCode IDE で実行されます。ただし、読み込む ​ように設定した IDE を使用したり、AEM のローカルインスタンスからコンテンツを読み込んだりする可能性があります。

  1. VSCode で aem-guides-wknd プロジェクトを開きます。

  2. プロジェクトエクスプローラーで、ui.content モジュールを展開します。src フォルダーを展開して、/conf/wknd/settings/wcm/templates に移動します。

  3. templates フォルダーを右クリックし、AEM サーバーから読み込む ​を選択します。

    VSCode インポートテンプレート

    article-page を読み込んで、page-content テンプレートおよび xf-web-variation テンプレートも更新する必要があります。

    更新されたテンプレート

  4. コンテンツを読み込む手順を繰り返しますが、/conf/wknd/settings/wcm/policies から​ ポリシー ​フォルダーを選択します。

    VSCode 読み込みポリシー

  5. ui.content/src/main/content/META-INF/vault/filter.xml から filter.xml ファイルを検査します。

    code language-xml
    <!--ui.content filter.xml-->
    <?xml version="1.0" encoding="UTF-8"?>
    <workspaceFilter version="1.0">
        <filter root="/conf/wknd" mode="merge"/>
        <filter root="/content/wknd" mode="merge"/>
        <filter root="/content/dam/wknd" mode="merge"/>
        <filter root="/content/experience-fragments/wknd" mode="merge"/>
    </workspaceFilter>
    

    filter.xml ファイルは、パッケージと共にインストールされるノードのパスを識別する役割を果たします。各フィルターの mode="merge" に注目してください。これは、既存のコンテンツは変更されず、新しいコンテンツのみが追加されることを示しています。コンテンツ作成者がこれらのパスを更新する可能性があるので、コードのデプロイメントでは、コンテンツを上書き​ しません。フィルター要素の操作の詳細については、FileVault ドキュメントを参照してください。

    ui.content/src/main/content/META-INF/vault/filter.xmlui.apps/src/main/content/META-INF/vault/filter.xml を比較して、各モジュールによって管理される様々なノードを理解します。

    note warning
    WARNING
    WKND リファレンスサイトの一貫したデプロイメントを確実に行うために、プロジェクトの一部のブランチは、ui.content が JCR の変更を上書きするように設定されています。これは設計によるものです。つまり、ソリューションブランチ用にコードおよびスタイルが特定のポリシー用に記述されます。

これで完了です。 congratulations

Adobe Experience Manager Sites でテンプレートとページが作成されました。

次の手順 next-steps

この時点で、記事ページは明らかにスタイルが設定されていません。クライアントサイドライブラリとフロントエンドワークフローチュートリアルに従って、CSS と JavaScript を組み込み、グローバルスタイルをサイトに適用し、専用のフロントエンドビルドを統合するためのベストプラクティスを学びます。

GitHub で完成したコードを表示するか、コードを確認して Git ブランチ tutorial/pages-templates-solution でローカルにデプロイします。

  1. github.com/adobe/aem-wknd-guides リポジトリのクローンを作成します。
  2. tutorial/pages-templates-solution ブランチをチェックアウトします。
recommendation-more-help
b2a561c1-47c0-4182-b8c1-757a197484f9