（三）SvelteKit教程：layout 文件

（三）SvelteKit教程：layout 文件

(1) 设置 layout 文件

我们如果需要添加一些统一的布局文件，我们可以在 routes 文件夹里面添加 layout.svelte 文件，比如我们需要添加 header 和 footer 文件，可以增加 routes/layout.svelte 文件，内容如下：

<header class="layout-header">Header</header>
<slot></slot>
<footer class="layout-footer">Footer</footer>


<style>
	.layout-header {
		background-color: #264653;
		color: #f4a261;
		font-size: 30px;
		text-align: center;
		padding: 10px;
	}
    .layout-footer {
		background-color: #264653;
		color: #e9c46a;
		font-size: 30px;
		text-align: center;
		padding: 10px;
	}
</style>

如果你想在特定的子文件里面进行添加，比如 /about 路由，那么我们可以添加在 /about/layout.svelte ，那么这个 layout 文件只作用在 /about 路由下面

（2）忽略一些 Layouts 文件

文件结构：

routes
├── +layout.svelte
├── +page.svelte
├── about
│   ├── +layout.svelte
│   ├── +page.svelte
│   ├── first
│   │   └── +page@about.svelte
│   └── second
│       ├── +layout.svelte
│       ├── +page.svelte
│       ├── a
│       │   └── +page@about.svelte
│       └── b
│           └── +page@.svelte

假设如果你不想在second/a 中用 second/layout.svelte 的布局文件，那么我们就可以在 a/page.svelte 中添加 @about 符号，定位到 about/layout.svelte 布局文件。如果你想直接定位到根目录下，那么你就可以直接用 @ 文件，而不需要添加任何别的后缀。

(3) 统一组件

如果你想把一些公用的组件进行抽离，我们可以将他们都放到 src/lib 文件夹下面，比如我们将 header 和 footer 都放到lib文件夹下面。

├── lib
│   ├── footer.svelte
│   └── header.svelte
└── routes
    ├── +layout.svelte
    ├── +page.svelte
    ├── about
    │   ├── +layout.svelte
    │   ├── +page.svelte
    │   ├── first
    │   │   └── +page@about.svelte
    │   └── second
    │       ├── +layout.svelte
    │       ├── +page.svelte
    │       ├── a
    │       │   └── +page@about.svelte
    │       └── b
    │           └── +page@.svelte

之后再 routes/layout.svelte 文件夹里面，我们就可以直接导入，这样非常方便。如下代码：

<script>
    import Header from '$lib/header.svelte';
    import Footer from '$lib/footer.svelte';
</script>

<Header />
<slot></slot>
<Footer />