前回は Navigation コンポーネントでの多言語対応を紹介しましたが、今回は Link List に関しての多言語の対応を紹介していきます。
リンクリストの表示名
標準で提供されているリンクリストの表示名はどこで管理されているでしょうか？例えば、リンク一覧の URL のみを指定しているリンクリストの場合、Preview で表示をすると以下のようにアイテムのパスが表示されます。
リンクリストの設定をする際、アイテムのパスを指定するだけではなく、Description に表示をする際の文字を設定する必要があります。
これはどの言語に対しても設定できるようになっているため、この Description に対して各言語の表示名を翻訳して設定することで、ページでは各言語の表記となります。
これで表示に関しての多言語での使い方を確認しました。
リンクに関して
リンクに関しては、前回の Navigation の時と同様に標準言語であればなにも追加しない、それ以外はロケールを追加した URL を表示するようにします。この表示の部分の制御は、src\tailwindcss\src\components\LinkList.tsx のファイルになります。
まず最初に Navigation の時と同様に default 関数で locale を取得します。
TypeScript
export const Default = (props: LinkListProps): JSX.Element => {
const { sitecoreContext } = useSitecoreContext();
const contentLocale = getLocale(sitecoreContext);上記のコードで、getLocale を呼び出しています。これは現在の Sitecore のコンテンツのロケールに対して、URL として contentLocale に値を設定するコードになります。
TypeScript
const getLocale = function (props: SitecoreContextValue): string {
let locale;
if (!props.language || props.language === process.env.DEFAULT_LANGUAGE) {
locale = '';
} else {
locale = '/' + props.language;
}
return locale;
};これにより、DEFAULT_LANGUAGE に en を設定していれば何も入れず、それ以外の場合は / に対してロケールを追加した値が設定されます。これで、contentLocale には URL のパスが設定されます。
続いて取得したデータをリンクリストで渡せるように、LinkListItemProps の定義に locale を追加します。
TypeScript
type LinkListItemProps = {
key: string;
index: number;
total: number;
field: LinkField;
locale: string;
};これでタイプの変更ができたので、アイテムのデータを処理しているところで呼び出している LinkListItem で Locale の情報を追加します。
TypeScript
<LinkListItem
index={key}
key={`${key}${element.field.link}`}
total={datasource.children.results.length}
field={element.field.link}
locale={contentLocale}
/>そして LinkListItem で利用している JssLink に対して URL で Locale を追加するように設定をします。
TypeScript
return (
<li className={className}>
<div className="field-link">
<JssLink field={props.field} href={`${props.locale}${props.field.value.href}`} />
</div>
</li>
);これで準備が整いました。Preview モードで表示した場合、URL にロケールが追加されているのが分かります。
まとめ
今回は Link List で利用されている JssLink に対して、ロケールを追加した URL を設定する方法を確認しました。これで、LinkList で指定したアイテムに対して、ロケールが追加された URL を利用することができるようになります。
なお、JssLink を利用している Headless SXA のほかのコンポーネントとしては Promo があります。同様の実装をすることで、Promo でもロケールを追加してリンクを張ることが可能となります。