（三）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 />