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