We’ve migrated our documentation to a new site, which means some URLs have changed.
Audience
Audience
Breadcrumbs

テンプレートとスタイル

コンテンツ テンプレート

 コンテキストに応じて、 "レンダリングテンプレート"という言葉はこの wiki では様々な意味を持っています。

  • cx.js に埋め込まれた simple templating language  を使った HTML要素

  • 上のようなテンプレートを含むHTMLファイル（と他のいくつかのもの）

  • 上のテンプレート言語を使用する内部HTMLフラグメントで構成される Cxenseのテンプレートオブジェクト

2014年4月より現在のコンテンツレコメンデーションのレコメンド方法に変わりました。現在、テンプレートファイルを使うよりも、テンプレートとスタイルオブジェクトを使用することを推奨しています。このページではテンプレートファイルを使った旧来のアプローチを説明しています。テンプレートファイルをテンプレートとスタイルオブジェクトに変換するのは容易です。CSSからスタイルオブジェクトを、（内部HTMLの）テンプレート要素からテンプレートオブジェクトを作成するだけです。

テンプレート・オブジェクト

テンプレート・オブジェクト（template object）では、 simple templating language を使ってレコメンデーション結果をHTMLに変換する設定します。テンプレート・オブジェクトは、Cxense Content User Interfaceで管理することができます。また、同様の管理を Cxense Content API を利用して行うこともできます。新規のテンプレート・オブジェクトを作成した際に、下記のコードが初期設定されています。このコードをカスタマイズすることでご要望の表示を行うことができます。

<!--%
var items = data.response.items;
for (var i = 0; i < items.length; i++) {
  var item = items[i];
  %-->
  <div class="item">
    <a class="allclick" tmp:id="{{cX.clickTracker(item.click_url)}}" tmp:href="{{item.url}}" tmp:target="_top">
      <!--%
      cX.renderContainedImage({
        container: { width: 321, height: 160 },
        image: { src: item.dominantthumbnail, dimensions: item.dominantthumbnaildimensions }
      });
      %-->
      <h3>{{item.title}}</h3>
    </a>
  </div>
  <!--%
}
%-->

 

各レコメンデーションアイテムに対して、div エレメントを作成するために、 templating language を利用しています。

Helper function: clickTracker

cX.clickTrackerを使って、アンカー要素にIDを設定します。

これにより、レコメンデーションのリンクをクリックしたユーザーは item.url に直接ではなく、 item.click_url から item.url にリダイレクトされるようになります。これにより Cxense でクリックのトラッキングが可能になりますので、この記述は非常に重要です。

Helper function: renderContainedImage 

cX.renderContainedImage は、画像描画時のヘルパー関数 で説明されています。つまり、サイズとアスペクト比の違いを扱うために、（簡易なimgタグの代わりに）この関数を使います。この関数を利用するには自然に見えそうなスタイルではなく、テンプレート内のコードにディメンジョンの指定をしなければなりません。

また、指定されたレコメンデーションのアイテムに使用可能なフィールドはコンテンツコンフィグレーションの 'resultFields'として指定されたフィールドのサブセットでなければなりません。
あるフィールドを持つレコメンデーションだけを表示したい場合、設定でカスタムの 'filter' パラメータを使って指定する必要があります。

スタイルオブジェクト

コンテンツ・ウィジェットに対して、CSSが定義されているスタイル・オブジェクト（style object）を設定します。 スタイルオブジェクトは、、Cxense Content User Interfaceで管理することができます。新規のスタイル・オブジェクトを作成した際に、簡易コードが初期設定されています。このコードをカスタマイズすることでご要望のスタイルを設定することができます。

Last updated: