JSS for Vue.jsが提供するフィールドヘルパーコンポーネント

Version:

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

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

JSS for Vue.jsは、Sitecoreフィールド値のレンダリングに役立つヘルパーコンポーネントを提供します。

sitecore-jss-vueから公開されるヘルパーコンポーネントは、通常はステートフルコンポーネントであるPlaceholderを除いて、ステートレスな機能コンポーネントです。

Vue.jsの属性継承に従って、コンポーネントに渡されるプロパティ以外の属性は、外側のタグにHTML属性としてレンダリングされます。コンポーネントに渡されたイベントも伝播されます。

メモ

sitecore-jss-vueから公開されるヘルパーコンポーネントは、app.component()などのメソッドを使用してグローバルに登録されません。これは、グローバルなコンポーネント空間を汚染しないように、またWebpackやRollupなどのバンドルツールのツリーシェイク機能に合わせるために意図的なものです。したがって、使用するヘルパーコンポーネントを独自のコンポーネントでローカルに要求/インポートする必要があります。

以下は、サポートされているすべてのフィールドヘルパーコンポーネントのリストと、それらの使用方法の例です。次の例では、フィールドデータはプレースホルダコンポーネントによって提供されます。

テキスト

<template>
  <sc-text tag="h1" :field="fields.title" />
</template>
<script>
import { Text } from '@sitecore-jss/sitecore-jss-vue';
export default {
  props: {
    fields: Object
  }
  components: {
    ScText: Text
  }
};
</script>

次の表では、入力プロパティについて説明します。

名前	形容	デフォルト
field	レンダリングするフィールド。通常、Sitecoreフィールドタイプは 1行テキストまたは複数行テキストのいずれかですが、数値タイプを使用することもできます。	-
tag	テキスト値を折り返すHTML要素の名前。	span
editable	エディターを使用するか、Sitecore形式のHTML出力を使用するかを示します。	true
encode	出力値のHTMLエンコードを有効または無効にします。falseの値は、editable: falseも意味します。	true

複数行テキストの場合、指定された編集可能な値では、改行はすべて <br />に置き換えられます。編集不可能な値を使用する場合は、field.valueを処理してJSONの改行を目的のマークアップに置き換えるか、pre-wrapなどのCSS空白値を使用できます。

リッチテキスト

<template>
  <sc-rich-text tag="div" :field="fields.text" />
</template>
<script>
import { RichText } from '@sitecore-jss/sitecore-jss-vue';
export default {
  props: {
    fields: Object
  }
  components: {
    ScRichText: RichText
  }
};
</script>

次の表では、入力プロパティについて説明します。

名前	形容	デフォルト
field	レンダリングするフィールド。Sitecoreリッチテキストタイプである必要があります。	-
tag	リッチテキスト値をラップするHTML要素名。	div
editable	エディターを使用するか、Sitecore形式のHTML出力を使用するかを示します。	true

画像

画像コンポーネントは、srcSet属性に属性として指定されている場合、その属性に特別な処理を提供します。 srcSetの各要素のクエリ文字列パラメータを表すオブジェクトの配列を指定できます。これにより、sizesプロパティと組み合わせると、サーバー側レンダリングでレスポンシブイメージが可能になります。

<template>
  <sc-image :media="fields.image" />
</template>
<script>
import { Image } from '@sitecore-jss/sitecore-jss-vue';
export default {
  props: {
    fields: Object
  }
  components: {
    ScImage: Image
  }
};
</script>

次の表では、入力プロパティについて説明します。

名前	形容	デフォルト
media	レンダリングするルートフィールド。Sitecoreイメージタイプである必要があります。	-
editable	Sitecore形式の出力を使用する必要があるかどうかを示します。	true
imageParams	画像URLに追加するクエリ文字列パラメーター。手記 JSSはメディアURLのセキュリティハッシュをサポートしていないため、これらのパラメーターセットはサーバー上でホワイトリストに登録する必要があります。	-

リンク

<template>
  <sc-link :field="fields.link" />
</template>
<script>
import { Link } from '@sitecore-jss/sitecore-jss-vue';
export default {
  props: {
    fields: Object
  }
  components: {
    ScLink: Link
  }
};
</script>

次の表では、入力プロパティについて説明します。

名前	形容	デフォルト
field	レンダリングするルートフィールド。Sitecoreの一般リンクタイプである必要があります。	-
editable	エディターを使用するか、Sitecore形式のHTML出力を使用するかを示します。手記 Sitecoreからの編集可能な出力を使用する場合、LinkはSitecoreが提供するマークアップの周囲にラッパースパンを作成し、このスパンにホスト要素属性を適用します。	true

ファイル

<template>
  <sc-file :field="fields.file" />
</template>
<script>
import { File } from '@sitecore-jss/sitecore-jss-vue';
export default {
  props: {
    fields: Object
  }
  components: {
    ScFile: File
  }
};
</script>

次の表では、入力プロパティについて説明します。

名前	形容
field	レンダリングするルートフィールド。Sitecoreファイルタイプである必要があります。

大事な

Fileフィールドは、Sitecoreのエクスペリエンスエディターでのインライン編集をサポートしていませんが、コンポーネントのデフォルトのフィールドエディターを使用して編集できます。

日付

<template>
  <sc-date :field="fields.date" :formatter="formatDate" />
</template>
<script>
import { Date } from '@sitecore-jss/sitecore-jss-vue';
export default {
  props: {
    fields: Object
  }
  components: {
    ScDate: Date
  },
  methods: {
    formatDate(date) {
      return date && date.toISOString();
    }
  }
};
</script>

次の表では、入力プロパティについて説明します。

名前	形容	デフォルト
field	レンダリングするフィールド。Sitecoreの日付タイプである必要があります。	-
tag	日付値をラップするHTML要素の名前。	span
editable	エクスペリエンスエディター/Sitecore形式のHTML出力を使用する必要があるかどうかを示します。	true
formatter	解析されたJavaScript Dateオブジェクトとしてフィールド値を受け取り、コンポーネントのラッピングtagでレンダリングする値を返す関数	-

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