Translating your Roller blog

Recently I was dealing with a solution for translating one of the blogs on blogs.sun.com. This article covers some of the ways to enable multiple languages on roller blogs and can be used as a guide for setting up a translated blog. The solution we're aiming for will be similar to Jonathan's blog.

Blogs at blogs.sun.com are powered by Apache Roller. There are multiple ways how to deal with translated content, but first we need to enable internationalization support.

 

Step 1. - Adjusting the blog preferences

  • log in to your roller account and select the right blog
  • navigate to Preferences
  • locate the Internationalization Settings
  • adjust the settings as shown on the following image 
  •  Internationalization settings

Here's what these two options do:

  • I publish my weblog in multiple languages: a language selection box will appear when you create or edit a blog entry.
  • Show my weblog entries from all languages on my home page: check this box if you'd like your weblog's main page to show your posts in all languages. If you don't check it, then readers will only see weblog entries from your default locale.

As you can see, you can choose either to publish all articles (even the translated ones) on the same page or to have only articles from one language visible at a time.

 

Step 2. - Using custom theme

Let's say that our blog is by default in English. If we now go and create a new article in Czech, it won't be visible on the blog. It's available on a URL created as <blog_URL>/<locale>/ (e.g. http://blogs.sun.com/hnhn/cs/), so now we want to provide a nice way to navigate there from the English blog.

In order to do this, we need to modify the blog template. Roller allows such modifications only with custom theme setting:

  • log in to your roller account and select the right blog
  • navigate to Design
  • if Shared Theme is enabled, select Custom Theme, pick a theme you want to use and click Update Theme
  • click Templates to see the templates we can now modify

This is how it can look like:

Roller templates (Adept)

 

Step 3. - Modifying the blog template

By modifying some of the templates listed above, we can now change our blog appearance. It can be challenging to locate the right place to modify, but I won't get into much detail here, as the templates for various themes significantly differ. We used the Adept theme, which is nicely structured. Let's place the language selection to the right navigation bar - that will be the template sidebar in our case.

It begins with:

<div id="sidebars">
<div id="innersidebars">

<div class="sidebar sidebar-a" id="nav">
<div class="innersidebar">



<!-- about me -->
 

To quickly add the language links, we modify the beginning of the template like this:

<div id="sidebars">
<div id="innersidebars">

<div class="sidebar sidebar-a" id="nav">
<div class="innersidebar">
Language links
<!-- language selection -->

<div class="sidebar-sect default-expanded">
<div class="sidebar-sect-title">
<h2>Select language:</h2>

</div>
<div class="sidebar-sect-content">
<a href="http://blogs.sun.com/<YOUR_BLOG_HANDLE>/">English</a><br />
<a href="http://blogs.sun.com/
<YOUR_BLOG_HANDLE>/cs/">Czech</a>
</div>
</div>


<!-- about me -->

Note: Replace <YOUR_BLOG_HANDLE> with the name of your blog.

Note: The links to the translated blogs (http://blogs.sun.com/<YOUR_BLOG_HANDLE>/cs/) are based on locales, so keep in mind that there is a difference if you publish your article in English or English (United States). Publishing as English will create an article with "/en/" in the URL, while English (United States) creates "/en_US/".

 

Step 4 - Creating a language select box

The solution above is the simplest one but it might not be optimal if we have a larger number of languages we translate to. A select box would be more appropriate.

It's easy to come up with a code for a language-switching select box, but there's a couple of things to consider. I'll go through that in another article, so for now - here's the code:

<!-- language selectbox -->
language select box<div class="sidebar-sect default-expanded">
<div class="sidebar-sect-title">
<h2>Languages:</h2>
</div>
<div class="sidebar-sect-content">
<form action="">
<select onchange="location.href=value;">
<option value="#">Select language:</option>
<option value="http://blogs.sun.com/
<YOUR_BLOG_HANDLE>/">English</option>
<option value="http://blogs.sun.com/
<YOUR_BLOG_HANDLE>/cs/">Česky</option>
</select>
</form>
</div>
</div>

 

References:

 

Comments:

Post a Comment:
  • HTML Syntax: NOT allowed
About

Solaris l10n & i18n, locales, keyboards, fonts and related topics.

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today