Create Internal Links

This chapter guides you on how to create internal links to your pages.

When creating internal links, make sure you always add the locale in front of the link. For example this is how you can create a link to the about page inside an Astro component using JavaScript template strings:

`/${Astro.currentLocale}/about`

Additionally LightNet offers utility functions inside lightnet/utils to create paths:

• detailsPagePath: To build the localized path to a media item’s details page
• searchPagePath: To build the localized path to the search page including preset filters.

Reference

detailsPagePath(locale, mediaItem)

Returns the localized path to a media item’s details page.

• locale: The current locale as provided by Astro.currentLocale
• mediaItem: A media item as provided by Astro’s getEntry, getCollection or LightNet’s getMediaItems.

Example code, that creates an anchor link to a media item’s details page:

---
import { getEntry } from "astro:content"
import { detailsPagePath } from "lightnet/utils"

const mediaItem = await getEntry("media", "your-media-item-id")
if(!mediaItem) {
    throw new Error("No media item found")
}
---
<a href={detailsPagePath(Astro.currentLocale, mediaItem)}>Link</a>

searchPagePath(locale, query)

Returns the localized path to the search page including preset filters.

• locale: The current locale as provided by Astro.currentLocale
• query (optional): Sets filters for the search page. Supported options are:
  • category (optional): Filter for a category identifier.

Example code that creates an anchor link to the search page filtered by the category kids.

---
import { searchPagePath } from "lightnet/utils"
---
<a href={searchPagePath(Astro.currentLocale, {category: "kids"})}>Search page</a>