Initialize Homepage

The homepage is the first page that users see when they visit your site. You can customize the homepage to include a hero image, a media item gallery or add your own components…

You have two different options on how to create the homepage:

• static locale: Use this if you plan to have a different layout for each locale. Layout means different components or different order of components.
• dynamic locale: Use this if you plan to have the same layout for each locale but different translations and content.

This differentiation is only about page layout not about the content inside the components.

Static locale

For each site language create a folder named with the language code. The homepage is defined in index.astro files inside this folders. For example when your page needs to support English and German, create:

• src/pages/en/index.astro
• src/pages/de/index.astro

Every index.astro file has this initial structure:

src/pages/en/index.astro

---
import { Page } from "lightnet/components"
---
<Page>
    {/* Add components and HTML here */}
</Page>

Tip

Although this solution could use hard wired texts, we recommend using translation keys to have all translated text in one place. This simplifies translation management when adding a new language.

Dynamic locale

Create one file named `src/pages/[locale]/index.astro. The homepage for all locales is defined inside this file. This is the basic layout:

src/pages/[locale]/index.astro

---
export { getLocalePaths as getStaticPaths } from "lightnet/i18n"
import { Page } from "lightnet/components"
---
<Page>
    {/* Add components and HTML here */}
</Page>

Tip

Use Astro.currentLocale to change the content based on the locale.

Add Components

Add components to your homepage. These components are available.

• Section: used to structure the page and take care of the layout of other components or any HTML. Components that include the suffix Section in their title, already include this.
• Hero Section: a big Image, optional with a Title inside, that serves as an eye-catcher, normally at the top of a page.
• Media Gallery Section: shows a selection of Media Items in a gallery view.
• Categories Section: displays a grid of all available categories leading to a search page filtered by category.
• Highlight Section: combination of a large Image, headline, text and optional a link button.
• Video Player: a video player for YouTube, Vimeo links or mp4 files.
• Custom Components: your own Astro components. You are very welcome to share them with the community. Start a conversation with us by opening a feature proposal.