Handling URL Path and Story slug
How the URL path determines the story slug
Concept: One simple rule — the URL path determines the story slug. The routing logic stays minimal and scales from basic pages to multilingual sites with transliteration.
Level 1: Simple path = Simple slug
URL: yoursite.com/about
──────
Slug: /about→ Fetch story with slug /about from the Content Delivery API.
Routing logic: Get the URL path. Use it as the slug. Done.
Level 2: Nested paths = Nested folders
URL: yoursite.com/about/company
──────────────
Slug: /about/company→ Fetch story with slug /about/company.
Same logic. Folders in Storyblok mirror the URL structure. No extra configuration needed.
Level 3: Language prefix = Language parameter + slug
URL: yoursite.com/en/something
── ─────────
Language: en
Slug: /something→ Fetch story with slug /something + parameter language=en.
Routing logic: Split the path. First segment = language. Remaining path = slug.
Level 4: Transliteration = Non-Latin scripts to slug
URL: yoursite.com/ru/продать
── ───────
Language: ru
URL segment: продать
Slug (transliterated): prodat→ Fetch story with slug /prodat + parameter language=ru.
Routing logic: Split the path. First segment = language. Remaining path → transliterate to Latin characters → use as slug.
The Principle
┌─────────────────────────────────────────────────────┐
│ URL PATH │
│ yoursite.com / [lang] / [path...] │
└──────────────┬──────────────────┬───────────────────┘
│ │
┌────▼───-─┐ ┌───────▼────────┐
│Language │ │ Slug │
│parameter │ │ (transliterate │
│(optional)│ │ if needed) │
└────┬─────┘ └───────┬────────┘
│ │
┌──────▼──────────────────▼──────┐
│ Content Delivery API call │
│ GET /stories/[slug]?lang=[ln] │
└────────────────────────────────┘One routing rule. All scenarios covered.
Simple pages → path = slug
Nested pages → path = slug (folders match URL)
Multilingual → first segment = language, rest = slug
Non-Latin URLs → transliterate the path segment into a Latin slug
Transliteration Reference
Non-Latin characters in the URL are converted to their Latin equivalents for the slug:
URL path | Language | Transliterated slug |
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|