コードファーストのJSSアプリにおけるマニフェスト定義の追加
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
コンポーネントをスキャフォールディングする際、スクリプトを修正して機能を削除していなければ、JSSは新しいコンポーネントのマニフェスト定義を自動的に作成します。しかし、単にコンポーネントファイルを作成する場合は、Manifest APIインスタンスメソッドを使ってマニフェストアイテムに追加できます。また、Manifest APIインスタンスメソッドを使って 新しいルートタイプやその他のアイテムを登録 することもできます。
これらの方法は、sitecore/definitions/ ディレクトリにあるマニフェスト定義ファイルで使用します。ファイル名は慣例 *.sitecore.js|tsに従う必要があります。ここでアスタリスクはコンポーネント名(例: SearchBox.sitecore.js )やアイテムタイプ(例: placeholders.sitecore.js)を表します。
マニフェストAPIインスタンスメソッド
Manifest APIは、登録のための以下のインスタンスメソッドを提供しています:
- addComponent(...components: component) - JSSアプリのコンポーネント定義を登録します。
- addContent(...contents: content).
- addRoute(...routes: route) - アプリのルートデータ定義を追加します。
- addRouteType(...routeTypes: template) - ルート用のSitecoreテンプレートタイプを追加します。
- addTemplate(...templates: template).
- addPlaceholder(...templates: template) - マニフェストに仮の定義を追加します。
マニフェストオブジェクト
Manifest APIのインスタンスメソッドを使ってマニフェスト定義を追加する場合、定義は以下のスキーマに一致しなければなりません。
!ヒントJSタイピングを理解しているエディタ(VS Codeなど)を使うと、エディタ内のタイプ情報や役立つ注釈にアクセスできます。
コンポーネント
{ id: string
, name: string, displayName: string, fields: fields, params: params, placeholders: placeholders, // placeholders exposed by rendering allowedPlaceholders: arraystring, // placeholders component is allowed in (normally inferred by route data) displayFieldEditorButton: boolean = true, fieldEditorFields: arraystring = all fields, // field names customExperienceButtons: arraystring, // names or IDs insertOptions: arraystring, // template names or IDs graphQLQuery: string, // see GraphQL integrated documentation // note: while these use the same structure as a route, they do not use placeholders and are not mapped as routes. // This enables adding child items to the datasource. children: arrayroute }!注displayFieldEditorButtonとfieldEditorFieldsプロパティにより、Sitecoreエクスペリエンスエディターで自動的にコンポーネントに追加されるフィールドエディターボタンの挙動を制御できます。このボタンはポップアップフォームインターフェースですべてのコンポーネントデータを編集できます。デフォルトでは、すべてのコンポーネントにボタンが表示され、すべてのコンポーネントフィールドは編集可能です。もしこれが望ましい動作であれば、これらのプロパティを提供する必要はありません。
内容
コンテンツデータは ルートデータと同じスキーマを使用しますが、placeholdersプロパティは一般的に使われません。なぜなら影響が出ないからです。
フィールド
typeプロパティについては、利用可能なCommonFieldTypesの値のいずれかを使用することを推奨します。
{ name: string
, type: string|CommonFieldTypes, displayName: string, required: bool, // whether the field must have a value entered validationPattern: string, // regular expression (C#) to determine value validity validationMessage: string, // message shown when validationPattern fails standardValue: string, // the default value this field gets when a content editor creates a new item using it section: string, // Sitecore template section name source: string, // Sitecore template field source (field-type specific) sortOrder: int, // Template field sort order. Defaults to order defined in JSON. storage: string, // Sitecore field storage: versioned (default), unversioned, shared (DO NOT CHANGE AFTER IMPORTED) id: string }共通フィールドタイプ
{ SingleLineText: 'Single-Line Text', MultiLineText: 'Multi-Line Text', RichText: 'Rich Text', ContentList: 'Treelist', ItemLink: 'Droptree', GeneralLink: 'General Link', Image: 'Image', File: 'File', Number: 'Number', Checkbox: 'Checkbox', Date: 'Date', DateTime: 'Datetime', }
!注カスタムSitecoreフィールドタイプやCommonFieldTypes列挙に含まれていない他のタイプについては、Sitecoreのフィールドタイプ名の文字列(すなわち、Single-Line Text)を渡すことができます。VS Codeのような型注釈をサポートするエディタは、この列挙に自動補完を提供します。
パラム
{ name: string
}プレースホルダー
{ name: string
, displayName: string }プレースホルダー
{ placeholderName: arraycomponent
, // additional placeholder key/values can be added }ルート
{ id: string
, name: string, displayName: string, template: string, // note: this is optional in yaml/json as its defaulted before adding to manifest fields: fields, children: arrayroute, placeholders: placeholders, insertOptions: arraystring, }テンプレート
{ name: string
, displayName: string, inherits: arraystring, // names of JSS template(s) to inherit from, OR Sitecore item GUIDs for non-JSS templates fields: arrayfield, icon: string, // e.g. People/16x16/alarmclock.png defaultWorkflow: string // e.g. /sitecore/system/Workflows/Sample Workflow }場
{ fieldName: objectfieldName = field
// additional field key/values can be added, see the following }パラム
{ paramName: arraystring
, // additional param key/values can be added // note: all param values are provided to the component as strings, // even if the defined value is a number/boolean value. }imageFieldValue
画像フィールド値は、fieldが画像タイプである場合に使用されます。通常のフィールドと比べて追加の性質を持ちます。
{ id: string
, src: string, // src of image. Should be under /sitecore/media on the JSS app. alt: string, displayName: string, // media item display name title: string, // media item field keywords: string, // media item field description: string, // media item field width: int, height: int, class: string // rendered image CSS class}
linkFieldValue
リンクフィールド値は、fieldがリンクタイプである場合に使用されます。通常のフィールドと比べて追加の性質を持っています。
{ href: string
, text: string, // link body text class: string, // rendered css class target: string, // target attribute e.g. _blank title: string // title attribute of }// definition using an array of content items (routes without placeholders) route
// complete example including the top level fields (YAML): fields: multilistFieldName:
...
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
// or define it using ID references to shared content items (also YAML): fields: multilistFieldName:
- id: option-1
- id: option-2
...
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
日付フィールド値の扱い
マニフェスト内の日付フィールドの値は、例えば25
!注これはJavaScriptの日付形式であり、Sitecoreが内部で日付フィールド値を保存する方法とは異なります。Sitecore形式の日付は 動作しません。
マニフェスト定義の例
JSSアプリケーションを作成する際、アプリにはすでにいくつかのマニフェスト定義があります。最も一般的なマニフェスト定義は、アプリインポート時にSitecoreでプレースホルダーやコンポーネントを登録するためのものですが、ルートにフィールドを追加するなど他のユースケースでもマニフェスト定義を使うことができます。
プレースホルダー
マニフェスト内でプレースホルダーを明示的に定義することは任意です。ルートで参照される任意のプレースホルダー名は、マニフェストによって自動的に認識されます。しかし、プレースホルダーを明示的に登録することで、その名の プレースホルダー表示名 を設定でき、コンテンツ編集者がより親しみやすいものを見られるようにappname-content-leftside-upsidedown-2。
明示的なプレースホルダー定義は、/sitecore/definitions/placeholders.sitecore.jsファイルの一行です。名前の中 .sitecoreは必須です。
例えば:
import { addPlaceholder } from '@sitecore-jss/sitecore-jss-manifest';
export default (manifest) => { addPlaceholder(manifest, { name: 'appname-main', displayName: 'Main' }, { name: 'appname-content', displayName: 'Content' }); };
構成要素
ルートに追加された各フロントエンドコンポーネントを定義し、JSSがSitecore内でそのコンポーネントを登録し、必要なコンテンツを提供するための適切なインフラを提供できるようにします。
コンポーネント定義は通常、/sitecore/definitions/components/
/* NOTE: if you use an editor, such as VS Code, that reads typing data from imported libraries, you will receive code completion hints for the manifest definitions. */ import { addComponent } from '@sitecore-jss/sitecore-jss-manifest';
export default (manifest) => { addComponent(manifest, { // this name must match the name that is used to add the component to routes, // and the name used when the component JS implementation is registered to the componentFactory name: 'ConnectedPage', // you can use a friendly name for the component to be nice to your authors displayName: 'Connected Page', // define the content fields, and their data types, that are needed for the component fields: { name: 'title', type: manifest.fieldTypes.singleLineText }, { name: 'text', type: manifest.fieldTypes.richText }, { name: 'logoImage', type: manifest.fieldTypes.image }, , }); };
名前の付け .sitecoreは必須です。
CLIコマンドjss scaffold