#override getStaticPaths slug

1 messages · Page 1 of 1 (latest)

visual axleBOT
#

Hi @alpine oyster. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

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:

  1. Rename/Move the Directory: Move your file from src/pages/locations/[slug].astro to src/pages/web-designer/[slug].astro.
  2. Update getStaticPaths: Ensure your getStaticPaths function remains the same, as it already correctly maps your content collection entries to the slug parameter [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.

alpine oyster
#

@visual axle is there no other way? i'd like to avoid moving / changing folder names

visual axleBOT
#

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].

The knowledge sources do not explicitly mention a way to "override" the base path of a page (e.g., changing /locations/ to /web-designer/) from within the getStaticPaths() function itself; that function is used to define the dynamic segments (like [slug]), but the static parts of the URL are determined by the file's location [Generating Routes from Content].

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: