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.
| Table of Contents |
|---|
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, portals, 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.
| Info |
|---|
In this guide it is assumed that:
|
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.
...
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/portals as on your other site, or it might be that you have different space/portals 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.
...
Drag and drop each item to the site to match what you have in the English site.
...
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.
...
...
Click to publish the layout.
As you can see, it is in English.
...
4. Translate the content of the landing pages
...
...
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.
...
Repeat the layout changes to all the modules in the layout, as well as all the layouts in the site.
The result
Once you are done with the updates to the layouts, you should now have one site that is in English, and one site that is in French .
| Info |
|---|
Updates will need to be made in both areas. |
Example as a non-admin
As a non admin with the following setup:
Profile set to French
Browser set to French
The new site will look like this:
Main page
...
Service Desk
...
Confluence Page (with pages in French)
Searching
...
Some content on Refined sites is automatically translated for visiting users, based on their Atlassian profile or browser settings. Some content needs to be translated manually, if you want a site to be fully available in another language.
If a language isn’t available for automatic translation, the language defaults to English.
Content | Manual or automatic translation? | |||||
|---|---|---|---|---|---|---|
Non-editable (hard-coded) text in Confluence/JSM headings, menus, etc | This is automatically translated based on the user’s Atlassian profile language settings. | |||||
JSM request types | Manually set up translations in the JSM project’s settings. The language on the Refined site then follows the user’s Atlassian profile settings. | |||||
Non-editable (hard-coded) text in Refined site menus and buttons. | This is automatically translated based on the user’s browser language settings.
| |||||
Editable text:
| Refined doesn’t offer automatic translation and isn’t compatible with third party translation apps from the marketplace. You’ll therefore have to create content manually in every language that your sites will contain. We’ll explain how to do this in the guides below. |
Recreate a site in a different language
Because manual translations are needed for content such as landing pages and navigation menu items, you can best serve audiences in multiple languages by creating one site per language. In this tutorial we assume the site contains both Confluence and JSM content, but of course you can skip the instructions that aren’t relevant to your site.
Build a Refined site in a single language. In this tutorial, we’ll create a Dutch translation of our English Octo Support demo site.
Create copies of all the Confluence spaces that you added to the first site, and translate them in Confluence.
Create a new site for the second language.
Apply the same theme to the second site.
Create a similar site structure.
Apply the same site settings to the second site. Make sure to translate settings such as announcement banners and promoted search results.
On the first site, open a landing page. Edit the page and export the page’s layout. Open the equivalent of that page on the second site and import the layout. Translate all content on the page. If needed, update module settings such as links, page IDs, and project IDs. Some dynamic modules like Page Trees pick up on their location on the site and may already show the right content.
Repeat this process for all landing pages on your site.
Create a footer, following the same instructions as in step 6 above.