1. Scribanテンプレート

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

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

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

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

sc_decorate

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

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

パラメーター

種類

随意

目的

string

はい

'hero promo'

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

次の例は、マークアップを提供せず、レンダリング プロセスをバリアントに完全に委任するようにRazorビューを変更した場合に、Promoコンポーネントに使用できるScribanテンプレートを示しています。このマークアップを使用したテンプレート出力は、Default 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の領域の周囲に編集フレームをレンダリングし、ユーザーがその領域内のコンテンツを編集するのに役立つ一連のエクスペリエンス ボタンを指定できます。

パラメーター

種類

随意

目的

Item

いいえ

i_item

編集フレームがレンダリングされるアイテムで、そのフィールドの編集が可能になります。

string

いいえ

'Gallery Image'

coreデータベース内の/sitecore/content/Applications/WebEdit/Edit Frame Buttons/パスの下にあるEdit Frameフォルダ項目の名前。

sc_endeditframeパラメータが含まれておらず、ラップされた編集フレームの周囲の領域を閉じるために使用されます。

次の例では、編集フレームを含むDefaultギャラリー コンポーネントのレンダリング バリアントをレプリケートします。デフォルト設定の場合は、次の場所に移動します。 /sitecore/system/Settings/Foundation/Experience Accelerator/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 }}

sc_evaluate

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

パラメーター

種類

随意

目的

Item

いいえ

i_item

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

string

いいえ

'Responsive Image'

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

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

<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"を実行すると、テンプレートエンジンに対して、階層内のItem below templateをレンダリングし、sc_execute関数がある場所に貼り付けるように指示します。

メモ

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

パラメーター

種類

随意

目的

item

いいえ

i_item

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

string

いいえ

'Responsive Image'

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

Scribanテンプレートでレスポンシブ画像レンダラーをレンダリングするには、Scribanタイプのレンダリングバリアントフィールドをレンダリングバリアントに追加します。たとえば、プロモーションコンポーネントのバリアントを作成し、Responsive Promoという名前を付けます。タイプScribanのレンダリング バリアント フィールドを追加し、Templateという名前を付けます。その後、レスポンシブ画像タイプのレンダリングバリアントフィールドを追加した場合、次のコードをTemplate rendering variant fieldに貼り付けると、レスポンシブ画像レンダラーがレンダリングされます。

<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フィールドをレンダリングします。

パラメーター

種類

随意

目的

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' にフォールバックします。

リンクフィールドと画像フィールドの書式設定とデータ属性

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

イメージ レンダラーの例

次の例では、高さと幅が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">

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

パラメーター

法的価値

既定値

形容

として

画像を元のサイズを超えて引き伸ばすことができますか?

紀元前

カラー名 (黒や赤など) とHTML 16進数カラー コード (CE55E2など)

黒い

画像が元のサイズ(およびallowStretch=false)を超えて引き伸ばされたときに追加される境界線の背景色。

DB

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

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

イメージを取得するSitecoreの名前。

ディーエムシー

この要求のメディアキャッシュを無効にしますか?trueの場合、イメージは常にデータベースから取得され、メディア・キャッシュはバイパスされます。

h

任意の正の整数

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

任意の有効な言語名

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

MHさん

任意の正の整数

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

MWの

任意の正の整数

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

SCの

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

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

THN

要求されたファイルのサムネイルを表示します。画像だけでなく、PDF、Flashなどの他のメディアタイプにも便利です。

任意の正の整数

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

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>

sc_follow

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

パラメーター

種類

随意

目的

Item

いいえ

i_item

フィールドの値が取得されるアイテム。

string又は string

いいえ

'FieldName'

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

手記

短いi_item.target表記を使用することもできます。その場合は、i_item.targetでは、'.'、','、空白などの特殊文字を含むフィールドへのリンクをたどることができないことに注意してください。

プロモーションコンポーネントからリンクされた製品に関する詳細情報を表示するには:

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

sc_followmany

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

パラメーター

種類

随意

目的

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をリンクのテキストとして使用して、コンポーネントデータソースへのリンクをレンダリングします。

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

sc_parameter

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

パラメーター

種類

随意

目的

string

いいえ

ID

値が取得されるパラメータの名前。

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

sc_placeholder

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

パラメーター

種類

随意

目的

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
}}

sc_query

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

パラメーター

種類

随意

目的

Item

いいえ

i_item

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

string

いいえ

'query:./*'

実行するクエリ。

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

sc_raw

項目からフィールドの未処理の値を取得します。

パラメーター

種類

随意

目的

Item

いいえ

i_item

フィールドの値が取得されるアイテム。

string

いいえ

'FieldName'

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

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

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

パラメーター

種類

随意

目的

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
}}

sc_translate

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

パラメーター

種類

随意

目的

string

いいえ

key

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

string

はい

language

言語コードを指定して、要求コンテキストから言語を取得するのではなく、テキストを特定の言語に翻訳するように強制します。

<button class="button cancel">{{ sc_translate 'Cancel' }}</button>
この記事を改善するための提案がある場合は、 お知らせください!