Publish in more than one language

Skip this page if your site has one language. Otherwise you write each item once in the default language and add translations beside it; every other language is published under its own prefix, such as /hi/articles/pricing-guide. The full reference is Languages.

Add the languages

1. Open Settings, then Localization.

2. Under Add a language, pick each language (or Other (enter a code)), and set the order they appear in. A code that a page already has as its address, such as pay for an app's /pay, is not accepted.

3. Check which one is the Default: the language you write in. Its pages keep URLs with no prefix. Choose it before you publish, not after.

4. Press Save Languages.

Translate

1. Content type names. Edit each type under Content types and fill in the language tabs: the plural and singular name, the description and the custom field labels. They appear on the public list page and in headings such as "Back to Articles".

2. Items. In the editor, switch to a language tab and translate. Empty fields fall back to the default language. The URL, cover image, tags and dates are shared by all languages, and Save as draft and Publish apply to every language at once.

3. Fixed template text, such as "Read more": mark it in your templates, header and footer with data-arc-t="read_more", leaving the default wording inside, and add the key to that language's strings file in your site folder, for example src/custom/site/strings/hi.json. Your keys are merged over Arc CMS's (public/_site/strings/hi.json), so write only the keys you add or reword. A missing key shows the default wording.

The <arc-language-switcher> element in the site header becomes links to the page's other languages, and disappears on a single-language site.

After changing templates or a strings file, deploy the website with npm run deploy, choosing Website or Everything. The deploy publishes every page again afterwards, so they pick up the new text. Publishing reads the strings from the live site, so publishing an item or using Republish website before the deploy still uses the old text.

Write a strings file

A strings file is one JSON object of "key": "text" pairs, one file per language, named after the language code: src/custom/site/strings/hi.json, src/custom/site/strings/fr.json. In your HTML, mark each text with its key and leave the default wording inside:

<a href="/articles"><i class="fas fa-book"></i> <span data-arc-t="nav_articles">Articles</span></a>
<input type="search" placeholder="Search" data-arc-t-attr="placeholder:search_placeholder">

{
  "nav_articles": "लेख",
  "search_placeholder": "खोजें"
}

• data-arc-t replaces all of the element's content with the text. Keep icons and other markup outside the marked element, as above.
• data-arc-t-attr="placeholder:key" translates an attribute. Name several as placeholder:key1,title:key2.
• Arc CMS ships a strings file for Hindi only (public/_site/strings/hi.json). For Hindi, your file is merged over it key by key, so write only the keys you add or reword. For any other language, your file is the whole list.
• A file for the default language works the same way, such as src/custom/site/strings/en.json for English: its keys replace the wording written in your HTML and the panels' wording, on every page in that language, static pages included. Arc CMS ships none, so without one the wording in your HTML stands. It is the place to reword the signup panels for the whole site (see Word the confirmation your way).
• A missing key, or one whose text is empty, shows the default wording.
• Some keys are used without data-arc-t: min_read for the reading time ("5 min read"), latest_of_type for a card block's default heading, the signup_* keys for the signup panels, the contact_* keys for the contact form's messages, legal_* and contact_notice for the notices under the forms, and powered_by and powered_by_title for the "Built with Arc CMS" line at the foot of each page, where {link} marks the place of the Arc CMS link (a translation without it keeps the English). Arc CMS's hi.json lists them all; copy it as the start of another language's file.
• A file that is not valid JSON stops npm run dev and npm run build with a message naming it.

What stays in one language

• Hand-written static pages (src/custom/site/pages/) exist in the default language only. The standard pages (About, Contact, the policies) are content, so translate them in the editor like any item; the footer lists them with their titles in the page's language.
• The home page is published in every language: from src/custom/site/home.{lang}.html when you write one, else from home.html with its data-arc-t text translated; see Build your home page.

Next

Let visitors search your pages: Add search.