Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Deployment

...

Cloud

...

Products

...

Refined for Confluence Cloud, Refined for Jira/JSM

Summary

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 this guide

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:

  • 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.

...

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:

  1. 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.

  2. 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.

  3. Set theme and configuration
    When you have the structure, move on to setting the theme and the general site configurations.

  4. 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.

  5. 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

  1. Go to the site builder, then click sites in the global context to the left.

    Image Removed
  2. Then click to add in a new site, in this example it will get the name “french-demo.refined.site”.

    Image Removed

  3. Finally go to edit your new site by clicking on its tile.

    Image Removed

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.

  1. In the Site Builder, you can see what theme is being used, click to set it on your new theme.

    Image Removed

  2. Make sure to also look for any additional themes that might differ from the global one.

    Image Removed

  3. 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.

...

...

Image Removed

Click to publish the layout.
As you can see, it is in English.

...

4. Translate the content of the landing pages

...

  1. Image Removed

...

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)

Image Removed

Searching

...

Need further help?

...

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.

Expand
titleSupported languages

Albanian

Bosnian

Chinese Simplified

Chinese Traditional

Croatian

Czech

Dutch

English (UK)

Estonian

Finnish

French (France)

German (Germany)

Hungarian

Icelandic (Iceland)

Italian (Italy)

Japanese

Korean

Macedonian

Norwegian Bokmål

Polish

Portuguese (Portugal)

Portuguese (Brazil)

Romanian (Romania)

Russian

Serbian

Slovak

Slovenian

Spanish (Spain)

Swedish (Sweden)

Ukranian

Vietnamese

Editable text:

  • Confluence pages and blogs

  • Titles and body text in modules on landing pages

  • Navigation menu items

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.

  1. Build a Refined site in a single language. In this tutorial, we’ll create a Dutch translation of our English Octo Support demo site.

  2. Create copies of all the Confluence spaces that you added to the first site, and translate them in Confluence.

  3. Set up translations in the JSM project’s settings.

  4. Create a new site for the second language.

  5. Apply the same theme to the second site.

  6. Create a similar site structure.

image-20240403-121545.pngImage Added
image-20240403-121729.pngImage Added
  1. Apply the same site settings to the second site. Make sure to translate settings such as announcement banners and promoted search results.

  2. 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.

  3. Repeat this process for all landing pages on your site.

image-20240403-124811.pngImage Added
image-20240403-124817.pngImage Added
  1. Create a footer, following the same instructions as in step 6 above.