如何为主页做一个独特的布局?



我的网站上有多个页面,只有主页应该有不同的布局?我怎样才能做到这一点呢?

src/
- page1/ <- LayoutB
- page2/ <- LayoutB
- page3/ <- LayoutB
- index.svelte <- LayoutA

如果我在src/文件夹中使用__layout.svelte,它将适用于每个页面。

2022年11月更新

这个方法在

中进行了测试
npm -v @sveltejs/kit
8.19.2

要为特定页面(或页面组)创建独特的布局,您需要使用group.

src/
routes/
(unauthenticated)/
welcome/
register/
login/
+page.svelte
+layout.svelte (this layout applies to welcome/, register/ and login/
(authenicated)/
home/
settings/
+page.svelte
+layout.svelte (this layout applies to home/, settings/ and dashboard/
+page.svelte
+layout.svelte (this layout applies to all pages in unauthenticated/ and authenticated/)

我能够找到一个解决方案,使用命名布局从SvelteKit

我的问题的解决方案是这样的

src/
- page1/ <- LayoutB
- page2/ <- LayoutB
- page3/ <- LayoutB
- __layout.svelte (LayoutB)
- __layout-main.svelte (LayoutA)
- index@main.svelte <- LayoutA

我创建了一个具有-main后缀的布局文件,并使用此名称作为我的index@main.svelte文件中布局的参考

最新更新