Start with English, expand with Spanish

This template shows how to match English and Spanish content, translate navigation, and wire the built-in language toggle.

See the playbookRead the i18n guide
Flag of Puerto Rico
Flag of Brazil
Flag of Canada and Québec

Welcome

Canopy renders every locale from the same IIIF data and content tree. In this template example, the English language site lives at content/ while the additional locale for Español (Spanish) lives under content/<lang>/ as content/es/. Matching file paths lets Canopy infer which translation to load when visitors switch languages.

Extend locales

  1. Edit canopy.yml and add entries under locales. Mark one locale as default: true.
  2. Each locale should include a label (used by the toggle) and the BCP 47 lang code that matches your content.
  3. Save and rerun npm run dev/npm run build so the builder reloads the config.

Mirror content

  • Translate MDX pages under content/<lang>/… using the same file names as the default locale (content/index.mdx ⇄ content/es/index.mdx).
  • When a localized file is missing, Canopy falls back to English, so you can add translations incrementally.
  • Use frontmatter to override title, description, or lang per locale.

Localize UI strings

  • Copy content/locale.yml to content/<lang>/locale.yml and translate the values.
  • Update routes.search or routes.works to change slug segments such as /es/buscar or /es/obras.
  • Update content/<lang>/navigation.yml to translate menu labels or point links at localized paths.