Web テンプレートの作成

  • 12 分

カスタム ページ テンプレートを作成するには、Web テンプレート行を使用できます。このテンプレートは基本的にはレイアウト テンプレートです。 たとえば、Web テンプレートに静的 HTML が含まれている場合、そのテンプレートを使用するページ出力にこの HTML がそのまま表示されます。 Web テンプレートの一番の強みは、Dataverse データへのアクセスなど、静的コンテンツに処理機能を追加するような Liquid コードを持てることにあります。

Power Pages Management アプリで編集中の Power Pages Web テンプレートのスクリーンショット。

Web テンプレートは、次の列を含む簡易テーブルです。

  • 名前 - テンプレートが他のコンテンツに含まれている場合、または他のテンプレートで機能強化されている場合、そのテンプレートはこの名前で参照されます。

  • Web サイト - テンプレートが使用される Web サイトの行。

  • ソース - テンプレートのソース コンテンツです。 静的テキスト、HTML フラグメント、または (ほとんどの場合)、Liquid を使用したレイアウトです。

  • MIME の種類 - テンプレートのレンダリング時にサーバーがクライアントに送信する Multipurpose Internet Mail Extensions (MIME) の種類を定義します。 値の指定がない場合、値は text/html と想定されます。これは HTML ページの標準のタイプです。 特殊なコンテンツをレンダリングする Web テンプレートを作成できます。 たとえば、Microsoft Dataverse データの一部を json 形式で返す Web テンプレートを作成できます。 この場合、MIME の種類は application/json に設定されます。

Web テンプレート管理

Power Pages Web サイト内の Liquid 実装には、テンプレートの管理や再利用の促進に役立つテンプレート タグ が多く含まれています。

FetchXML タグ

fetchxml タグは、ユーザーが Dataverse からデータを照会し、ページに結果をレンダリングできるようにします。

{% fetchxml varResults %}
<!— Fetchxml query -->
<fetch>
  <entity name="account">
    <attribute name="name" />
  </entity>
</fetch>
{% endfetchxml %}

varResults 変数には、クエリの結果が含まれます。

{% for account in varResults.results.entities %} 
  <p>{{ account.name }}</p>
{% endfor %}

重要

テーブルのアクセス許可は常に、fetchxml タグを含む Liquid を使用して取得されたデータに適用されます。

Comment タグ

comment タグを使用すると、ブロック内のコンテンツがレンダリングされず、内部の Liquid コードも実行されません。 このタグは、複雑なテンプレートに拡張コメントを含める場合や、トラブルシューティング時にコードのブロックを一時的にコメント アウトする場合に便利です。

This is a {% comment %}very useful {% endcomment %}comment.

上記のロジックによって、次の結果が生成されます。

これはコメントです。

Raw タグ

raw タグにより、ページ上の Liquid コードの解析や実行を行わずに出力できます。 このタグは、ハンドルバーなど、競合するクライアント側の構文を使用するコンテンツを生成するのに役立ちます。 また、ページのコンテンツに Liquid コードのフラグメントを含める必要がある場合にも役立ちます。たとえば、Liquid 言語の使用方法について説明してサンプルを含めるサポート情報記事などに使用できます。

Hello, {% raw %}{{ user.fullname }}.{% endraw %} Nice to meet you.

上記のロジックによって、次の結果が生成されます。

{{ user.fullname }} 様 はじめまして。

Liquid の命令として処理され、実際のユーザーの名前に変換される代わりに、user.fullname がどのように明示的にレンダリングされるかに注目してください。

Include タグ

include タグは、名前を指定して、1 つのテンプレートの内容を別のテンプレートに含めます。 このタグにより、複数の場所で共通のテンプレート フラグメントを再利用できるようになります。たとえば、ソーシャル リンクのレンダリングなどです。 含まれているテンプレートは、親テンプレートで定義されている変数にアクセスでき、パラメーターを渡すことができます。

{% include 'Breadcrumbs', separator: '>' %}

このロジックには、separator 変数が右向き山かっこ (>) 記号に設定される Breadcrumbs テンプレートによって生成される出力が含まれます。

Block タグ

block タグを使用すると、テンプレート内のブロックを定義できます。これにより、現在のテンプレートを拡張するテンプレートによって任意に上書きできる領域が定義されます。

Extend タグ

block タグと同時に使用すると、extend タグによりテンプレートが継承されます。 このタグにより、複数のテンプレートで共有レイアウトを使用できる一方で、親レイアウトの特定の領域を上書きできます。 extend を使用する場合は、テンプレートの先頭のコンテンツである必要があり、後に 1 つ以上のブロック タグのみが続く必要があります。

ベース テンプレート

ベース テンプレートのロジックは次のとおりです。

<div>
Hello
{% block content %}default content{% endblock %}
</div>

子テンプレート

子テンプレートのロジックは次のとおりです。

{% extends 'Base Template' %}
{% block content %}Power Pages websites{% endblock%}

子テンプレートによって、次の出力が生成されます。

<div>
  Hello
  Power Pages websites
</div>

extend タグと block タグは、通常、レイアウト テンプレートとコンテンツ テンプレートを区別するために使用されます。 通常、親テンプレートまたはベース テンプレートでは、単一の列または 2 つの列のページを使用する場合など、広いページ レイアウトを定義します。 ベースを拡張する子テンプレートでは、親によって指定されているブロックのコンテンツのみを定義できます。

block/extend タグと include タグを使用してテンプレートを継承する包括的な Liquid コード サンプルについては、Power Pages のカスタム ページ レイアウトを参照してください。

Web テンプレートのベスト プラクティス

テンプレートの構造を改善し、Web テンプレートの管理を向上させるために、次のガイドラインに従ってください。

  • テンプレートは参照されるか、他のテンプレートの一部として含まれるため、テンプレートの内容を説明する名前を選択します。

  • ページ レイアウトを分割して、コンテンツとレイアウトを区別します。 これらは拡張可能なテンプレートとなる可能性があります。

  • 繰り返し可能で再利用可能なフラグメントを探します。これらはサブ テンプレートとして定義でき、include タグを使用します。

  • include タグを使用すると、レイアウトおよび一般的に使用される JavaScript フラグメントを再利用するのに役立ちます。 include タグで使用可能なパラメータを使用して、"スマート" な JavaScript テンプレートにします。 これらのフラグメントはインラインで挿入されます。

  • より大きく、再利用可能な JavaScript のブロックを別のファイルに移動し、代わりに参照として挿入します。 クライアントのブラウザーはそれらを個別に読み込み、キャッシュに格納できます。 さらに、外部に読み込まれたスクリプトをミニファイ処理することができます。これにより、パフォーマンスが向上します。

  • 多言語実装のために、翻訳が必要なページの一部を検索します。 これらのページをページ コンテンツまたはコンテンツ スニペットとして定義します。

  • 編集可能なフラグメントを識別します。 ユーザーにコンテンツの管理とメンテナンスを任せる Web ページの部分を決定します。

  • テンプレートを作成する際は、レイアウトを大きく取り、たとえばタグにハイフンを使用して、空白行を過剰に使用しないようにします。

    {%- if username -%}
  Hello, {{ user.firstname}}
{%- endif -%}

  • comments タグを使用して、テンプレートの複雑な部分を説明します。

  • スターター ポータルで既に展開されているテンプレートを研究し、Power Pages のカスタム ページのレイアウトで Liquid テクニックを検索します。

スターター ポータルをプロビジョニングする場合、すぐに使用できる Liquid テンプレートが多数インストールされています: 組み込み Web テンプレート。 これらの名前は固定であり、これらの一部のテンプレートは編集できません。

詳細については、Liquid の概要を参照してください。