Sveltekit 변경 사항: 고급 레이아웃

소개

마지막 부분에서 프로젝트 트리를 추가했습니다.

src/routes/
├── (authed)
│   ├── +layout.server.ts
│   ├── +layout.svelte
│   └── dashboard
│       ├── +page.svelte
│       └── +page.ts
├── (unauthed)
│   ├── +layout.server.ts
│   ├── +layout.svelte
│   ├── +page.svelte
│   ├── +page.ts
│   ├── createAdmin
│   │   ├── +page.server.ts
│   │   └── +page.svelte
│   └── login
│       ├── +page.server.ts
│       └── +page.svelte
└── api

여기에서 괄호 안에 일부 디렉토리 이름을 지정한 것을 볼 수 있습니다. 며칠 전에 키트도 레이아웃을 일부 변경했습니다. 더욱 발전되고 재사용 가능하도록 만들었습니다. 큰 프로젝트에서 더 유용하기 때문에 grouped layouts에 더 집중하겠습니다.

예제 사용을 위한 프로젝트 소개

여기서 우리는 프로젝트 트리를 사용합니다. 두 개의 다른 navbar가 필요한 프로젝트가 있습니다. 하나는 사용자가 인증되지 않은 경우에 필요하고 다른 하나는 사용자가 인증된 경우에 필요합니다.
따라서 내 경로 중 일부는 [login, createAdmin, Home] 없이 액세스할 수 있습니다loggedIn. loggedIn 사용자의 경로는 [대시보드]입니다. 이제 내 프로젝트를 이해하기 위해 그룹 레이아웃에 대한 모든 것을 설명하겠습니다.

그룹화된 레이아웃

내 프로젝트에서 승인된 사용자와 승인되지 않은 사용자에 대해 서로 다른 Navbar가 필요합니다. 이러한 종류의 경우 그룹화된 레이아웃이 작동하는 Authorized 및 Unauthorized에 대해 서로 다른 레이아웃이 필요합니다. 승인된 경로와 그렇지 않은 경로를 쉽게 식별할 수 있도록 했습니다. 두 번째로 이제 두 유형의 그룹에 대해 서로 다른 레이아웃을 가질 수 있습니다.

사용자가 / 경로에 도달하면 (unauthed) 그룹으로 이동하고 해당 레이아웃을 로드합니다.

사용자가 loggedIn이고 /dashboard 경로에 액세스할 수 있는 경우 dashboard 경로가 (authed) 그룹의 레이아웃과 함께 로드됩니다.

보시다시피 이제 내 경로가 관리되고 사용자 인증을 기반으로 다른 탐색 모음을 사용할 수 있습니다. 그리고 한 가지 더 중요한 것은 그룹 이름이 공개 경로에 영향을 미치지 않는다는 것입니다. 그래 내 프로젝트 🥲보다 멋지다.

sveltekit이 레이아웃으로 수행한 몇 가지 마법 같은 작업에 대해 이야기해 봅시다.

+페이지@

위에서 그룹화된 레이아웃에 대해 배웠지만 때로는 해당 그룹 또는 경로의 상위 레이아웃에서 중단해야 합니다. +page@가 재생되는 곳. 먼저 이 프로젝트 트리를 살펴보십시오.

src/routes/
├ (app)/
│ ├ item/
│ │ ├ [id]/
│ │ │ ├ embed/
│ │ │ │ └ +page.svelte // Focus on this one
│ │ │ └ +layout.svelte
│ │ └ +layout.svelte
│ └ +layout.svelte
└ +layout.svelte

여기서 우리의 경로는 세 가지 레이아웃 [(app) - 그룹, 항목 - 경로, [id] - 동적 경로]를 사용합니다. embed 경로가 레이아웃 중 하나를 재설정하려는 경우 +page@ 뒤에 레이아웃 이름을 추가하기만 하면 됩니다.

예: 재설정하려는 경우(app) - group layout+page@(app).svelte 그리고 루트 레이아웃을 변경하려면 [email protected]를 수행하십시오.

// app grp reset

src/routes/
├ (app)/
│ ├ item/
│ │ ├ [id]/
│ │ │ ├ embed/
│ │ │ │ └ +page@(app).svelte // Focus on this one
│ │ │ └ +layout.svelte
│ │ └ +layout.svelte
│ └ +layout.svelte
└ +layout.svelte

// Root layout reset

 (app)/
│ ├ item/
│ │ ├ [id]/
│ │ │ ├ embed/
│ │ │ │ └ +page@.svelte // Focus on this one
│ │ │ └ +layout.svelte
│ │ └ +layout.svelte
│ └ +layout.svelte
└ +layout.svelte

이렇게 하면 프로젝트의 특정 경로에 대한 레이아웃을 재설정하는 데 도움이 됩니다. 하위 경로 레이아웃을 재설정하려면 +layout@에서 유사한 기술을 사용하고 +page@로 처리할 수 있습니다. 자세한 내용은 Advanced Layouts on Sveltekit Docs을 참조하십시오.

이것은 내가 당신을 위해 쓰는 것입니다. 묻고 싶은 것이나 제안하고 싶은 것이 있다면 댓글에 적어주세요.