XM Cloud で Tailwind CSS のサンプルサイトを作成 - その２ XM Cloud に展開する
前回は XM Cloud のプロジェクトのテンプレートを利用して、GitHub にリポジトリの作成、ブランチの作成、そして Next.js の新しいプロジェクトを追加しました。今回はこれを XM Cloud に展開します。
ブログ
ブログの記事を時系列で確認することが出来ます
XM Cloud で Tailwind CSS のサンプルサイトを作成 - その１ 新規リポジトリの作成
これまでブログで紹介をしていた Tips を利用しながら、１つのサンプルに仕上げていきたいと思います。今回は Tailwind CSS を利用できるサンプルのベースを作っていきます。
XM Cloud で新しいプロジェクトを作成する
ブログでこれまで XM Cloud に関して取り上げてきましたが、プロジェクトの作成の画面なども機能強化されているため、改めて最新の画面で CMS を作成していきます。
Sitecore 10.4 と Headless SXA が利用できる Docker イメージについて
以前に Sitecore 10.3 と Headless SXA を利用できる Docker イメージを紹介していましたが、10.4 がリリースされたのでイメージをアップデートしておきました。
Sitecore 10.4 がリリースされました
ブログのリニューアルで更新を停止している間に、Sitecore 10.4 がリリースされました。細かい情報はリリースノートに任せますが、10.4 に関するポイントを紹介します。
ブログのリニューアルをしました
しばらくブログの更新をしていませんでしたが、本日から新しいブログのスタイルに切り替えました。更新したポイントを改めて紹介をします。
Rendering Contents Resolvers の動作確認
今回は Sitecore XM / XM Cloud で提供している便利な機能、Rendering Contents Resolvers について取り上げます。レンダリングの定義で複数の定義が用意されており、これを活用することで効率よくコンポーネントを作成することができます。
NextUI を利用できるようにする
すでに手元で動かしているサンプルは Tailwind.css を利用していますが、もう一歩進んで NextUI を今回は適用したいと思います。これは Next.js を提供している Vercel が提供しているユーザーインターフェイスツールとなります。
Bring own your component のサンプルコードを確認
前回はサンプルのコードを配置して動かすところまで進めていきました。今回は、どういうコードの記述が必要か、データはどういう形で持つのか？などを確認していきたいと思います。
Bring own your component でコンポーネントを追加する
これまでブログでは Headless SXA の仕組みで登録をするコンポーネント、Sitecore Components を利用してノーコードで作成するコンポーネントを紹介しました。今回はこれと違って、コンポーネントを持ち込む、という感じの実装を紹介します。
Sitecore Components のコンテンツを Sitecore のアイテムと連携させる
前回はコンポーネントに画像、テキストを固定で作成してページに貼り付けましたが、今回は独自のテンプレートを追加して、そのデータを利用してコンポーネントのレンダリングをしたいと思います。
Sitecore Components で簡単なコンポーネントを作成する
以前に新しくリリースをした Sitecore Components に関して紹介をしましたが、今回は簡単なコンポーネントを作成してみたいと思います。