コンテンツ・リスト問合せでマクロを拡張

コンテンツ・リスト問合せでは、ページの実行時に計算されるプロパティの値を定義して、最近更新されたコンテンツを表示できます。

サイト内のコンポーネントのほとんどのプロパティは静的です。ユーザーは、コンポーネントのプロパティの1つに固定文字列または値を選択または入力しますが、ページの実行時期や場所に関係なく変更されません。ただし、ページの実行時に計算されるプロパティの値を定義できます。これは、コンテンツ問合せで最近更新されたコンテンツを表示する場合に便利です。ユーザーは、過去3日のような日付を入力できます。

Mustache JS拡張を複数のプロパティに挿入できます。これらの文字列で参照される値は、ページが実行されるときに実行されるモデルから導出されます。即時利用可能なモデルは、Content REST APIコール用にフォーマットされた日付を処理します。ユーザー要件を満たすために追加の値でこのモデルを拡張できます。

プロパティに入力できる文字列の例は、次のとおりです:

Content List component:
      Additional Query String property:
             updatedDate gt "{{#content.date}}today - 3 days{{/content.date}}"

この日付の大規模なエントリは実行時に評価されるため、返される値は、実行時に反映されます(つまり、updatedDate gt "2220181002060000000"に拡張されます)。この方法で、ユーザーは事前定義された値を入力する必要なく、複雑な日付文字列をビルドできます。

サポートされているコンポーネント・プロパティ

次のプロパティでは、Mustache JSテンプレート構文がサポートされています:

コンテンツ・リスト
- 追加問合せ文字列
- たとえば: updatedDate gt "{{#content.date}}today - 3 days{{/content.date}}"
Title/Paragraph/Text
- リッチ・テキスト・エディタを使用して入力されたリッチ・テキスト
- たとえば: "Content REST API format for date: {{#content.date}}now{{/content.date}}"

ノート:

マスターチェ・テンプレートのカスタム・モデルがない場合、Title/Paragraph/Textで展開すると有益ではありません。ただし、編集と表示を切り替えてすぐに表示する際に評価されるため、追加の問合せ文字列に入力した内容の検証には非常に便利です。

サポートされるコンポーネントの構文

content.dateオブジェクトは初期状態でサポートされます。これは、todayとnowの2つのメイン・パラメータを取ります。

todayの値は、現在のブラウザ時刻を取得して午前0時の整数に変換し、その値をUTC時間に変換します。

{{#content.date}}today{{/content.date}}は、UTC値に変換され、コンテンツREST APIの日付書式に書式設定された、午前0時のトントのブラウザ値に拡張されます。たとえば:
```
2220181008065959999
```
その後、次のように拡張できます:
```
today +/-  [day | week | month | year]
```
また、today値と加算または減算した場合も動作が異なります。朝食すると、朝の時間が使用されます。これに追加すると、深夜の時間が使用されます。たとえば:
- {{#content.date}}today - 1 day{{/content.date}}は昨日から開始されます。
- {{#content.date}}today + 2 days{{/content.date}}が深夜の明後日に展開されます。

now値は、現在のブラウザ時間を取り、調整なしでUTC時間に変換されます。

{{#content.date}}now{{/content.date}}は、UTC値に変換され、コンテンツREST APIの日付書式に書式設定された、現在のブラウザ時間に拡張されます。
nowは、hourで拡張することもできます。そのため、次のような作業を行っている:
```
now +/-  [hour | day | week | month | year]
```
たとえば:
- {{#content.date}}now + 2 hours{{/content.date}} - 現在、Content REST API日付書式で書式設定されたUTC時間に変換された2時間
- {{#content.date}}now - 1 day{{/content.date}} - このブラウザ時刻から昨日、UTC時間に変換され、コンテンツREST APIの日付書式に書式設定されています。

サポートされているコンポーネント構文の使用方法

追加の問合せ文字列でマクロ拡張を使用するために、過去の3週のすべての値を戻すと、次のように入力されます:

updatedDate gt "{{#code.date}}today - 3 weeks{{/code.date}}"

ここでは日付のみが戻されるため、Content REST APIコールで作業するには、静的値を入力する場合と同様に問合せ文字列を作成するときに引用符が追加されます。

MustacheJS

構文については、mustache.github.io/mustache.5.htmlのMustache JSテンプレート・ページを参照してください。

文字列を拡張するときに実行されるMustacheインスタンスは、変更されています。 Mustacheは、{{ }}を使用するtext拡張と、{{{ }}}を使用するhtml拡張の両方を提供しています。これら2つの方法の違いは、テキスト展開では文字列でHTMLエンコードが実行されることです。つまり、値がa < bに展開されると、結果はa < bになります。これは、URLsの文字列を構成する場合とは異なります。ユーザーにHTML拡張を使用させることもできますが、これはオーバーヘッドのみであり、{{{ }}}を使用する必要がある理由を説明するなど、より多くの問題を生成することをお勧めします。

このようなことを避けるために、{{ }}の使用時に値をエスケープしないようにMustacheが設定されています。つまり、{{ }}と{{{ }}}の両方が同じ動作をします。これにより、ユーザーが必要な場合の演習として結果のエンコーディングも残されます。

OOTB Mustacheモデル

Mustacheは、拡張用のテンプレートにモデルを適用する必要があります。前述の例では、{{#content.date}}はすでに初期状態で定義されていますが、{{person}}などの新しいプロパティは開発者が追加できます。ユーザーがモデルに存在しないMustacheテンプレートに値を入力すると、その結果は空の文字列になります。そのため、Hello {{person}}の場合、開発者がpersonをモデルに追加しないかぎりHello まで拡大されます。

使用するモデル・オブジェクトは、SCSMacrosというグローバル・オブジェクトです。開発者は、このオブジェクトにエントリを追加できます。テンプレートが評価されるときに、オブジェクトはMustacheに渡されます。

デフォルトのモデル・オブジェクトは、現在content.dateオブジェクトのみをサポートしています:

{   
   content: {
     date: <lambda implementation>
   }
}

カスタム・メジャー・モデル

サポートされているオブジェクトは、その要件に基づいて開発者が拡張できます。そのため、lastTwoDaysオブジェクトを導入して、拡張を{{lastTwoDays}}のみに単純化できます。

前述の例のHello {{person}}のようなものをサポートするようにモデルを拡張するには、personオブジェクトをSCSMacrosに追加する必要があります。ページを実行する前に、これを行う必要があります。ページ・レイアウト内でスクリプト・タグを追加するには、その先頭にスクリプト・タグを追加します。たとえば:

<script type="text/javascript">
window.SCSMacros = window.SCSMacros || {};  // define/get the SCSMacros object
window.SCSMacros.person = "World";
</script>

この変更を行った後、Hello {{person}}テンプレートは次のように展開されます: Hello World。

オブジェクト(たとえば、Hello {{#person}}personId{{/person}})に値を渡す場合は、mustache lambdaを実装し、実装内で値をラップおよび展開する必要があります。

たとえば:

<script type="text/javascript">
window.SCSMacros = window.SCSMacros || {};  // define/get the SCSMacros object
//implement "person" as a lambda
window.SCSMacros.person = function () {
  var people = { '111': { firstName: 'Small', lastName: 'World'}, '222': { firstName: 'Big', lastName: 'Universe'} };  
  return function (text, render) {     
     var expandedText = render(text);
     var chosenPerson = people[expandedText] || people['111'];      
     return chosenPerson.firstName;
  }
};
</script>

変更が行われると、Hello {{#person}}111{{/person}}テンプレートはHello Smallまで展開し、Hello {{#person}}222{{/person}}テンプレートはHello Bigまで展開されます。

ノート:

ムスタンチェ拡張は同期的に実行されます。非同期値を取得する必要がある場合は、これらの値をモデル内で解決した後に、拡張する必要があります。ただし、これは現在サポートされていません。ただし、最善の実装が可能です。