This doesn't work anymore as the routing system evolved.
My understanding is that:
- all layout inherit from the root layout
+page.svelte
- but you can create groups which are not taken into account in the final path of your route.
For example, we can imagine that a website has a layout containing a header, a main and a footer block.
But we may also have some king of popups that are not comprised of these block elements, but instead, they are simple blocks with a high z-index
or something like this.
Because all layouts inherits the root layout, we can just create a blank layout at the root (containing a single <slot />
), and then, we create an (app)
group and a (popup)
group (parenthesis are crucial here). And inside of each group, you define the layout that will be inherited by all the layouts located in the respective sub folders.
It would gives us something like below:
src/routes
├── (app)
│ ├── +layout.svelte ----> contains Header, Main, Footer etc.
│ ├── page1
│ │ └── +page.svelte
│ ├── page2
│ │ └── +page.svelte
│ ├── page3
│ │ └── +page.svelte
├── (popup)
| ├── +layout.svelte ----> contains only popup HTML & styles
│ ├── popup
│ └── popup1
│ │ └── +page.svelte
│ └── popup2
│ └── +page.svelte
├── (test)
│ ├── +layout.svelte
│ └── test
│ ├── +layout.svelte
│ └── page.svelte
├── +error.svelte
├── +layout.svelte ----> contains nothing or only global things
├── +page.svelte
└── api
├── user
│ └── [uid]
│ └── get.json
└── ...
...