前端

Scribanテンプレート

Version:

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

ScribanテンプレートはSXAレンダリングバリアントに保存され、追加のレンダラーとして使用できます。たとえば、フィールドレンダラー、セクション、タグなどです。Scribanテンプレートは他のレンダラーと共存できますが、既存のレンダリングバリアントを置き換えるために使用することもできます。

How to access the Scriban command from the content tree.

大事な

ScribanテンプレートをSXAコンポーネントのレンダリングバリアントとして使用する場合、スタイルが壊れないように、Scribanテンプレートと適用されたテーマ内のすべてのHTML子要素を手動でスタイル設定する必要があります。

Scribanテンプレートは、Creative Exchangeを使用してエクスポートおよびインポートできます。これにより、フロントエンド開発者は、コンポーネントのマークアップと機能に対してはるかに柔軟性が増します。Scribanテンプレートは、単純なトークンのレンダリングから、コンポーネントの完全な代替の提供までさまざまです。たとえば、次のレンダリングバリアントは、ギャラリーコンポーネントのコンテンツをレンダリングします。

{{-
  if i_item.template_name == "Gallery Image"
    sc_editframe i_item 'Gallery Image' -}}
    <a class="field-image">
      <a title="{{ i_item.ImageTitle.raw }}" href="{{ i_item.Image.media_url }}">
      {{ i_item.Image }}
      </a>
    </a>{{
    sc_endeditframe
  end -}}

{{-
  if i_item.template_name == "Gallery Video"
    sc_editframe i_item 'Gallery Video'
    if (i_item.VideoID.raw ) == "" &&(i_item.VideoThumbnail.raw) == "" -}}
      <span>[Edit Gallery Video here]</span>{{
    else -}}
      <a title="{{i_item.VideoTitle.raw }}" href="http://www.youtube.com/watch?v={{ i_item.VideoID.raw }}">
      <img src="{{ o_model.thumbnail_url }}" alt="{{ i_item.VideoDescription.raw }}"
             data-title="{{ i_item.VideoTitle.raw }}" data-description="{{ i_item.VideoDescription.raw }}" ></img>
      </a>{{
    end
    sc_endeditframe
  end }}

この例では、項目テンプレートに基づいてHTMLコードの一部を条件付きでレンダリングする方法、レンダリングC# モデルにアクセスする方法、およびそのプロパティと項目プロパティを呼び出す方法を示します。また、コンポーネントの領域をEdit framesで囲み、編集エクスペリエンスを向上させます。

このセクションのトピックでは、ScribanテンプレートのSitecore拡張機能について説明します。

メモ

基礎となるテンプレート言語と組み込み関数に関する一般的なドキュメントは、Scriban GitHubリポジトリにあります。

Discover Sitecoreチャネルのこのビデオでは、Scribanの使用方法のデモを見ることができます。

この記事を改善するための提案がある場合は、お知らせください!