基于svelteKit开发之页面布局

创建项目

npm create svelte@latest

npm create svelte@latest layout-demo

npm run dev

npm run dev -- --open

布局

在根目录（src/routes）可以创建文件__layout.svelte，默认情况下子页面都会使用该布局样式

根目录的layout

同时可以在该目录创建__layout-class.svelte文件，其中class可以随意命名，那么在子页面可以通过@连接符来选择使用，index@class.svelte，次数上面的__layout.svelte样式将失效。
当然，你同样可以通过@继承__layout.svelte的布局样式，比如 __layout-class@default.svelte，其中default代表__layout.svelte，你可以使用其他的名称

src/routes/
├ __layout.svelte
├ __layout-dark.svelte // 子页面可以通过index@dark.svelte使用
├ __layout-light.svelte
├ __layout-my@default.svelte // 子页面可以使用index@my.svelte使用，同时继承了__layout.svelte的布局
├ __layout-mydark@dark.svelte
├ __layout-mylight@dark.svelte

子页面的layout

子页面可以定义子集的__layout.svelte，此时根目录下的布局__layout.svelte会被继承，如果子页面通过显示选择根目录的布局，比如index@dark.svelte，那么根目录的__layout.svelte也就无效了
src/routes/
├ __layout.svelte
├ __layout-dark.svelte
├ __layout-light.svelte
├ /about
| __layout.svelte
| index.svelte // 该页面会继承 src/routes/__layout.svelte 与src/routes/about/__layout.svelte 布局

├ __layout.svelte
├ __layout-dark.svelte
├ __layout-light.svelte
├ /about
| __layout.svelte
| index@dark.svelte // 该页面只会使用 src/routes/__layout-dark.svelte 布局

总结

布局语法还是比较简单，总的来说：

• 布局声明

  • __layout.svelte或__layout-.svelte

• 布局使用

  • 默认子页面继承根布局
  • 通过index@.svelte选择使用布局

• 使用规则

  • 在src/routes下创建的布局相当于根布局，子页面默认情况下都会继承，除非显示通过@引用其他根目录下面的布局
  • 在src/routes下的根布局同样可以通过@实现继承
  • 子页面可以通过创建自己的layout，来实现继承根布局后特有的布局
  • 子页面使用@选择特定布局后，子页面自身的布局也就不再有效

版本变更

最新版本的页面文件好像有之前的index.svelte更换为+page.svelte，同时__layout.svelte替换为了+layout.svelte，其他方面的语法不知道有没变化