コンテンツレンダリングのトラブルシューティング
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
!注このドキュメントの改善にご協力くださいフレームワークに依存しないドキュメントは現在開発中です。コンテンツ改善の提案があれば、このページの下部で フィードバック を共有してください。
このトピックでは、フロントエンドアプリでSitecoreコンテンツをレンダリングする際の最も一般的なエラーと解決策について説明します。
ページにオレンジ色のエラーボックスが表示されます
オレンジ色のエラーボックスでコンポーネント名が表示された場合、そのコンポーネントはコンポーネントマップに登録されていません。フォールバックコンポーネントはこの目に見えるエラーボックスを表示し、どの実装が欠けているかすぐに確認できます。実装を提供するまでは、そのコンポーネントのネストされたプレースホルダー子はレンダリングされません。
問題を解決するには、コンポーネント用のレンダー関数を追加し、コンポーネントマップにレジスタ付けしてください。
入れ子状のプレースホルダー(PartialDesignDynamicPlaceholderまたはContainerFullBleed)を公開することだけを目的とした構造ラッパーコンポーネントの場合もエラーボックスが表示されますが、意味のあるフィールドをレンダリングすることはできません。これらの場合、ラッパーを表示せずにネストされた子のみをレンダリングするパススルーコンポーネントを作成してください。
::::タブズ:::tab{title="Astro"}
--- // src/components/Passthrough.astro import Placeholder from './Placeholder.astro';
const { placeholders } = Astro.props;
{Object.entries(placeholders ?? {}).map((key, items) => (
func renderPassthrough(_, _ mapstringany, placeholders mapstringany) template.HTML { var sb strings.Builder for key, items := range placeholders { sb.WriteString(string(renderPlaceholder(key, items))) } return template.HTML(sb.String()) }
:::::::すべての構造ラッパーに対してコンポーネントマップにパススルーコンポーネントを登録する:
::::タブズ:::tab{title="Astro"}
// src/components/componentMap.js import Passthrough from './Passthrough.astro';
export const componentMap = { // ...existing entries... 'PartialDesignDynamicPlaceholder': Passthrough, 'ContainerFullBleed': Passthrough, };
// components.go
"PartialDesignDynamicPlaceholder": renderPassthrough, "ContainerFullBleed": renderPassthrough,
:::::::コンテンツコンポーネントについては、フィールドをレンダリングする実際のコンポーネントを作成し、それをコンポーネントマップに追加してください:
::::タブズ:::tab{title="Astro"}
// src/components/componentMap.js import Hero from './Hero.astro';
export const componentMap = { // ...existing entries... 'Hero': Hero, };
// components.go
"Hero": renderHero,