Build a multilingual site

For some Refined sites you build, you might have a user base that will look at the content in different languages. There are a few ways to implement this with Refined, and here is a guide on how to support several languages.

Guide - prerequisites

For the purpose of this guide, we’ll consider this option:

Dividing the content into two sites, based on language

What is translated where?

To get a full translation of your content, there are three parts that need to be translated:

Area	Translated within	Shown based on setting
Atlassian parts	Content within Jira, JSM, Confluence themselves	Profile language setting
Your content in Atlassian	Contained within the content strategy for language on your instance, how you’ve set up spaces, pages, projects, request types, etc.	Based on your strategy
Refined parts	Help texts, guidance, Refined menus.	Browser language setting
Your content in Refined	Content within Refined modules, configurable menus	Read the guide below!

The content on Confluence and Jira/JSM

When you set this up, there might be two ways your content exists on Confluence

Each space contains one language each

…and JSM:

You have made translations on the project and request types.

Regardless of your approach here, you can opt for either two sites or having the content within the content menu for languages. We’ll now go through both options.

In this guide it is assumed that:

Your content is translated in Jira Service Management
Your Confluence has content in both languages
You have one Refined site built out

The main site

The site you’ll start our from is built out with the theme, the structure and the landing pages you are looking to work with.

TheSite.mov

In this example, the page is built out in English, and we’ll make a French counter-part (with the help of Google Translate).

Two languages - two sites

With the first site already set up, we’ll cover the following steps in the guide:

Add a new site, add in the structure
Start a new site, apply the theme and create the structure in the site builder. This would need to be done manually for the new site, and would be in the second language.
Add Atlassian Content
Once the structure has been built out, add the Atlassian content. This might either be the same spaces/projects as on your other site, or it might be that you have different spaces/projects for different languages.
Set theme and configuration
When you have the structure, move on to setting the theme and the general site configurations.
Export and import the layouts
Go to the first site, edit the layout(s), click to export them. This will export images, text and all the content. Go to the second site, on the corresponding layout, edit it and click to import the one you exported. This will give you the main layout and modules, and you would then need to go through each of them to translate.
Translate the content of the landing pages
Each landing page will have content in English, that needs to be translated to French.

Let’s get started.

1. Add a new site, add in the structure

Go to the site builder, then click sites in the global context to the left.
Then click to add in a new site, in this example it will get the name “french-demo.refined.site”.
Finally go to edit your new site by clicking on its tile.

2. Add in Atlassian Content, and Refined structure

To mirror what you have on the original, English site, the easiest way to proceed is to split your screen so that you have your template site - the first one, on the left hand side.

For each item in your original site, add in the content for it.

ℹ For Confluence, you might have two separate spaces, one in English and one in French, and when this is the case you’ll need to add the French counterpart for the French site.
ℹ Contrary, because JSM project contains their own translations, it will be the same project that is added in to the two sites, but when looking at the site itself, the name you see will depend on the language setting on the user’s profile.
Drag and drop each item to the site to match what you have in the English site.

3. Set theme and configuration

You have the structure in place, so now we’ll move on to the visual parts. First order of business - set the theme.

In the Site Builder, you can see what theme is being used, click to set it on your new theme.
Make sure to also look for any additional themes that might differ from the global one.
For the configurations for the site, go through each of the tabs in Refined Administration and match them up between the sites, these are:
- Configuration, Permissions, Audience Features, Jira Service Management.

With this last step, the main part of the backend setup is completed, and it’s time to move to the layouts.

4. Export and import the layouts

Start by going to each of the sites, it is good to keep the two-window-setup as you continue working in both sites.

Export the layouts from the English page.
To export the layout, click to edit the layout, then click the Import/Export button at the top.
In the French site, click to edit the layout and click the Import/Export button.
Click to publish the layout.
As you can see, it is in English.

4. Translate the content of the landing pages

Edit the layout again, and translate the content that is stored within Refined. This means all the content that you manually set up here, like titles, button etc.

Hard coded content
Any hard corded content, where you have added in links to other content like pages, or names and titles will need to be translated and updated.

Dynamic content
Dynamic content, for instance the Site Navigation Module will automatically pick up the Site Structure, in this case, and will not need to be translated.

Filtered content
Come content might be dynamic by picking up Confluence pages or blog posts for instance. For modules like this, you may need to adapt the filter to make it show the French spaces instead of the English ones.