Tailwind Logo

作成したコンポーネントで多言語対応を実装する

XM Cloud

公開日: 2024-03-07

前回作成をしたパンくずリストのコンポーネントですが、多言語の時の動作はどういう動きをするでしょうか？今回はその部分も想定したコンポーネントに更新していきます。

日本語での動作を確認する

前回のコードに対して、データがあった時の処理の部分で、sitecoreContext から言語を取得できるか確認をします。

TypeScript 
  if (data) {
    return (
      <>
        <div className="component-content">{generateBreadcrumbList(data.item.ancestors)}</div>
        <div>id: {sitecoreContext.language}</div>
      </>
    );
  }

日本語のリソースをそろえた時の結果は以下のように表示されます。

headlessmultilang01.png

コンポーネントを更新する

追加したコードで言語を確認することができていますが、URL に関しては GraphQL が返したデータをもとに URL を生成しているため、パスに ja-JP が入っていない状況です。en に関しては / を、そうではない場合は locale を追加するようにコンポーネントを更新します。

まず呼び出しをする関数に対して、locale を利用して URL を調整するコードを追加します。

TypeScript 
function generateBreadcrumbList(ancestors: Ancestor[], locale: string): JSX.Element {
  const reversedAncestors = ancestors.reverse();

  const baseUrl = locale === 'en' ? '' : `/${locale}`;

  const ancestorListItems = reversedAncestors.map((ancestor: Ancestor, index: number) => {
    return (
      <li key={index}>
        <a href={baseUrl + ancestor.url.path}>{ancestor.field.value}</a>
      </li>
    );
  });

これで、en の場合は何も追加せず、 ja-jp の時には /ja-JP が追加されるようになります。

続いて呼び出しをしているコードの部分で locale となる言語を渡します。

TypeScript 
  const { sitecoreContext } = useSitecoreContext();
  const locale = sitecoreContext.language || 'en';

  if (data) {
    return (
      <>
        <div className="component-content">
          {generateBreadcrumbList(data.item.ancestors, locale)}
        </div>
      </>
    );
  }

これで HTML を生成する時にロケールを URL に追加して表示ができるようになりました。実行します。

headlessmultilang02.png

まとめ

コンポーネントを作成する際には GraphQL 側では $language を利用してその言語のデータを取得、またコンポーネント側で sitecoreContext.language から言語を取得することで、URL に関する調整ができました。

関連タグ