コンテンツにスキップ

ユニット4の導入 - レイアウト

コンポーネントを使用できるようになったところで、カスタムレイアウトを作成しましょう!

チュートリアルのこの段階でのコードは、GitHubまたはStackBlitzで確認できます。

あなたのコードを上の例と比較してみてください。また、チュートリアルを始めたばかりであれば、StackBlitzでフォークして、ここからブラウザ上でコーディングを始めてください。

このユニットでは、ページとブログ投稿で共通の要素とスタイルを共有するためのレイアウトを作成します。

そのために、以下のことをおこないます。

  • 再利用可能なレイアウトコンポーネントを作成する
  • <slot />を使用してコンテンツをレイアウトに渡す
  • Markdownのフロントマターからデータをレイアウトに渡す
  • レイアウトを入れ子にする