以下に、SvelteKitのレイアウトファイルの使用方法とコード例をいくつか紹介します。
-
レイアウトファイルの作成 まず、SvelteKitプロジェクト内に新しいファイルを作成し、拡張子を
.svelte
としてください。たとえば、Layout.svelte
という名前のレイアウトファイルを作成します。 -
レイアウトの定義 レイアウトファイル内で、共通の要素を定義します。たとえば、次のようにヘッダーとフッターを含めることができます。
<!-- Layout.svelte -->
<header>
<h1>My Blog</h1>
</header>
<main>
<slot></slot>
</main>
<footer>
<p>© 2024 My Blog. All rights reserved.</p>
</footer>
<style>
/* スタイルの定義 */
</style>
<!-- index.svelte -->
<script>
export let title;
</script>
<svelte:head>
<title>{title}</title>
<svelte:component this={Layout}/>
</svelte:head>
<h2>Welcome to My Blog!</h2>
<!-- ページ固有のコンテンツ -->
上記の例では、Layout.svelte
ファイルが使われており、ヘッダーとフッターがページに自動的に追加されます。
このように、SvelteKitのレイアウトファイルを使用することで、共通のレイアウトを効率的に管理し、再利用することができます。上記のコード例を参考にしながら、約1000語のブログ投稿を作成する際にレイアウトファイルを活用してください。