Languages

Every kit site lists its languages, its locales, in src/site.config.ts, the default first. A site in one language lists one:

locales: [{ code: "en", tag: "en-US" }],

The code is the suffix in content file names, such as about.en.md. The tag sets the pages' lang attribute and the format of dates and numbers.

How a site in several languages works

Files. A translation sits beside its source, with the same name and its own code: about.en.md and about.de.md. Every locale has its own settings, home and 404 page. Any other page or entry can exist in some locales only.
URLs. The default locale is served at the root and every other one under its path, such as /de. A translated page can give its own URL segment with localSlug, so services/painting.de.md can be served at /de/leistungen/malerarbeiten.
Links. Content writes an internal link as the page's path in the default locale, such as /contact, in every locale. On a German page, the kit turns it into the German page's URL, when that page has a translation.
The language switcher. The locales header action or footer block links each page to its translations, or to the other locale's home page.
Search engines. Each page links its translations with hreflang, and the sitemap lists every locale's URLs.
The CMS config shows each locale side by side.

Add a language

To add German to a site in English:

Add the locale to src/site.config.ts, and give each collection whose German path differs a path per locale:

locales: [
  { code: "en", tag: "en-US" },
  { code: "de", tag: "de-DE", path: "/de" },
],
collections: {
  news: { basePath: { en: "/blog", de: "/aktuelles" } },
},

In src/content/settings/site.en.yml, name the language switcher under ui, such as locales: Language, and add the switcher to the header:
```
header:
  actions:
    - type: locales
```
Copy site.en.yml to site.de.yml, and translate it: the navigation, the interface strings under ui, and the facts' values, under the same names.
Copy pages/home.en.md and pages/404.en.md to home.de.md and 404.de.md, and translate them. Translate the other pages and entries the German site should have the same way, keeping their section ids.
Rebuild the CMS config and the description of the site's content, .hostsmith/schema.json, which now lists German, then build and check:
```
npm run decap-config
npx site-kit schema
npm run build
npm run check:urls
npm run check:styles -- --built
```

The default locale's URLs don't change, so the old site's URLs still pass check:urls. A theme from a release before 0.6 doesn't style the switcher yet: check:styles -- --built names its hooks.

The README's Locales has every option, and the full steps, including a site's own templates.

Hostsmith

Languages

How a site in several languages works

Add a language