Pages で Partial design を作成する - ヘッダーの作成
コンポーネントに関しては、また後日カスタムで作る部分を紹介しますが、もう少しページっぽい感じで紹介をしていきたいので、今回はヘッダーを作成したいと思います。
ブログ
このサイトでブログを提供しています。
作成したコンポーネントで多言語対応を実装する
前回作成をしたパンくずリストのコンポーネントですが、多言語の時の動作はどういう動きをするでしょうか？今回はその部分も想定したコンポーネントに更新していきます。
パンくずリストのコンポーネントを作成する
前回の LinkList の動作を応用して、今回はパンくずリストのコンポーネントを作ってみたいと思います。
LinkList コンポーネントの動作を確認する
今回は Headless SXA のコンポーネントである LinkList コンポーネントがどのように定義されているのか、確認をしていきます。
強化された Pages のリッチテキストエディターの UI を利用できるようにする
リッチテキストエディターを利用する際に、右側に対象となる項目を表示する形となっていましたが、Pages の新しい仕組みを利用することでより使いやすくなります。今回はそれの手順を紹介します。
ColumnSplitter のコンポーネントを tailwind.css で利用できるようにする
今回は Tailwind.css で利用される Flex を利用して横 Column Splitter （横に分割する）部分のコンポーネントに関して紹介をして行きます。
Pages で利用できるスタイルの動作確認
コンポーネント別のスタイルシートの適用を確認できましたが、Pages で利用可能なスタイルの仕組みがあります。これに関しての動作を確認していきます。
XM Cloud の Starter Kit に Tailwind.css のスタイルを適用する
Basic site は Bootstrap 5 で動作していますが、しばらくは Tailwind.css で動くよう手順を確認していきます。これによりデフォルトの動作に関して、確認していくことができます。今回はスタイルの適用です。
XM Cloud が提供しているグリッドの動作を確認する
以前に XM Cloud で利用する Next.js のグリッドの仕組みに関して少し取り上げましたが、動作に関して紹介をしていませんでした。今回はこれを取り上げたいと思います。
XM Cloud のレイアウト処理を確認する
XM Cloud で提供している Next.js をベースにした SDK に関して、実際にどういう動きをしているのか？というのを簡単に取り上げてみたいと思います。今回は、レイアウト編です。