Scriban テンプレートの組み込み関数
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
このトピックでは、Scriban テンプレートの Sitecore 埋め込み関数について説明します。
sc_decorate
Creative Exchange に必要なスタイル、グリッド クラス、および属性を持つコンポーネントの装飾を返します。
このヘルパー関数は、MVC Razor ビューの @Html.Sxa().Component()
ヘルパー関数に相当します。この関数を使用して、Scriban テンプレートのマークアップを制御できます。この関数を使用すると、Razor ビューがほぼ空になる場合があります。レンダリング バリアント機能を呼び出し、sc_decorate
ヘルパー関数を埋め込むことで、レンダリング パラメーターでユーザーが選択したスタイルやグリッド クラスを追加できます。
パラメーター
タイプ |
任意 |
例 |
目的 |
---|---|---|---|
|
はい |
|
コンポーネントの装飾にクラスを追加します。 |
例
次の例は、マークアップを提供せずにレンダリング プロセスをバリアントに完全に委任するように 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">
sc_editframe と sc_endeditframe
HTML の領域の周りに編集フレームをレンダリングし、その領域内のコンテンツをユーザーが編集しやすいように一連のエクスペリエンス ボタンを指定できるようにします。
パラメーター
タイプ |
任意 |
例 |
目的 |
---|---|---|---|
|
いいえ |
|
編集フレームがレンダリングされて、そのフィールドが編集できるようになるアイテム。 |
|
いいえ |
|
|
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 ) == "" && (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 }}
sc_evaluate
Scriban テンプレートの下に保存されているレンダリング バリアント ルールを評価し、ルールの実行結果に基づいて評価した値 (true または false) を返します。
パラメーター
タイプ |
任意 |
例 |
目的 |
---|---|---|---|
|
いいえ |
|
ルールが評価されるアイテム。 |
|
いいえ |
|
レンダリング プロセス中に評価されるレンダリング バリアント ルール (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>
sc_execute
Scriban テンプレートの下にあるレンダリング バリアント フィールドを実行します。
SXA では、追加のレンダリング バリアント フィールドを Scriban テンプレートの下に埋め込むことができます (レンダリング バリアント セクションなどと同様です)。ただし、sc_execute
で明示的に呼び出さない限り、レンダリングされません。
sc_execute i_item "Item below template"
を実行すると、その指示に従って、テンプレート エンジンは階層内のテンプレートの下にアイテムをレンダリングし、そのアイテムをsc_execute
関数がある場所に貼り付けます。
Scriban アイテムの下でコンポーネント バリアントを使用する場合、コンポーネントで複合コンポーネントやページネーション コンポーネントを使用することはできません。Sitecore は、Scriban テンプレートの下でもプレースホルダーのあるコンポーネントを使用しないことをお勧めします。これらのコンポーネントはページで正しくレンダリングされない可能性があるためです。
パラメーター
タイプ |
任意 |
例 |
目的 |
---|---|---|---|
|
いいえ |
|
レンダリング バリアントの要素が実行されるコンテキスト内のアイテム。 |
|
いいえ |
|
レンダリング バリアント フィールドの名前。 |
例
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>
sc_field
フィールドが空の場合にフォール バックできる Sitecore フィールドをレンダリングし、画像やリンクなどのタグにパラメーターを追加できるようにします。
パラメーター
タイプ |
任意 |
例 |
目的 |
---|---|---|---|
|
いいえ |
|
フィールドの値を取得する対象のアイテム。 |
|
いいえ |
|
レンダリングされるフィールドの名前。 または、フィールド名の配列を指定することもできます。この場合、関数はリストを左から右にチェックし、空でない最初のフィールドをレンダリングします。 エクスペリエンス エディターの編集モードでは、最初のフィールドは空であっても常に使用されます。 |
|
いいえ |
|
文字列の名前/値の配列。これにより、 |
例
たとえば、次のサンプル コードでは、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;iar=0&amp;w=50" alt="" width="50" height="50" data-purpose="Promo Icon">
次のパラメーターは、レンダリングされたフィールドで使用されます。その他すべてのパラメーターはデータ属性として使用されます。
パラメーター |
有効な値 |
デフォルト値 |
説明 |
---|---|---|---|
as |
true |
false |
元のサイズを超えて画像を拡大することを許可しますか? |
bc |
色の名前 (黒や赤など) および HTML の 16 進数カラー コード (CE55E2 など) |
黒 |
画像が元のサイズを超えて拡張されたときに、 |
db |
サイトで定義されている任意の Sitecore データベース。 |
現在のサイトのコンテンツ データベース |
画像を取得する元の Sitecore の名前。 |
dmc |
true |
false |
このリクエストのメディア キャッシュを無効にしますか? これが true の場合、画像は常にデータベースから取得され、メディア キャッシュはバイパスされます。 |
h |
任意の正の整数 |
画像の高さ。高さを元のサイズよりも大きくする場合は、 | |
la |
任意の有効な言語名 |
特定の言語バージョンのアイテムから画像を取得します。 | |
mh |
任意の正の整数 |
表示する画像の最大の高さ。必要に応じて、このサイズに画像を縮小します。 | |
mw |
任意の正の整数 |
表示する画像の最大の幅。必要に応じて、このサイズに画像を縮小します。 | |
sc |
ドットを小数点として使用する正の浮動小数点数 (150% に相当する 1.5 など) |
画像の表示倍率。画像を元のサイズよりも大きくする場合は、 | |
thn |
true |
false |
要求されたファイルのサムネイルを表示します。画像だけでなく、PDF やフラッシュなどの他のメディア タイプにも役立ちます。 |
vs |
任意の正の整数 |
特定のバージョンのアイテムから画像を取得します。 | |
w |
任意の正の整数 |
画像の幅。幅を元のサイズよりも大きくする場合は、 |
リンク レンダラーの例
リンク レンダラーでは、リンク フィールド レンダラーと同様に、必要に応じて属性を追加できます。次の例では、PromoLink
ターゲット アイテムのタイトルを使用して、ARIA アクセシビリティ ラベルをリンクに追加しています。
{{ sc_field i_item 'PromoLink' [['aria-label', (i_item.PromoLink.Title.raw)]] }}
上の例では、次の HTML を生成できます。
<a href="/Page" aria-label="Page Title">Page</a>
sc_follow
フィールドから選択されたアイテムを返し、アイテムへのリンクを保存します。フィールドに複数のアイテムへのリンクを含まれている場合、リストの最初のアイテムが返されます。フィールドが空の場合、関数は null 値を返します。
パラメーター
タイプ |
任意 |
例 |
目的 |
---|---|---|---|
|
いいえ |
|
フィールドの値を取得する対象のアイテム。 |
|
いいえ |
|
アイテムにリンクするフィールドの名前。 |
より短い i_item.target
という表記も使用できます。この場合、i_item.target
は “.”、","、空白などの特殊文字を含むフィールドへのリンクを許可しないことに注意してください。
例
Promo コンポーネントからリンクされた製品に関する詳細をレンダリングする例は次のとおりです。
<h2>{{ sc_follow i_item "Promo Link" | sc_field "Title" }}</h2>
sc_followmany
アイテムへのリンクを保存できるフィールドで選択されているアイテムの配列を返します。フィールドが空の場合、関数は空のリストを返します。
パラメーター
タイプ |
任意 |
例 |
目的 |
---|---|---|---|
|
いいえ |
|
フィールドの値を取得する対象のアイテム。 |
|
いいえ |
|
アイテムにリンクするフィールドの名前。 |
より短い 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 を返します。
パラメーター
タイプ |
任意 |
例 |
目的 |
---|---|---|---|
|
いいえ |
|
継承が実行されるコンテキスト内のアイテム。 |
|
いいえ |
|
テンプレートの 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 }}
sc_medialink
パラメーターとして指定されたアイテムにメディア URL 文字列を返します。アイテムが null
の場合、この関数は #
を返します。
関数のパラメーター
タイプ |
任意 |
例 |
目的 |
---|---|---|---|
|
いいえ |
|
リンクを生成する対象のメディア アイテム。 |
より短い i_item.media_url
という表記も使用できます。この場合、 “.”、","、空白などの特殊文字を含むフィールドへのリンクを許可されないことに注意してください。
<a download href="{{ sc_follow i_datasource 'PromoIcon' | sc_medialink }}">{{ i_datasource.PromoIcon.name }}</a>
sc_link
パラメーターとして指定したアイテムに URL 文字列を返します。アイテムが null
の場合、この関数は #
を返します。
パラメーター
タイプ |
任意 |
例 |
目的 |
---|---|---|---|
|
いいえ |
|
リンクを生成する対象のアイテム。 |
より短い i_item.url
という表記も使用できます。この場合、 “.”、","、空白などの特殊文字を含むフィールドへのリンクは許可されないことに注意してください。
例
データ ソース アイテムの Display name
をリンクのテキストとして使用し、Data Source コンポーネントへのリンクをレンダリングします。
<a href="{{ sc_link i_datasource }}">{{ i_datasource.display_name }}</a>
sc_parameter
レンダリング パラメーター値を取得します。
パラメーター
タイプ |
任意 |
例 |
目的 |
---|---|---|---|
|
いいえ |
|
値を取得する対象のパラメーターの名前。 |
<div>This rendering is in the '{{ sc_parameter 'Placeholder' }}' placeholder.<div>
sc_placeholder
オプションのコンテキスト スイッチを使用してプレースホルダーをレンダリングします。
パラメーター
タイプ |
任意 |
例 |
目的 |
---|---|---|---|
|
いいえ |
|
プレースホルダー キー。 |
|
はい |
|
コンテキストを切り替える先のオプションのアイテム。 アイテムが指定されている場合、プレースホルダー内のコンポーネントは、 |
例 1
次の例は、動的 SXA プレースホルダーをレンダリングする方法を示しています。
{{ sc_placeholder "mydynamic*" }}
例 2
次の例は、動的 SXA プレースホルダーをレンダリングし、そのコンテキストを関連する i_product
アイテムに切り替える方法を示しています。プレースホルダー内のコンポーネントは、i_product
ページにレンダリングされたかのように動作します。
{{
i_product = i_page.RelatedProducts.target
sc_placeholder "relatedproducts*" i_product
}}
sc_query
Sitecore クエリを実行し、結果のアイテムを配列として返します。
パラメーター
タイプ |
任意 |
例 |
目的 |
---|---|---|---|
|
いいえ |
|
クエリが実行されるコンテキスト内のアイテム。 |
|
いいえ |
|
実行するクエリ。 |
例
{{ for i_child in (sc_query i_page 'query:./*') }}
<h1>{{ i_child.Title }}</h1>
{{end}}
sc_raw
アイテムからフィールドの Raw 値を取得します。
パラメーター
タイプ |
任意 |
例 |
目的 |
---|---|---|---|
|
いいえ |
|
フィールドの値を取得する対象のアイテム。 |
|
いいえ |
|
取得するフィールドの名前。 |
例
<h1>{{ sc_raw i_page "Title" }}</h1>
sc_search
コンテンツ検索クエリを実行します。
パラメーター
タイプ |
任意 |
例 |
目的 |
---|---|---|---|
|
いいえ |
|
フィールドの値を取得する対象のアイテム。 |
|
いいえ |
|
検索結果を現在のページなどに限定します。 |
|
はい |
|
表示する結果の量を入力します。 |
|
はい |
|
スキップする結果の量を入力します。 |
例
{{
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
}}
sc_translate
入力文字列と、ページがレンダリングされる現在の言語に従ってテキストを返します。翻訳は、サイト アイテムのルートにあるディクショナリに保存されます。
パラメーター
タイプ |
任意 |
例 |
目的 |
---|---|---|---|
|
いいえ |
|
サイト ディクショナリからのキー。 |
|
はい |
|
要求コンテキストから言語を取得せずに、テキストを特定の言語に強制的に翻訳する言語コードを指定します。 |
<button class="button cancel">{{ sc_translate 'Cancel' }}</button>