Scriban テンプレートの組み込み関数

概要

Scriban 用の Sitecore 埋め込み関数について詳しく説明します。

このトピックでは、Scriban テンプレートの Sitecore 埋め込み関数について説明します。

Creative Exchange に必要なスタイル、グリッド クラス、および属性を持つコンポーネントの装飾を返します。

このヘルパー関数は、MVC Razor ビューの @Html.Sxa().Component() ヘルパー関数に相当します。この関数を使用して、Scriban テンプレートのマークアップを制御できます。この関数を使用すると、Razor ビューがほぼ空になる場合があります。レンダリング バリアント機能を呼び出し、sc_decorate ヘルパー関数を埋め込むことで、レンダリング パラメーターでユーザーが選択したスタイルやグリッド クラスを追加できます。

パラメーター

タイプ

任意

目的

string

はい

'hero promo'

コンポーネントの装飾にクラスを追加します。

次の例は、マークアップを提供せずにレンダリング プロセスをバリアントに完全に委任するように Razor ビューを変更した場合に、Promo コンポーネントに使用できる Scriban テンプレートを示しています。このマークアップを使用したテンプレート出力は、デフォルトの Promo バリアントと同じです。 例の最初の行で、sc_decorate 関数の使い方を確認できます。他の属性は、テンプレート内でタグに直接追加できます。

<div {{ sc_decorate "promo" }} role="banner">
    <div class="component-content">
        <div class="field-promoicon">
            {{ i_item.PromoIcon }}
        </div>
        <div class="promo-text">
            <div>
                <div class="field-promotext">
                    {{ i_item.PromoText }}
                </div>
            </div>
            <div class="field-promolink">
                {{ i_item.PromoLink }}
            </div>
        </div>
    </div>
</div>

最初の行は、訪問者に次のようにレンダリングされます。

<div class="component promo col-12" role="banner">

Creative Exchange でクラスの編集とスタイルのインポートを有効にするには:

<div class="component promo col-12 add-your-css-classes-here"
  data-pageid="{A25A4448-3319-4A52-93DE-B10A7A158DFD}"
  data-renderingid="{51C13F03-8364-4F61-B860-2EC6CA7439B3}"
  data-uniqueid="{8DED9C5D-5D8D-4C16-93A0-A78928B17656}"
  data-variantid="{D51080C1-C9A8-457A-88B1-EF3CF21DD6FF}"
  data-stylesfield="Styles"
  data-gridfield="GridParameters"
  data-renderingclass="promo"
  role="banner">

HTML の領域の周りに編集フレームをレンダリングし、その領域内のコンテンツをユーザーが編集しやすいように一連のエクスペリエンス ボタンを指定できるようにします。

パラメーター

タイプ

任意

目的

Item

いいえ

i_item

編集フレームがレンダリングされて、そのフィールドが編集できるようになるアイテム。

string

いいえ

'Gallery Image'

core データベース内の /sitecore/content/Applications/WebEdit/Edit Frame Buttons/ パスにある編集フレーム フォルダー アイテムの名前です。

sc_endeditframe は、パラメーターを含まず、ラップされた編集フレームを囲む領域を閉じるために使用します。

次の例では、Default の Gallery コンポーネントのレンダリング バリアントを編集フレームも含めてレプリケートします。デフォルト設定には次のパスでアクセスできます: /sitecore/システム/設定/Foundation/エクスペリエンス アクセラレーター/Rendering Variants/Rendering Variants/Gallery/Default

{{-
  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 ) == "" &amp;&amp; (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 }}

Scriban テンプレートの下に保存されているレンダリング バリアント ルールを評価し、ルールの実行結果に基づいて評価した値 (true または false) を返します。

パラメーター

タイプ

任意

目的

Item

いいえ

i_item

ルールが評価されるアイテム。

string

いいえ

'Responsive Image'

レンダリング プロセス中に評価されるレンダリング バリアント ルール (Scriban テンプレートの下に保存されている) の名前。

Scriban タイプのレンダリング バリアント フィールドをレンダリング バリアントに追加することで、Scriban テンプレートでパーソナライゼーション ルールをレンダリングできます。たとえば、Promo コンポーネントのバリアントを作成し、その名前を「パーソナライズされたプロモーション」とします。 Scriban タイプのレンダリング バリアント フィールドを追加し、その名前を「テンプレート」とします。次に、ルール タイプのレンダリング バリアント フィールドを追加し、テンプレート レンダリング バリアント フィールドに以下のコードを貼り付けると、パーソナライゼーション ルールがレンダリングされます。

<div class="promo-text">{{
  if sc_evaluate i_datasource "Personalization" -}}
    <div>
      This will be shown when the personalization rule will evaluate to TRUE
    </div>{{
  else -}}
    <div>
      This will be shown when the personalization rule will evaluate to FALSE
    </div>{{
  end -}}
</div>

Scriban テンプレートの下にあるレンダリング バリアント フィールドを実行します。

SXA では、追加のレンダリング バリアント フィールドを Scriban テンプレートの下に埋め込むことができます (レンダリング バリアント セクションなどと同様です)。ただし、sc_execute で明示的に呼び出さない限り、レンダリングされません。

sc_execute i_item "Item below template" を実行すると、その指示に従って、テンプレート エンジンは階層内のテンプレートの下にアイテムをレンダリングし、そのアイテムをsc_execute 関数がある場所に貼り付けます。

注記

Scriban アイテムの下でコンポーネント バリアントを使用する場合、コンポーネントで複合コンポーネントやページネーション コンポーネントを使用することはできません。Sitecore は、Scriban テンプレートの下でもプレースホルダーのあるコンポーネントを使用しないことをお勧めします。これらのコンポーネントはページで正しくレンダリングされない可能性があるためです。

パラメーター

タイプ

任意

目的

item

いいえ

i_item

レンダリング バリアントの要素が実行されるコンテキスト内のアイテム。

string

いいえ

'Responsive Image'

レンダリング バリアント フィールドの名前。

Scriban タイプのレンダリング バリアント フィールドをレンダリング バリアントに追加することで、Scriban テンプレートで応答性の高い画像レンダラーをレンダリングできます。たとえば、Promo コンポーネントのバリアントを作成し、その名前を「応答性の高いプロモ」とします。Scriban タイプのレンダリング バリアント フィールドを追加し、その名前を「テンプレート」とします。次に、応答性の高い画像タイプのレンダリング バリアント フィールドを追加し、テンプレート レンダリング バリアント フィールドに以下のコードを貼り付けると、応答性の高い画像のレンダラーがレンダリングされます。

<div class="field-promoicon">
    {{ sc_execute i_item.PromoIcon.target "Responsive Icon" }}
</div>
<div class="promo-text">
    <div>
        <div class="field-promotext">
            {{ i_item.PromoText }}
        </div>
    </div>
    <div class="field-promolink">
        {{ i_item.PromoLink }}
    </div>
</div>

フィールドが空の場合にフォール バックできる Sitecore フィールドをレンダリングし、画像やリンクなどのタグにパラメーターを追加できるようにします。

パラメーター

タイプ

任意

目的

Item

いいえ

i_item

フィールドの値を取得する対象のアイテム。

string または string[]

いいえ

'FieldName'

レンダリングされるフィールドの名前。

または、フィールド名の配列を指定することもできます。この場合、関数はリストを左から右にチェックし、空でない最初のフィールドをレンダリングします。

エクスペリエンス エディターの編集モードでは、最初のフィールドは空であっても常に使用されます。

string[][]

いいえ

[['attribute1','value1'], ['attribute2','value2']]

文字列の名前/値の配列。これにより、LinkImage など、フィールドのフィールド レンダラーに追加のパラメーターを指定できます。

たとえば、次のサンプル コードでは、sc_field 関数を呼び出してアイテムにフィールドをレンダリングします。

{{ sc_field i_page 'Title' }}

フィールド フォールバックの例

値を入力するためのフィールドを作成者に提供し、作成者が値を入力しなかった場合でもそのフィールドが空でないことを確認する場合は、sc_field 関数で提供されるフィールド フォールバック機能を使用できます。

{{ sc_field i_page ['NavigationTitle', 'Title', '__Display Name'] }}

テンプレート エンジンは、'NavigationTitle' のレンダリングを試行して、その中に値が見つからない場合、'Title' フィールドに移動して試行を返し、それにも失敗すると、最終的に '__Display Name' にフォール バックします。

リンク フィールドと画像フィールドのフォーマットとデータ属性

リンクまたは画像のレンダリング フィールドのデフォルトのレンダリング動作を強化する場合、次の例に示すように、追加の名前/値コレクションを指定し、これを 3番目のパラメーターとして Sitecore フィールド レンダラーに渡すことができます。

画像レンダラーの例

次の例では、高さと幅を 50 に設定し、追加のデータ属性 data-purpose を使用して画像をレンダリングします。

{{ sc_field i_item 'PromoIcon' [['h', '50'], ['w', '50'], ['data-purpose', 'Promo Icon']] }}

上のコードにより、次の HTML がページにレンダリングされます。

<img src="/-/media/MyImage.jpg?h=50&amp;amp;iar=0&amp;amp;w=50" alt="" width="50" height="50" data-purpose="Promo Icon">

次のパラメーターは、レンダリングされたフィールドで使用されます。その他すべてのパラメーターはデータ属性として使用されます。

パラメーター

有効な値

デフォルト値

説明

as

true

false

元のサイズを超えて画像を拡大することを許可しますか?

bc

色の名前 (黒や赤など) および HTML の 16 進数カラー コード (CE55E2 など)

画像が元のサイズを超えて拡張されたときに、allowStretch=false である場合に、追加される境界線の背景色。

db

サイトで定義されている任意の Sitecore データベース。

現在のサイトのコンテンツ データベース

画像を取得する元の Sitecore の名前。

dmc

true

false

このリクエストのメディア キャッシュを無効にしますか? これが true の場合、画像は常にデータベースから取得され、メディア キャッシュはバイパスされます。

h

任意の正の整数

画像の高さ。高さを元のサイズよりも大きくする場合は、as=true を含める必要があります。

la

任意の有効な言語名

特定の言語バージョンのアイテムから画像を取得します。

mh

任意の正の整数

表示する画像の最大の高さ。必要に応じて、このサイズに画像を縮小します。

mw

任意の正の整数

表示する画像の最大の幅。必要に応じて、このサイズに画像を縮小します。

sc

ドットを小数点として使用する正の浮動小数点数 (150% に相当する 1.5 など)

画像の表示倍率。画像を元のサイズよりも大きくする場合は、as=true を含める必要があります。

thn

true

false

要求されたファイルのサムネイルを表示します。画像だけでなく、PDF やフラッシュなどの他のメディア タイプにも役立ちます。

vs

任意の正の整数

特定のバージョンのアイテムから画像を取得します。

w

任意の正の整数

画像の幅。幅を元のサイズよりも大きくする場合は、as=true を含める必要があります。

リンク レンダラーの例

リンク レンダラーでは、リンク フィールド レンダラーと同様に、必要に応じて属性を追加できます。次の例では、PromoLink ターゲット アイテムのタイトルを使用して、ARIA アクセシビリティ ラベルをリンクに追加しています。

{{ sc_field i_item 'PromoLink' [['aria-label', (i_item.PromoLink.Title.raw)]] }}

上の例では、次の HTML を生成できます。

<a href="/Page" aria-label="Page Title">Page</a>

フィールドから選択されたアイテムを返し、アイテムへのリンクを保存します。フィールドに複数のアイテムへのリンクを含まれている場合、リストの最初のアイテムが返されます。フィールドが空の場合、関数は null 値を返します。

パラメーター

タイプ

任意

目的

Item

いいえ

i_item

フィールドの値を取得する対象のアイテム。

string または string[]

いいえ

'FieldName'

アイテムにリンクするフィールドの名前。

注記

より短い i_item.target という表記も使用できます。この場合、i_item.target は “.”、","、空白などの特殊文字を含むフィールドへのリンクを許可しないことに注意してください。

Promo コンポーネントからリンクされた製品に関する詳細をレンダリングする例は次のとおりです。

<h2>{{ sc_follow i_item "Promo Link" | sc_field "Title" }}</h2>

アイテムへのリンクを保存できるフィールドで選択されているアイテムの配列を返します。フィールドが空の場合、関数は空のリストを返します。

パラメーター

タイプ

任意

目的

Item

いいえ

i_item

フィールドの値を取得する対象のアイテム。

string または string[]

いいえ

'FieldName'

アイテムにリンクするフィールドの名前。

注記

より短い i_item.targets という表記を使用できます。この場合、 “.”、","、空白などの特殊文字を含むフィールドへのリンクは許可されないことに注意してください。

現在の製品に関連する製品をレンダリング例は次のとおりです。

{{ for i_product in (sc_followmany i_page "Related Products") }}
  <h2>{{ sc_field i_product "Title" }}</h2>
  <b>Content</b>:{{ sc_field i_product "Content" }}
{{ end }}

sc_inheritsfrom

アイテム (最初のパラメーター) がテンプレート (2番目のパラメーター) から継承しているかどうかを確認し、true または false を返します。

パラメーター

タイプ

任意

目的

Item

いいえ

i_item

継承が実行されるコンテキスト内のアイテム。

string

いいえ

"{BB5A85AC-5DD7-4960-B1BD-FC3CC9271AC2}"

テンプレートの ID

{{ if sc_inheritsfrom i_item "{BB5A85AC-5DD7-4960-B1BD-FC3CC9271AC2}" }}
     <div>Yes, this item inherits from something</div>
{{ else }}
     <div style="color: red">Sorry, no...</div>
{{ end }}

パラメーターとして指定されたアイテムにメディア URL 文字列を返します。アイテムが null の場合、この関数は # を返します。

関数のパラメーター

タイプ

任意

目的

Item

いいえ

i_item

リンクを生成する対象のメディア アイテム。

注記

より短い i_item.media_url という表記も使用できます。この場合、 “.”、","、空白などの特殊文字を含むフィールドへのリンクを許可されないことに注意してください。

<a download href="{{ sc_follow i_datasource 'PromoIcon' | sc_medialink }}">{{ i_datasource.PromoIcon.name }}</a>

パラメーターとして指定したアイテムに URL 文字列を返します。アイテムが null の場合、この関数は # を返します。

パラメーター

タイプ

任意

目的

Item

いいえ

i_item

リンクを生成する対象のアイテム。

注記

より短い i_item.url という表記も使用できます。この場合、 “.”、","、空白などの特殊文字を含むフィールドへのリンクは許可されないことに注意してください。

データ ソース アイテムの Display name をリンクのテキストとして使用し、Data Source コンポーネントへのリンクをレンダリングします。

<a href="{{ sc_link i_datasource }}">{{ i_datasource.display_name }}</a>

レンダリング パラメーター値を取得します。

パラメーター

タイプ

任意

目的

string

いいえ

ID

値を取得する対象のパラメーターの名前。

<div>This rendering is in the '{{ sc_parameter 'Placeholder' }}' placeholder.<div>

オプションのコンテキスト スイッチを使用してプレースホルダーをレンダリングします。

パラメーター

タイプ

任意

目的

string

いいえ

'mykey*'

プレースホルダー キー。

Item

はい

i_item

コンテキストを切り替える先のオプションのアイテム。

アイテムが指定されている場合、プレースホルダー内のコンポーネントは、i_item にレンダリングされたかのように動作します。

例 1

次の例は、動的 SXA プレースホルダーをレンダリングする方法を示しています。

{{ sc_placeholder "mydynamic*"  }}

例 2

次の例は、動的 SXA プレースホルダーをレンダリングし、そのコンテキストを関連する i_product アイテムに切り替える方法を示しています。プレースホルダー内のコンポーネントは、i_product ページにレンダリングされたかのように動作します。

{{
  i_product = i_page.RelatedProducts.target
  sc_placeholder "relatedproducts*" i_product
}}

Sitecore クエリを実行し、結果のアイテムを配列として返します。

パラメーター

タイプ

任意

目的

Item

いいえ

i_item

クエリが実行されるコンテキスト内のアイテム。

string

いいえ

'query:./*'

実行するクエリ。

{{ for i_child in (sc_query i_page 'query:./*') }}
  <h1>{{ i_child.Title }}</h1>
{{end}}

アイテムからフィールドの Raw 値を取得します。

パラメーター

タイプ

任意

目的

Item

いいえ

i_item

フィールドの値を取得する対象のアイテム。

string

いいえ

'FieldName'

取得するフィールドの名前。

<h1>{{ sc_raw i_page "Title" }}</h1>

sc_search

コンテンツ検索クエリを実行します。

パラメーター

タイプ

任意

目的

Item

いいえ

i_item

フィールドの値を取得する対象のアイテム。

string query

いいえ

"+sxa:UnderCurrentPage"

検索結果を現在のページなどに限定します。

MaxNumberofResults

はい

5

表示する結果の量を入力します。

NumberToSkip

はい

0

スキップする結果の量を入力します。

{{ 
	foundItems = sc_search i_item "+sxa:UnderCurrentPage" 2 0
	if (foundItems.size > 0)
		for item in foundItems
			"<div style='font-size: 16px'>" + item.name + "</div>"
			"<div><i>" + item.id + "</i></div>"
                        "<br/>"
		end
	else
		"Sorry, no items found"
	end
}}

入力文字列と、ページがレンダリングされる現在の言語に従ってテキストを返します。翻訳は、サイト アイテムのルートにあるディクショナリに保存されます。

パラメーター

タイプ

任意

目的

string

いいえ

key

サイト ディクショナリからのキー。

string

はい

language

要求コンテキストから言語を取得せずに、テキストを特定の言語に強制的に翻訳する言語コードを指定します。

<button class="button cancel">{{ sc_translate 'Cancel' }}</button>