Headless SXA でデモサイトを構築する - Part 1 ページ、パーシャルデザイン、プレースホルダー
今回から Headless SXA を利用した簡単なページを作る際の基本的なポイントを数回に分けて紹介をしていきます。今回はパーシャルデザインとページの考え方、プレースホルダーをどういう風に活用するのか、という基本的な考え方を取り上げます。
ブログ
ブログの記事を時系列で確認することが出来ます
Sitecore 10.3 で Headless SXA を簡単に起動する
これまで数回に分けて Sitecore 10.3 のコンテナ環境、SXA の追加など手元で動かす方法を紹介してきました。毎回同じ手順を実施するのは大変なので、簡単に起動することができるリポジトリを作成しました。リポジトリを利用して起動する方法を今回は紹介します。
Next.js のプロジェクトを追加する
前回作成をしたヘッドレスのサイトはまだサイトコアのアイテムがあるだけとなっています。今回はこれに Next.js のプロジェクトを追加して、ページの編集ができるところまでの紹介をします。
ヘッドレスサイトを追加する
プロジェクトの作成、XM1 の環境整備、そして前回は SXA のモジュールのインストールをしました。今回はこのプロジェクトに対して、ヘッドレスのサイトを追加して、Next.js のプロジェクトと連携させていきます。手順が長くなるため、今回はヘッドレスのサイトを追加して、そのデータをいつでも再利用できるようにシリアライズができるところまで紹介をします。
日本語リソースの追加
すでに XM の環境が起動していますが、管理画面で表示される言語がデフォルトの英語になっています。今回は管理画面で日本語を利用することができるように、日本語のリソースを追加する手順を紹介していきます。
SXA のモジュールを追加する
前回は XM1 のインスタンスを起動することができました。今回は、Next.js のプロジェクトを追加するにあたって必要となる Sitecore Experience Accelerator のモジュールをコンテナで利用できる様に追加の設定をしていきます。
XM1 のプロジェクトを準備する
前回の記事でまずはテンプレートとなるプロジェクトを作成しました。今回は、一番シンプルな XM1 を実行するためのプロジェクトにするために、不要なものを削除、調整の手順を進めていきます。
新しいプロジェクトを作成する
新年あけましておめでとうございます。今年も Sitecore に関する技術的な情報をブログで提供していきたいと思います。実は Sitecore の技術情報は日本語で多く提供しているのですが、いざ始めるとなるとどこから手を付けていいのか悩ましいですよね。ということで、新年最初の投稿は、新しいプロジェクトをサクッと作るところを紹介します。
Sitecore XM Cloud 関連記事
Sitecore XM Cloud に関する記事をいくつか掲載をしました。今後も追加していく予定ですが、まずはジャンル別としてまとめておきました。
HTML のページを追加する
すでに Web サイトのコンテンツがあって、HTML のデータがあるという際に、Next.js をベースのサイトの場合はどうすれば良いでしょうか？実は Next.js の基本的な機能を利用すれば、HTML ファイルなどを一通りサーバーにホストすることが可能です。
Sitecore XM Cloud - Vercel との連携
Sitecore XM Cloud で作成をした CMS のデリバリー環境として Vercel を選択することが可能ですが、この作業を簡単にするための Sitecore XM Cloud との連携機能を提供しています。今回は、この機能を利用して、Web サイトを Vercel に展開する手順を紹介します。
Headless SXA - 新規コンポーネントの追加
前回は既存のコンポーネントの表示形式を増やすだけでしたが、今回は新しいコンポーネントを作成します。これにより、各企業で求めているデータ構造に対してのレイアウト作成という形で、Sitecore でデータ形式の定義をして、見た目の部分を実装するという部分のイメージが湧くかと思います。