98 lines
2.6 KiB
Markdown
98 lines
2.6 KiB
Markdown
# SvelteKit Routing Guide
|
|
|
|
This guide explains how the dynamic routing system works in this Sanity + SvelteKit template, including URL patterns and content management.
|
|
|
|
## URL Structure
|
|
|
|
The template uses the following URL patterns:
|
|
|
|
### Custom Pages
|
|
- **Pattern**: `/{slug}`
|
|
- **Example**: `/about`, `/contact`, `/services`
|
|
- **Content Type**: `custom` pages from Sanity
|
|
- **Route File**: `src/routes/[slug]/+page.svelte`
|
|
|
|
### Blog Posts
|
|
- **Pattern**: `/blog/{slug}`
|
|
- **Example**: `/blog/my-first-post`, `/blog/web-development-tips`
|
|
- **Content Type**: `blog` posts from Sanity
|
|
- **Route File**: `src/routes/blog/[slug]/+page.svelte`
|
|
|
|
### Blog Index
|
|
- **Pattern**: `/blog`
|
|
- **Shows**: List of all blog posts
|
|
- **Route File**: `src/routes/blog/+page.svelte`
|
|
|
|
## File Structure
|
|
|
|
```
|
|
src/routes/
|
|
├── [slug]/ # Custom pages at root level
|
|
│ ├── +page.server.ts # Server-side data loading
|
|
│ └── +page.svelte # Custom page component
|
|
├── blog/
|
|
│ ├── +page.server.ts # Blog index server load
|
|
│ ├── +page.svelte # Blog index component
|
|
│ └── [slug]/ # Individual blog posts
|
|
│ ├── +page.server.ts # Blog post server load
|
|
│ └── +page.svelte # Blog post component
|
|
├── +layout.server.ts # Global layout data
|
|
└── +layout.svelte # Global layout component
|
|
```
|
|
|
|
## How It Works
|
|
|
|
### 1. URL Resolution Order
|
|
|
|
SvelteKit resolves URLs in this order:
|
|
1. **Exact routes** (e.g., `/blog`)
|
|
2. **Parameterized routes** (e.g., `/blog/[slug]`, `/[slug]`)
|
|
|
|
This means:
|
|
- `/blog` → Blog index page
|
|
- `/blog/some-post` → Blog post page
|
|
- `/about` → Custom page (if exists)
|
|
- `/nonexistent` → 404 error
|
|
|
|
### 2. Data Loading Flow
|
|
|
|
#### Custom Pages (`/[slug]`)
|
|
|
|
```typescript
|
|
// +page.server.ts
|
|
const CUSTOM_QUERY = `*[_type == "custom" && slug.current == $slug][0]`;
|
|
const custom = await serverClient.fetch(CUSTOM_QUERY, { slug });
|
|
```
|
|
|
|
#### Blog Posts (`/blog/[slug]`)
|
|
|
|
```typescript
|
|
// +page.server.ts
|
|
const BLOG_QUERY = `*[_type == "blog" && slug.current == $slug][0]`;
|
|
const blog = await serverClient.fetch(BLOG_QUERY, { slug });
|
|
```
|
|
|
|
### 3. Content Types
|
|
|
|
#### Custom Page Schema
|
|
```typescript
|
|
type Custom = {
|
|
_id: string;
|
|
_type: 'custom';
|
|
title?: string;
|
|
slug?: Slug;
|
|
tags?: Array<string>;
|
|
publishedAt?: string;
|
|
body?: BlockContent;
|
|
seoTitle?: string;
|
|
seoDescription?: string;
|
|
}
|
|
```
|
|
|
|
#### Blog Post Schema
|
|
```typescript
|
|
type Blog = {
|
|
_id: string;
|
|
_type: 'blog';
|
|
title?: string;
|
|
slug |