Sitecore Components に関して、以前に紹介をしたことがありますが今回は3回に分けて新しいコンポーネントと CMS との連携に関して紹介をしていきたいと思います。
以前に紹介をした記事は以下の通りです。
- Sitecore Components のご紹介
- Sitecore Components で簡単なコンポーネントを作成する
- Sitecore Components のコンテンツを Sitecore のアイテムと連携させる
コンポーネントを作成する
今回はページのトップに配置する Hero バナーのエリアを作成してみたいと思います。まず新しいコンポーネントの作成の際には、空っぽのコンポーネントが表示されています。
まずコンポーネントテーマを確認します。コンポーネントの上にあるアイコンからテーマを選択することができます。下の画面は Light のテーマを選択しているのが分かります。
例えばダークのテーマに切り替えると、Card の表示も変わります。
今回はテーマを Light のテーマで進めていきます。まずカードを配置して、その中に Heading 4 でテキストを配置します。
続いて、このコンポーネントの背景画像を指定します。コンポーネント全体を指定しているときに、Background Image のところから画像を指定します。今回は固定の画像を指定します。
これで完成として、Stage の状態から Publish までワークフローを進めてコンポーネントの作成は完了です。
ページにコンポーネントを配置する
Pages のコンポーネント一覧を選択すると、以下のように作成をしたコンポーネントが表示されているのが分かります。
あとはこのコンポーネントを Drag & Drop で配置することで、作成をしたコンポーネントを Web サイトで利用できるようになります。
まとめ
今回は簡単なコンポーネントを作成して、ページに埋め込みをするところまで紹介をしました。今回はテキストや画像などを固定で記述していますが、このデータを CMS と連携させることができます。次回はそれを紹介したいと思います。