Multi-language Sites
Serve pages and posts in six languages on the same URLs, translate content, and add a language switcher.
IGC CMS can serve every page and post in several languages: English (en),
Chinese (zh), German (de), Spanish (es), French (fr) and Arabic
(ar). Visitors keep the same URLs — each one sees the version in their own
language.
How a visitor's language is chosen
For each request, the first of these that applies wins:
- A language prefix in the URL —
/de/pricingalways shows German. - The visitor's saved choice — set by the site's language switcher and remembered in a cookie.
- The browser's language — a first-time visitor with a German browser sees German.
- English, otherwise.
If a page has no translation in the chosen language, the English version is shown, so a missing translation never leads to an error page.
Translate a page
- Open the page in the builder and click Translations in the toolbar.
- Under Add a translation:, pick a language.
- A copy of the page is created in that language. Open it, replace the text, and save.
The translation shares the original's URL: /pricing shows the English page
to English visitors and the German copy to German visitors. Each translation
appears in the Pages list as its own row (for example pricing-de), and a
badge in the builder reminds you which language you're editing.
Translations are independent copies. Changes to the English page aren't copied over, so update each language when the content changes.
Translate a post
Posts work the same way: open the post, find its Translations section, and add a language. Blocks that list posts, such as the posts list, show each visitor the posts in their language, falling back to English.
Add a language switcher
Give visitors a way to choose. A switcher only needs to save the choice and reload the page:
<select onchange="document.cookie='cms_locale='+this.value+';path=/;max-age=31536000';location.reload()">
<option value="en">English</option>
<option value="zh">中文</option>
<option value="de">Deutsch</option>
<option value="es">Español</option>
<option value="fr">Français</option>
<option value="ar">العربية</option>
</select>
Put it in a shared layout (see Reusable Blocks & Templates) so it appears
on every page. Note that a language prefix in the URL beats the saved choice,
so on a page like /de/pricing the switcher should go to /pricing instead
of reloading. Alternatively, link straight to a language with a URL prefix,
such as /fr/.
Translate the shared header and footer
The site header (the Layout Frame block) and footer (the Site Footer block) are one block each, shared by every language. Instead of fixed text, they contain markers that are filled in with the page's language when it renders. Markers also work in a page's own content, including what the page puts inside the header/footer frame — so a page can be written once and still show its text in every language:
| Marker | English | 中文 |
|---|---|---|
{{nav.pricing}} | Pricing | 价格 |
{{nav.login}} | Log in | 登录 |
{{footer.tagline}} | Intelligent Governance & Content Management | 智能治理与内容管理 |
Links use {{site.prefix}}, which is empty for English and /zh, /de, …
for other languages — for example {{site.prefix}}/pricing.
Edit the text in Admin → Manage → Site Text: one row per marker, one column per language. Changes are live as soon as you save — no rebuild. An empty cell falls back to English, then to the marker's name.
To add a menu item, add it once to the block (with a marker such as
{{nav.support}} as its label), then add the key nav.support in Site Text
and fill in each language.
Which text counts as a marker
Only {{ immediately followed by a dotted name and }}, with no spaces —
for example {{nav.pricing}}. Everything else is shown as written:
{{name}}, {{ nav.pricing }}, {{ x + y }}.
Showing a marker-shaped text literally
To display the text {{nav.pricing}} itself in an HTML part of a block,
write the first brace as an HTML entity:
{{nav.pricing}}
Visitors see {{nav.pricing}}, and it isn't replaced. (This works in the
block's HTML only — plain fields such as a menu label show entities as
written.)
The admin in your language
The admin dashboard has its own language setting: pick one from the language menu in the admin sidebar. Choosing Arabic also switches the admin to right-to-left.