#override getStaticPaths slug
1 messages · Page 1 of 1 (latest)
To change the output URL from /locations/paris to /web-designer/paris without changing your folder structure in src/content/, you should move your Astro page component to a new location within the src/pages/ directory.
In Astro, the routing is determined by the file structure inside src/pages/ [Static (SSG) Mode]. To achieve your desired URL, follow these steps:
- Rename/Move the Directory: Move your file from
src/pages/locations/[slug].astrotosrc/pages/web-designer/[slug].astro. - Update
getStaticPaths: Ensure yourgetStaticPathsfunction remains the same, as it already correctly maps your content collection entries to theslugparameter [Generating Routes from Content].
Your updated file should look like this:
File path: src/pages/web-designer/[slug].astro
---
import { getCollection } from 'astro:content';
import type { CollectionEntry } from 'astro:content';
export async function getStaticPaths() {
const locationPages: CollectionEntry<"locations">[] = await getCollection("locations");
// Your existing filter logic
const filteredPages = filterCollectionByLanguage(locationPages, "fr");
return filteredPages.map((page) => ({
params: { slug: page.id }, // page.id corresponds to the filename in src/content/locations/
props: page,
}));
}
const page = Astro.props;
const { Content } = await page.render();
---
<h1>{page.data.title}</h1>
<Content />
Why this works
Astro uses the directory structure within src/pages/ to define the URL path. By placing the dynamic route [slug].astro inside a folder named web-designer, Astro automatically prefixes all generated routes with /web-designer/ [Static (SSG) Mode].
Since getStaticPaths fetches data from the locations collection regardless of where the .astro file is located, your source content stays in src/content/locations/ while your public URLs change to your preferred path [Generating Routes from Content].
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
@alpine oyster Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@visual axle is there no other way? i'd like to avoid moving / changing folder names
Let me check the knowledge base for you again. One moment! :books:
I'm sorry, but the provided knowledge sources do not contain information on how to change the public URL path while keeping the file in src/pages/locations/[slug].astro.
According to the documentation, Astro's routing is strictly tied to the file structure within the src/pages/ directory [Static (SSG) Mode]. When you use content collections, you must manually create a dynamic route file in the specific src/pages/ subdirectory that matches your desired URL structure [Generating Routes from Content].