Add a custom translation key

LightNet allows you to add custom translation keys to your site, for example for navigation or homepage text. Follow these steps to create and use a custom translation key for your media site:

Tip

If you are translating a text-only page, such as the about page, consider using Markdown files instead of custom translation keys.

1. Add to translation files: Add an entry for your custom translation key to all translation files inside src/translations. For example adding a key to the English translations:

   src/translations/en.yml

   hello-world: Hello World

   Choose a unique key on the left side of the colon. Keys like home.hero.title work well because they stay easy to organize. The key is used to reference your custom translation in your site.
2. Translate: Make sure the entry is translated correctly in all translation files.
3. Use inside an Astro component: Use the custom translation key in your Astro component. LightNet provides a translation function through Astro.locals.i18n.t. You can use this function to get the translation of your custom key based on the current locale.

   src/pages/[locale]/index.astro

   ---
   import { Page } from "lightnet/components"
   ---
   <Page>
       <h1>{Astro.locals.i18n.t("hello-world")}</h1>
   </Page>

   The translation function returns the translation for the key hello-world in the current language. If the key is not found in the translations file, the function returns the value of the default site language’s translations file. If the key is not found, the function throws an Error.

   Tip

   We provide internationalization helpers through the Astro.locals.i18n object. This object also gives you access to all locales, the default locale, and more. You can access the i18n object in all your .astro files. See Astro.locals.i18n reference for the full API.

4. Use where translation keys are expected: Translation files are mainly used with Astro.locals.i18n.t(...) in Astro components and other APIs that explicitly expect translation keys. Configuration labels such as title, mainMenu[].label, category labels, and media type labels use locale maps directly instead of translation keys.