Bring own your component のサンプルコードを確認
前回はサンプルのコードを配置して動かすところまで進めていきました。今回は、どういうコードの記述が必要か、データはどういう形で持つのか？などを確認していきたいと思います。
ブログ
ブログの記事を時系列で確認することが出来ます
Bring own your component でコンポーネントを追加する
これまでブログでは Headless SXA の仕組みで登録をするコンポーネント、Sitecore Components を利用してノーコードで作成するコンポーネントを紹介しました。今回はこれと違って、コンポーネントを持ち込む、という感じの実装を紹介します。
Sitecore Components のコンテンツを Sitecore のアイテムと連携させる
前回はコンポーネントに画像、テキストを固定で作成してページに貼り付けましたが、今回は独自のテンプレートを追加して、そのデータを利用してコンポーネントのレンダリングをしたいと思います。
Sitecore Components で簡単なコンポーネントを作成する
以前に新しくリリースをした Sitecore Components に関して紹介をしましたが、今回は簡単なコンポーネントを作成してみたいと思います。
Shared Layout を利用して各言語でのレイアウトの共有
前回作成をしたパーシャルデザインに関しては英語のレイアウトで作成をしていきました。今回は、これを各言語に対して共通化して利用できるレイアウトを作成していきます。
Pagesで部分的なデザインを作成する - フッターを作成する
前回は左上にロゴが表示されるだけのヘッダーを作成しました。今回は、ナビゲーションコンポーネントを利用してフッターを作成していきたいと思います。
Pages で Partial design を作成する - ヘッダーの作成
コンポーネントに関しては、また後日カスタムで作る部分を紹介しますが、もう少しページっぽい感じで紹介をしていきたいので、今回はヘッダーを作成したいと思います。
作成したコンポーネントで多言語対応を実装する
前回作成をしたパンくずリストのコンポーネントですが、多言語の時の動作はどういう動きをするでしょうか？今回はその部分も想定したコンポーネントに更新していきます。
パンくずリストのコンポーネントを作成する
前回の LinkList の動作を応用して、今回はパンくずリストのコンポーネントを作ってみたいと思います。
LinkList コンポーネントの動作を確認する
今回は Headless SXA のコンポーネントである LinkList コンポーネントがどのように定義されているのか、確認をしていきます。
強化された Pages のリッチテキストエディターの UI を利用できるようにする
リッチテキストエディターを利用する際に、右側に対象となる項目を表示する形となっていましたが、Pages の新しい仕組みを利用することでより使いやすくなります。今回はそれの手順を紹介します。
ColumnSplitter のコンポーネントを Tailwind CSS で利用できるようにする
今回は Tailwind.css で利用される Flex を利用して横 Column Splitter （横に分割する）部分のコンポーネントに関して紹介をして行きます。