#Links to generated pages

3 messages · Page 1 of 1 (latest)

blissful mountain
#

I have a folder docs inside content. Inside docs I have two markdown files: introduction.md and features.md.
In my layout I want to have a navigation with links to both pages. I do it like so:

const entries = await getCollection('docs');
---
<a href={entry.slug}>{entry.data.title}</a>

This works fine in development, but when deployed when I navigate from mysite.com/docs/introduction to the "features" page, I get to mysite.com/docs/introduction/features instead of mysite.com/docs/features. How to fix that?

gleaming timberBOT
#

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

#

The issue you're experiencing seems to be related to the way you're constructing your URLs. In HTML, if you start a URL with a slash (/), it will be relative to the root of your site. If you don't start it with a slash, it will be relative to the current page.

In your case, you're not starting your URLs with a slash, so they're relative to the current page. This is why when you're on mysite.com/docs/introduction and you click on the "features" link, you're taken to mysite.com/docs/introduction/features.

To fix this, you should start your URLs with a slash to make them relative to the root of your site. Here's how you can modify your code:

---
const entries = await getCollection('docs');
---
<a href={`/${entry.slug}`}>{entry.data.title}</a>

This way, when you click on the "features" link, you should be taken to mysite.com/docs/features, regardless of the current page.

Please note that this solution assumes that your entry.slug values are something like docs/introduction and docs/features. If they're just introduction and features, you'll need to add docs/ to the URL in your code:

<a href={`/docs/${entry.slug}`}>{entry.data.title}</a>

For more information on how to work with links in Astro, you can refer to the Astro documentation on routing (https://docs.astro.build/en/guides/routing#_top).

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