レイアウトファイル (+layout.svelte) の基本
Svelte のフレームワークである SvelteKit は、複数のページで使用する共通レイアウトを定義するための仕組みを提供しています。
共通レイアウトを定義するのは簡単で、src/routes/+layout.svelte というファイルを作成するだけで、そのレイアウトが全ページ (src/routes/**/+page.svelte) に適用されます。
<header>
<h1>サイト名</h1>
</header>
<div class="main">
<slot />
</div>
<style>
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 1rem 1.5rem;
background-color: #333;
color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
z-index: 1000;
}
h1 {
margin: 0;
}
.main {
margin: 7rem 2rem 4rem 2rem;
}
</style>各ページのコンテンツは、レイアウトファイル内の <slot /> 部分に展開されます（参考: スロットの仕組み）。
実際には SvelteKit で作成したアプリケーションは、最上位のページテンプレートとして src/app.html を使うので、次のような入れ子構造でコンテンツが挿入されていくことになります。
+layout.svelte ファイルが存在しない場合は、<slot /> とだけ記述されたファイルが存在するかのように振る舞います。
レイアウトファイルをネストする
src/routes のディレクトリ階層内に複数の +layout.svelte を配置すると、そのレイアウトは上位のディレクトリに配置されたレイアウトを継承します。
例えば、次のようなディレクトリ構成にすると、下位の src/routes/admin/+layout.svelte は、上位の src/routes/+layout.svelte を継承します。
src/routes/+layout.svelte- admin/
+layout.svelte
src/routes/admin ディレクトリ以下に配置されたすべてのページ (+page.svelte) は、src/routes/admin/+layout.svelte レイアウトを使ってレンダリングされ、その結果が上位のレイアウトの <slot /> 部分に展開されるという振る舞いになります。
スロットの連鎖だー！ ٩(๑❛ᴗ❛๑)۶